/ / Нанесення графіків Google з JSON - javascript, jquery, ajax, google-візуалізація

малювати графіки google з JSON - javascript, jquery, ajax, google-візуалізація

Як я можу завантажити та використовувати набір даних для googleдіаграми, якщо це був окремий файл JSON ?? Я намагався отримати jQuery getJSON, але не зміг його попрацювати .. Google Viz повинен використовувати JSON для намалювання діаграми Чи є спосіб побудови google API? чи я можу знайти спосіб використання jQuery і як це зробити? Дякую

      // Load the Visualization API and the piechart package.
google.load("visualization", "1.0", {"packages":["corechart"]});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn("string", "Products");
data.addColumn("number", "Automated");
data.addRows([
["Product 1", 85],
["Product 2", 75],
["Product 3", 90],
["Product 4", 40],
["Product 5", 40]
]);

// Set chart options
var pie_options = {"title":"How Much Automated our Products are?",
"width":520,"height":300
};
var bar_options ={"width": 620, "height": 300,
"title": "Products",
"hAxis": {"title": "% Automated", "titleTextStyle": {"color": "red", "fontSize": 16}}
}
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById("piechart_div"));
chart.draw(data, pie_options);

var chart = new google.visualization.ColumnChart(document.getElementById("barchart_div"));
chart.draw(data, bar_options);
}

Відповіді:

17 за відповідь № 1

new google.visualization.DataTable(json) працює

Подивіться вихід з dataTable.toJSON() для правильної структури для використання.

Отже, якщо у вас є скрипт getjson.php на вашому сервері, який повертає правильно відформатований json, ви можете це зробити:

$.getJSON("/getjson.php", function(json) {
var dataTable = new google.visualization.DataTable(json);
});