<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
//google.visualization.load('current', {'packages':['corechart']});
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// google.visualization.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(init);
function init() {
var data1 = [
['Language', 'Speakers (in millions)'],
['Cat 1', 26], ['Cat 3', 16], ['Cat 2', 30],
['Total', 100]
];
var data2 = [
['Language', 'Speakers (in millions)'],
['Cat 1', 100], ['Cat 3', 200], ['Cat 2', 300],
['Total', 400]
];
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 1: {offset: 0.2},
2: {offset: 0.3},
3: {offset: 0.4},
4: {offset: 0.5},
},
animation: {
startup:true,
duration: 1000,
easing: 'in'
}
};
var current = 0;
var data = [];
data[0] = google.visualization.arrayToDataTable(data1);
data[1] = google.visualization.arrayToDataTable(data2);
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + '
Production by Country';
chart.draw(data[current], options);
}
button.onclick = function() {
current = 1 - current;
drawChart();
}
drawChart();
}
</script>
</head>
<body>
<div id="piechart"></div>
<input type="button" id="b1" value="Change Value"></input>
</body>
</html>
On Thursday, November 29, 2018 at 3:48:50 PM UTC-6 essasen wrote:
> Here is my HTML file with the JavaScript
>
>
> My problem is I cannot get anything to appear. What am i doing wrong.
>
> <html>
> <head>
> <script type="text/javascript" src="
> https://www.gstatic.com/charts/loader.js";></script>
> <script type="text/javascript">
>
> // Load the Visualization API and the piechart package.
> google.visualization.load('current', {'packages':['corechart']});
>
> // Set a callback to run when the Google Visualization API is loaded.
> google.visualization.setOnLoadCallback(drawChart);
>
> var data1 = google.visualization.arrayToDataTable([
> ['Language', 'Speakers (in millions)'],
> ['Cat 1', 26], ['Cat 3', 16], ['Cat 2', 30],
> ['Total', 100]
> ]);
> var data2 = google.visualization.arrayToDataTable([
> ['Language', 'Speakers (in millions)'],
> ['Cat 1', 100], ['Cat 3', 200], ['Cat 2', 300],
> ['Total', 400]
> ]);
>
> var options = {
> title: 'Indian Language Use',
> legend: 'none',
> pieSliceText: 'label',
> slices: { 1: {offset: 0.2},
> 2: {offset: 0.3},
> 3: {offset: 0.4},
> 4: {offset: 0.5},
> },
> animation: {
> startup:true,
> duration: 1000,
> easing: 'in'
> }
> };
>
>
> var current = 0;
>
> var data = [];
> data[0] = google.visualization.arrayToDataTable(data1);
> data[1] = google.visualization.arrayToDataTable(data2);
>
> var chart = new
> google.visualization.PieChart(document.getElementById('piechart'));
> var button = document.getElementById('b1');
>
>
> function drawChart() {
> // Disabling the button while the chart is drawing.
> button.disabled = true;
> google.visualization.events.addListener(chart, 'ready',
> function() {
> button.disabled = false;
> button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
> });
> options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + '
> Production by Country';
>
> chart.draw(data[current], options);
> }
>
>
>
> button.onclick = function() {
> current = 1 - current;
> drawChart();
> }
>
> drawChart();
>
>
> </script>
> </head>
> <body>
> <div id="piechart"></div>
> <div id="b1"></div>
> </body>
> </html>
>
>
> If someone could explain why the charts or the button is not being drawn.
> I would be much appreciative.
>
> Thank you.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/b9226102-76b4-45e5-8aa9-8721deb95718n%40googlegroups.com.
