Making piechart using variable array data not working

67 views
Skip to first unread message

Shivan Singh

unread,
Apr 16, 2020, 10:40:30 AM4/16/20
to Google Visualization API
Here is my code

$(document).ready(function(){
$.getJSON("https://api.covid19india.org/data.json", function(data){
$.each(data.statewise, function(key, value){
if (value.state === "Total") {
var data2 = [['Covid19', 'Stats'],
                  ['Active cases',value.active],
                  ['Deaths', value.deaths],
                  ['recovered', value.recovered],];  
}
});
});
});

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(data2);

var options = {
width:"350",
height:"350",
pieHole: 0.5,
backgroundColor: { fill:"transparent"},
chartArea:{
left:10,
right:10, // !!! works !!!
bottom:20,  // !!! works !!!
top:20,
width:"100%",
height:"100%"
},
pieSliceTextStyle: {
color: "white",
},
legend: {position: "bottom", textStyle: {color: "gray"}},

pieSliceText: "none",
};

var chart = new google.visualization.PieChart(document.getElementById("covid19"));
chart.draw(data, options);
}


I got error Uncaught (in promise) ReferenceError: data2 is not defined
    at drawChart

Daniel LaLiberte

unread,
Apr 16, 2020, 11:21:19 AM4/16/20
to Google Visualization API
Hi Shivan,

Google charts is loading and calling your drawChart callback before your getJSON call returns, so that's why data2 is not defined when you use it.  You'll need to combine those two paths into one so you can be sure that your data2 is defined before it is used.

--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e06d3ad4-467f-4c54-92c4-e7e88f57e542%40googlegroups.com.


--

Shivan Singh

unread,
Apr 16, 2020, 11:36:16 AM4/16/20
to Google Visualization API
How to Combine into one so that data2 is defined before it is used?

Daniel LaLiberte

unread,
Apr 16, 2020, 12:09:09 PM4/16/20
to Google Visualization API
It's a bit complex, unfortunately.  You could move your document ready handler inside your drawChart, but further, you have to wait for the getJSON handler.   So it might be simpler to move your google.charts.load and setOnLoadCallback into your getJSON handler.

There ought to be a simpler way to wait for both, perhaps involving Promises.  The google.charts.loader does return a Promise now, but I don't know about your getJSON call.

On Thu, Apr 16, 2020 at 11:36 AM Shivan Singh <shiva...@gmail.com> wrote:
How to Combine into one so that data2 is defined before it is used?

--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/be43a4f1-757c-4d86-bd2b-7fe2c5409c2a%40googlegroups.com.

Shivan Singh

unread,
Apr 16, 2020, 12:54:48 PM4/16/20
to Google Visualization API
You mean Like This?
Code:

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
$.getJSON("https://api.covid19india.org/data.json", function(data){
$.each(data.statewise, function(key, value){
if (value.state === "Total") {
var data2 = [['Covid19', 'Stats'],
                  ['Active cases',value.active],
                  ['Deaths', value.deaths],
                  ['recovered', value.recovered],];  
}
});
});
      var data = google.visualization.arrayToDataTable(data2);

      var options = {
width:"350",
height:"350",
pieHole: 0.5,
backgroundColor: { fill:"transparent"},
chartArea:{
left:10,
right:10, // !!! works !!!
bottom:20,  // !!! works !!!
top:20,
width:"100%",
height:"100%"
},
pieSliceTextStyle: {
color: "white",
},
legend: {position: "bottom", textStyle: {color: "gray"}},

pieSliceText: "none",
};

      var chart = new google.visualization.PieChart(document.getElementById('covid19'));
      chart.draw(data, options);
}

Still not working!

I will be very thankful to you sir, if you can send me right code here.

Daniel LaLiberte

unread,
Apr 16, 2020, 1:04:53 PM4/16/20
to Google Visualization API
All the code that depends on data2 must only be executed after data2 is defined.  So one way you can do that is to wrap all that code in another function that you call after data2 is defined.  So like this:


google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
$.getJSON("https://api.covid19india.org/data.json", function(data){
$.each(data.statewise, function(key, value){
if (value.state === "Total") {
 var data2 = [['Covid19', 'Stats'],
                                    ...
                                ];
                                innerDrawChart();
}
});
});

     var innerDrawChart = function() {
        var data = google.visualization.arrayToDataTable(data2);
           ...
     }
}



--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/01d751cf-dcdf-454d-b7aa-2e0c9a67e3e9%40googlegroups.com.

Shivan Singh

unread,
Apr 16, 2020, 1:14:54 PM4/16/20
to Google Visualization API
Giving Error :(
Error:
Uncaught ReferenceError: data2 is not defined
    at innerDrawChart (covid.js:17)
    at Object.<anonymous> (covid.js:12)
    at Function.each (VM12457 jquery.min.js:2)
    at Object.success (covid.js:6)
    at c (VM12457 jquery.min.js:2)
    at Object.fireWith [as resolveWith] (VM12457 jquery.min.js:2)
    at l (VM12457 jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (VM12457 jquery.min.js:2)

Daniel LaLiberte

unread,
Apr 16, 2020, 1:21:32 PM4/16/20
to Google Visualization API
I just noticed in your code you have ... 

  $.each(data.statewise,  function(key, value){
if (value.state === "Total") {

 var data2 = ...  )

Which I would guess is going to repeat the assignment of data2 multiple times.  That's maybe not what you intended, or if it is, you maybe want to generate multiple charts.   You'll probably need to find a javascript programmer who can help you write the necessary code to fit your needs.  I have too many things I need to do so I can't really help you further.


--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e685d413-4485-461d-89e3-8f36d163c2dc%40googlegroups.com.

Shivan Singh

unread,
Apr 16, 2020, 1:25:24 PM4/16/20
to Google Visualization API
No sir, That code doesn't repeat due to "if condition" used.

Shivan Singh

unread,
Apr 16, 2020, 1:40:38 PM4/16/20
to Google Visualization API
i used if condition so that it doesn't repeat.

creating jquery as function removes the error but doesn't show any chart.

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
function covid() {
$.getJSON("https://api.covid19india.org/data.json", function(data){
$.each(data.statewise, function(key, value){
if (value.state == "Total") {
var data2 = [['Covid19', 'Stats'],
                  ['Active cases',value.active],
                  ['Deaths', value.deaths],
                  ['recovered', value.recovered],];
                  innerDrawChart();  
}
});
});
}
var innerDrawChart = function() {
      var data = google.visualization.arrayToDataTable(data2);

Daniel LaLiberte

unread,
Apr 16, 2020, 2:11:14 PM4/16/20
to Google Visualization API
Maybe it will be simpler for you to just pass your data2 as a parameter to the innerDrawChart, and move innerDrawChart out to the top level as a normal named function.  

             var data2 = [['Covid19', 'Stats'],
                  ['Active cases',value.active],
                  ['Deaths', value.deaths],
                  ['recovered', value.recovered],];
  innerDrawChart(data2);  
  ...
function innerDrawChart(data2) {
  ...
}


--
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 google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/b5e85afa-f53a-4707-9fcf-6748a720e188%40googlegroups.com.

Shivan Singh

unread,
Apr 16, 2020, 2:31:20 PM4/16/20
to Google Visualization API

Untitled.png

It Does Show Pie Chart But doesn't show right data. 
Reply all
Reply to author
Forward
0 new messages