How to put two Google charts on the same page
I am creating a web application in which it uses two charts powered by the bank. I use Google api, google charts. However, only the first chart appears while the other is blank.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options1 = {
title: 'teste 1',
is3D: true,
};
var chart1 = new google.visualization.PieChart(document.getElementById('teste1'));
chart1.draw(data1, options1);
}
</script>
<div id="teste1" style="width: 600px; height: 300px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'teste 2',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('teste'));
chart1.draw(data, options);
}
</script>
<div id="teste" style="width: 600px; height: 300px;"></div>
</body>
</html>
2 answers
Google Charts has a time error that prevents more than one chart from loading on the same page.
Google has managed to fix this error currently, I advise you to read this documentation on the subject:
Https://developers.google.com/chart/interactive/docs/basic_load_libs#frozen-versions
Also from a look at this page that talks about the same subject as yours and how they managed to tidy up :
This question has also been answered in the OS, here the link:
Https://stackoverflow.com/questions/33128087/multiple-google-charts
Also take a look at the documentation on how to draw multiple charts :
here it is...it's easy just follow the example:
google.charts.load('current', {'packages': ['corechart'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChartExemplo1);
function drawChartExemplo1() {
var data = google.visualization.arrayToDataTable([
['Unidades', 'ValorTotal'],
['São Paulo', 14000.45],
['Rio de Janeiro', 44000.00],
['Bahia', 69000.99],
['Amazonia', 35000.00]
]);
var options = {
title: 'Exemplo de Grafico em Pizza 2',
is3D: true,
pieSliceText: 'value',
legend: {
position: 'labeled',
textStyle: {
fontSize: 12,
color: '#25476a',
bold: true,
italic: false}
}
};
var chart = new google.visualization.PieChart(document.getElementById('pieChart'));
//Para fomatando a variavel formatter para fazer a conversão.
var formatter = new google.visualization.NumberFormat({
decimalSymbol: ',',
groupingSymbol: '.',
negativeColor: 'red',
negativeParens: true,
prefix: 'R$ '
});
//Para converter o valores da pizza para real.
formatter.format(data, 1);
chart.draw(data, options);
};
///////////////////////////////////////////////////////////////////////////////////////////////////
//2° Grafico
google.charts.load('current', {'packages': ['corechart'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(drawChartExemplo2);
function drawChartExemplo2() {
var data = google.visualization.arrayToDataTable([
['Unidades', 'ValorTotal'],
['New York', 4000.45],
['California', 800.00],
['São Francisco', 6000.99],
['Miami', 3000.00]
]);
var options = {
title: 'Exemplo de Grafico em Pizza 2',
is3D: true,
pieSliceText: 'value',
legend: {
position: 'labeled',
textStyle: {
fontSize: 12,
color: '#25476a',
bold: true,
italic: false}
}
};
var chart = new google.visualization.PieChart(document.getElementById('pieChart2'));
//Para fomatando a variavel formatter para fazer a conversão.
var formatter = new google.visualization.NumberFormat({
decimalSymbol: ',',
groupingSymbol: '.',
negativeColor: 'red',
negativeParens: true,
prefix: 'R$ '
});
//Para converter o valores da pizza para real.
formatter.format(data, 1);
chart.draw(data, options);
};