Google Pie Chart Gives NaN For Legend

[iRadiate]

I have a Google Pie Chart being populated by data from a List. This all works great with the exception that the chart legend is displaying NaN (not a number ???) rather than the intended Machine name as shown.


NaN.jpg


The javascript for building the array for the chart is shown in the code below.

function doClinicalDowntime() {

//Get data from List instead of xbasic call back
//Initialize array header in string variable strdata.
var strdata = "['Machine','Clinical Downtime'],"
var lObj = {dialog.object}.getControl('list1');
//number of rows in list.
var count = lObj._rData.length;
if (count == 0)
{
{dialog.Object}.setValue('PLACEHOLDER_1','No data found in your list. Check your data or filter settings' );
{dialog.Object}.setControlDisplay('STATICTEXT_1',false)
return;}
{dialog.Object}.setControlDisplay('STATICTEXT_1',false)

//Loop through all rows of the list (selected and unselected) and build the array string.
for (i=0;i<count;i++) {
strdata = strdata + "['" + + lObj.getData(i).MachineDisplayName + "'," + + lObj.getData(i).SumClinicaldowntime + "]," ;
}
//remove last comma from bottom row.
strdata = strdata.substring(0, strdata.length - 1);
//enclose in brackets
strdata="[" + strdata + "]";

{dialog.Object}.setValue('PLACEHOLDER_1',strdata);

//Converts the string variable to a javascript object that google can consume as a parameter
//Without this command, you will get "not an array error"
var chartdataObj = eval ("(" + strdata + ")");

//PLACEHOLDER_1 used for no records found message. Clear any value
{dialog.Object}.setValue('PLACEHOLDER_1','');

var data = google.visualization.arrayToDataTable(chartdataObj);

{dialog.Object}.setControlDisplay('STATICTEXT_1',true);
var options = {
title: 'Clinical Downtime By Machine',
is3D: true,
};

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

}

Does anyone know why I'm getting NaN instead of the machine name? If I hard code the data, then it displays correctly, so I'm guessing it might be something to do with how the array is built in javascript,

[Sarah Mitchell]

Does anyone know why I'm getting NaN instead of the machine name? If I hard code the data, then it displays correctly, so I'm guessing it might be something to do with how the array is built in javascript,

You have a lot going on here. It might be easier to build your data up an array of arrays and use JSON.stringify() to convert it to text to display in your PLACEHOLDER_1 control. This may simplify things for you.

Have you inspected what you're getting back from google.visualization.arrayToDataTable()?

Also, is there code missing from this statement between the + +?

strdata = strdata + "['" + + lObj.getData(i).MachineDisplayName + "'," + + lObj.getData(i).SumClinicaldowntime + "]," ;

[iRadiate]

You have a lot going on here. It might be easier to build your data up an array of arrays and use JSON.stringify() to convert it to text to display in your PLACEHOLDER_1 control. This may simplify things for you.

Have you inspected what you're getting back from google.visualization.arrayToDataTable()?

Also, is there code missing from this statement between the + +?

strdata = strdata + "['" + + lObj.getData(i).MachineDisplayName + "'," + + lObj.getData(i).SumClinicaldowntime + "]," ;

AHA ! Yes, there was an extra + character here ... strdata = strdata + "['" + + lObj.getData(i).MachineDisplayName + "'," + + lObj.getData(i).SumClinicaldowntime + "]," ;

I removed the extra + and now it works great! Darn syntax anyway
Yes, there is a lot going on but really it is just building the array from the filtered list data. I think I got the basics of this code from one of Selwyn's videos showing how to go from hard coded google sample data to real world SQL data.
Here's a quick demo.

https://www.screencast.com/t/Lfu5o7AlOC


Thank you Sarah.

[Sarah Mitchell]

AHA ! Yes, there was an extra + character here ... strdata = strdata + "['" + + lObj.getData(i).MachineDisplayName + "'," + + lObj.getData(i).SumClinicaldowntime + "]," ;

I removed the extra + and now it works great! Darn syntax anyway
Yes, there is a lot going on but really it is just building the array from the filtered list data. I think I got the basics of this code from one of Selwyn's videos showing how to go from hard coded google sample data to real world SQL data.
Here's a quick demo.

https://www.screencast.com/t/Lfu5o7AlOC


Thank you Sarah.

Did you also remove the second one?

I would encourage you to rewrite this using array push() and generating your string with JSON.stringify(). I think it would improve the readability of your script and eliminate the need to do things like strip extra characters off the end of your string before converting it to an array. EG:

var data = [];
data.push(["Label","Value"]);
data.push(["My Value 1", 1]);
data.push(["My Value 2", 2]);
data.push(["My Value 3", 3]);

alert(JSON.stringify(data));

[iRadiate]

Did you also remove the second one?

I would encourage you to rewrite this using array push() and generating your string with JSON.stringify(). I think it would improve the readability of your script and eliminate the need to do things like strip extra characters off the end of your string before converting it to an array. EG:

var data = [];
data.push(["Label","Value"]);
data.push(["My Value 1", 1]);
data.push(["My Value 2", 2]);
data.push(["My Value 3", 3]);

alert(JSON.stringify(data));

No, initially I did not remove the second '++' and that was working code shown in the video above. However, I have since removed it and it works too. I'm not sure why it didn't like the first ++ but was okay with the second ++.

This is the final working code:

function doClinicalDowntime() {

//Get data from List instead of xbasic call back
//Initialize array header in string variable strdata.
var strdata = "['Machine','Clinical Downtime'],"
var lObj = {dialog.object}.getControl('list1');

//number of rows in list.
var count = lObj._rData.length;
if (count == 0)
{
{dialog.Object}.setValue('PLACEHOLDER_1','No data found in your list. Check your data or filter settings' );
{dialog.Object}.setControlDisplay('STATICTEXT_1',false)
return;}
{dialog.Object}.setControlDisplay('STATICTEXT_1',false)

//Loop through all rows of the list (selected and unselected) and build the array string.
for (i=0;i<count;i++) {
strdata = strdata + "['" + lObj.getData(i).MachineDisplayName + "'," + lObj.getData(i).SumClinicaldowntime + "]," ;
}

//remove last comma from bottom row.
strdata = strdata.substring(0, strdata.length - 1);
//enclose in brackets
strdata="[" + strdata + "]";

{dialog.Object}.setValue('PLACEHOLDER_1',strdata);

//Converts the string variable to a javascript object that google can consume as a parameter
//Without this command, you will get "not an array error"
var chartdataObj = eval ("(" + strdata + ")");

//PLACEHOLDER_1 used for no records found message. Clear any value
{dialog.Object}.setValue('PLACEHOLDER_1','');

var data = google.visualization.arrayToDataTable(chartdataObj);

{dialog.Object}.setControlDisplay('STATICTEXT_1',true);
var options = {
title: 'Clinical Downtime By Machine',
is3D: true,
};

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

{dialog.object}._chart = chart;

}]

Now that I have it working, I will take a look at your suggestion of using array push() with JSON.stringify(). I agree, it certainly looks cleaner and easier to read