Кілька екземплярів на Google Графіках - javascript, jquery

Я намагаюся отримати 2 екземпляри діаграм Google, але з’являються лише останні.

Ось код:

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

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

function drawChart() {
var jsonData = $.ajax({
url: "charts/getData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById("chart_div"));
chart.draw(data, {width: 400, height: 240});

}


//Chart 2

google.load("visualization", "1", {"packages":["corechart"]});

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

function drawChart() {
var jsonData = $.ajax({
url: "charts/getData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data2 = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart2 = new google.visualization.PieChart(document.getElementById("chart_div2"));
chart2.draw(data2, {width: 400, height: 240});

}

Що я тут роблю неправильно?

Відповіді:

Вам потрібно зателефонувати в google.load ("візуалізація", "1", {"пакети": ["corechart"]}); тільки один раз. Я б запропонував функцію ініціалізації, яка б перегрупувала всі ваші функції drawchart (). Дивись нижче. Крім того, ваш код виглядає добре і повинен працювати.

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

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

function initialize() {
drawChart();
drawChart2();
}


function drawChart() {
var jsonData = $.ajax({
url: "charts/getData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById("chart_div"));
chart.draw(data, {width: 400, height: 240});

}



function drawChart2() {
var jsonData = $.ajax({
url: "charts/getData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data2 = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart2 = new google.visualization.PieChart(document.getElementById("chart_div2"));
chart2.draw(data2, {width: 400, height: 240});

}