Google Chart Error (Object Expected)
220 views
Skip to first unread message
TheInnovator
May 18, 2013, 4:00:13 PM5/18/13
to google-visua...@googlegroups.com
I am trying to crate a stacked bar chart using google charts. It's supposed to look like this
http://jsfiddle.net/GTpgA/1/Here's my code and i'm pulling data from a sharepoint list. After a lot of debugging and alerts, the error is somewhere here but it all looks right to me.
data.addRow('FY12',dataValues[0][1], null, null);
data.addRow('FY12',null, dataValues[0][2], dataValues[0][3]);
data.addRow(null,null,null,null);
data.addRow('FY13',dataValues[1][1], null, null);
data.addRow('FY13',null, dataValues[1][2], dataValues[1][3]);
Here's the full code.....
function buildPlannedActual(Charts) {
var chartTitle = "";
var projectName = "";
var beginFY = "";
var endFY = "";
var LastFY = "";
var LastFY = "";
// get max min values
var maxVAxis = 50;
var minVAxis = 0;
var step = 5;
var countVAxis = (maxVAxis - minVAxis) / step + 1;
var dataValues = [
['FY 12', 0, 0, 0],
['FY 13', 0, 0, 0]
];
var sourceType = getSource(Charts);
var varSource;
switch (sourceType) {
case "SAC":
varSource = "SAC";
break;
case "JAC":
varSource = "JAC";
break;
case "RAC":
varSource = "RAC";
break;
}
$().SPServices({
operation: "GetListItems",
listName: "ChartConfigValues",
async: false,
CAMLQuery: "<Query><Where><Eq><FieldRef Name='Charts' /><Value Type='Lookup'>" + Charts + "</Value></Eq></Where></Query>",
completefunc: function (xData, Status) {
var numRecords = parseInt($(xData.responseXML).SPFilterNode('rs:data').attr('ItemCount'), 10);
alert("numRecords: "+numRecords);
if (numRecords > 0) {
$(xData.responseXML).SPFilterNode('z:row').each(function () {
projectName = formatStr($(this).attr("ows_ProjectName"));
var fiscalYear = formatStr($(this).attr("ows_FiscalYear"));
chartTitle = $(this).attr("ows_Title") + fiscalYear;
var prevYear = fiscalYear - 1;
beginFY = prevYear + "-10-01";
endFY = fiscalYear + "-09-30";
LastFY = prevYear -1 + "-10-01";
LastFY = fiscalYear -1 + "-09-30";
});
}
}
});
$().SPServices({
operation: "GetListItems",
async: false,
listName: "StartingSites",
CAMLViewFields: "<ViewFields><FieldRef Name='"+varSource+"PlannedDate'></FieldRef></ViewFields>",
CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='ProjectName' /><Value Type='Lookup'>"+ projectName + "</Value></Eq><And><Geq><FieldRef Name='"+varSource+"PlannedDate' /><Value Type='DateTime'>" + beginFY + "</Value></Geq><Leq><FieldRef Name='"+varSource+"PlannedDate' /><Value Type='DateTime'>" + endFY + "</Value></Leq></And></And></Where></Query>",
completefunc: function (xData, Status) {
var numRecords = parseInt($(xData.responseXML).SPFilterNode('rs:data').attr('ItemCount'), 10);
alert("Planned: "+numRecords);
if (numRecords > 0)
{
// Loop through each item
$(xData.responseXML).SPFilterNode('z:row').each(function() {
// Get Sum for Rc Projected Site Months
dataValues[0][1] ++;
});
}
}
});
$().SPServices({
operation: "GetListItems",
async: false,
listName: "CurrentSites",
CAMLViewFields: "<ViewFields><FieldRef Name='"+varSource+"CertainDate'></FieldRef></ViewFields>",
CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='ProjectName' /><Value Type='Lookup'>"+ projectName + "</Value></Eq><And><Geq><FieldRef Name='"+varSource+"CertainDate' /><Value Type='DateTime'>" + beginFY + "</Value></Geq><Leq><FieldRef Name='"+varSource+"CertainDate' /><Value Type='DateTime'>" + endFY + "</Value></Leq></And></And></Where></Query>",
completefunc: function (xData, Status) {
var numRecords = parseInt($(xData.responseXML).SPFilterNode('rs:data').attr('ItemCount'), 10);
if (numRecords > 0)
{
$(xData.responseXML).SPFilterNode('z:row').each(function() {
dataValues[0][2] ++;
});
}
}
});
$().SPServices({
operation: "GetListItems",
async: false,
listName: "CurrentSites",
CAMLViewFields: "<ViewFields><FieldRef Name='"+varSource+"CertainDate'></FieldRef></ViewFields>",
CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='ProjectName' /><Value Type='Lookup'>" + projectName + "</Value></Eq><And><Geq><FieldRef Name='"+varSource+"CertainDate' /><Value Type='DateTime'>" + LastFY + "</Value></Geq><Leq><FieldRef Name='"+varSource+"CertainDate' /><Value Type='DateTime'>" + LastFY + "</Value></Leq><And><IsNull><FieldRef Name='"+varSource+"CertainDate' /></IsNull></And></And></And></Where></Query>",
completefunc: function (xData, Status) {
var numRecords = parseInt($(xData.responseXML).SPFilterNode('rs:data').attr('ItemCount'), 10);
if (numRecords > 0) {
$(xData.responseXML).SPFilterNode('z:row').each(function () {
dataValues[0][3] ++;
});
}
}
});
$().SPServices({
operation: "GetListItems",
async: false,
listName: "StartingSites",
CAMLViewFields: "<ViewFields><FieldRef Name='"+varSource+"PlannedDate'></FieldRef></ViewFields>",
CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='ProjectName' /><Value Type='Lookup'>"+ projectName + "</Value></Eq><And><Geq><FieldRef Name='"+varSource+"PlannedDate' /><Value Type='DateTime'>" + LastFY + "</Value></Geq><Leq><FieldRef Name='"+varSource+"PlannedDate' /><Value Type='DateTime'>" + LastFY + "</Value></Leq></And></And></Where></Query>",
completefunc: function (xData, Status) {
var numRecords = parseInt($(xData.responseXML).SPFilterNode('rs:data').attr('ItemCount'), 10);
alert("Planned: "+numRecords);
if (numRecords > 0)
{
// Loop through each item
$(xData.responseXML).SPFilterNode('z:row').each(function() {
dataValues[1][1] ++;
});
}
}
});
$().SPServices({
operation: "GetListItems",
async: false,
listName: "CurrentSites",
CAMLViewFields: "<ViewFields><FieldRef Name='"+varSource+"CertainDate'></FieldRef></ViewFields>",
CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='ProjectName' /><Value Type='Lookup'>"+ projectName + "</Value></Eq><And><Geq><FieldRef Name='"+varSource+"CertainDate' /><Value Type='DateTime'>" + LastFY + "</Value></Geq><Leq><FieldRef Name='"+varSource+"CertainDate' /><Value Type='DateTime'>" + LastFY + "</Value></Leq></And></And></Where></Query>",
completefunc: function (xData, Status) {
var numRecords = parseInt($(xData.responseXML).SPFilterNode('rs:data').attr('ItemCount'), 10);
if (numRecords > 0)
{
// Loop through each item
$(xData.responseXML).SPFilterNode('z:row').each(function() {
// Get Sum of Actual Site Months
dataValues[1][2] ++;
});
}
}
});
$().SPServices({
operation: "GetListItems",
async: false,
listName: "CurrentSites",
CAMLViewFields: "<ViewFields><FieldRef Name='"+varSource+"CertainDate'></FieldRef></ViewFields>",
CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='ProjectName' /><Value Type='Lookup'>" + projectName + "</Value></Eq><And><Geq><FieldRef Name='"+varSource+"CertainDate' /><Value Type='DateTime'>" + LastFY + "</Value></Geq><Leq><FieldRef Name='"+varSource+"CertainDate' /><Value Type='DateTime'>" + LastFY + "</Value></Leq><And><IsNull><FieldRef Name='"+varSource+"CertainDate' /></IsNull></And></And></And></Where></Query>",
completefunc: function (xData, Status) {
var numRecords = parseInt($(xData.responseXML).SPFilterNode('rs:data').attr('ItemCount'), 10);
if (numRecords > 0) {
$(xData.responseXML).SPFilterNode('z:row').each(function () {
dataValues[1][3] ++;
});
}
}
});
// Initialize data object to hold chart data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Planned RIP');
data.addColumn('number', 'Actual RIP');
data.addColumn('number', 'Anticipated RIP');
//NOT TO SELF: CREATE QUERIES FOR FY13 ALSO
data.addRow('FY12',dataValues[0][1], null, null);
data.addRow('FY12',null, dataValues[0][2], dataValues[0][3]);
data.addRow{null,null,null,null);
data.addRow('FY13',dataValues[1][1], null, null);
data.addRow('FY13',null, dataValues[1][3], dataValues[1][3]);
/* $.each(dataValues, function (index, value) {
data.addRow([dataValues[index][0], Number(dataValues[index][1]), Number(dataValues[index][2]), Number(dataValues[index][3])]);
}); */
var options = {
title: chartTitle,
titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '15' },
legend: { textStyle: { color: 'black', fontName: '"Arial"', fontSize: '12' } },
tooltip: { textStyle: { fontName: '"Arial"' } },
colors: ["#FFFF00", "green", "blue", "#FF8000", "Red"],
backgroundColor: {
fill: '#D8D8D8',
strokeWidth: '0'
},
vAxis: {
title: "Number of Sites", format: '#',
titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '16' },
gridlines: { count: countVAxis, color: 'black' },
minValue: minVAxis,
maxValue: maxVAxis
},
hAxis: { title: "Month", titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '16' } },
seriesType: "bars",
isStacked: true,
};
var chart = new google.visualization.ComboChart(document.getElementById(Charts));
chart.draw(data, options);
}
asgallant
May 19, 2013, 1:11:16 AM5/19/13
to google-visua...@googlegroups.com
What does the dataValues array contain? Add in a console.log(dataValues); line in the code, open the page in Chrome, and see what gets output in the developer's console; post it here so I can test.
TheInnovator
May 19, 2013, 4:11:10 PM5/19/13
to google-visua...@googlegroups.com
The error is not pointing to this section:
var options = {
title: chartTitle,
titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '15' },
legend: { textStyle: { color: 'black', fontName: '"Arial"', fontSize: '12' } },
tooltip: { textStyle: { fontName: '"Arial"' } },
colors: ["#FFFF00", "green", "blue", "#FF8000", "Red"],
backgroundColor: {
fill: '#D8D8D8',
strokeWidth: '0'
},
vAxis: {
title: "Number of Sites", format: '#',
titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '16' },
gridlines: { count: countVAxis, color: 'black' },
minValue: minVAxis,
maxValue: maxVAxis
},
hAxis: { title: "Month", titleTextStyle: { color: 'black', fontName: '"Arial"', fontSize: '16' } },
seriesType: "bars",
isStacked: true,
};
var chart = new google.visualization.ComboChart(document.getElementById(chartType));
chart.draw(data, options);
asgallant
May 19, 2013, 8:27:10 PM5/19/13
to google-visua...@googlegroups.com
I think I see it: the #addRow method accepts an array of values, not a series of parameters, so this:
data.addRow('FY12',dataValues[0][1], null, null);
should be this:
data.addRow(['FY12', dataValues[0][1], null, null]);
and so on for the other #addRow calls.
and so on for the other #addRow calls.
TheInnovator
May 19, 2013, 8:30:26 PM5/19/13
to google-visua...@googlegroups.com
Good Call. Thanks!
Isaac Sogunro
Jul 16, 2013, 2:55:55 PM7/16/13
to google-visua...@googlegroups.com
I am trying to create a combo chart but with stacked chart showing a line from one year to another.
Here's what I have so far but it's not working.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/31PxsJ8V5TE/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
-Isaac-
http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen
asgallant
Jul 16, 2013, 3:27:09 PM7/16/13
to google-visua...@googlegroups.com
Since you have added a null row to the data set, you need to set the "interpolateNulls" option to true in order to make the line draw correctly. Also, you are creating a DataTable and then overwriting it with another DataTable (which I assume is just a copy-paste error); this doesn't prevent your code from working, but it should probably be cleaned up. See fixes here: http://jsfiddle.net/asgallant/GTpgA/4/
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
Isaac Sogunro
Jul 16, 2013, 3:58:07 PM7/16/13
to google-visua...@googlegroups.com
Thanks a lot...I'll clean that that up. Is there documentation on "interpolateNulls"?
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/31PxsJ8V5TE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
asgallant
Jul 16, 2013, 6:26:28 PM7/16/13
to google-visua...@googlegroups.com
It's in the ComboChart documentation.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
--
-Isaac-
http://twitter.com/#!/feedy0urmind
You are today where your thoughts have brought you; you will be tomorrow where your thoughts take you.
- James Allen
--You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/31PxsJ8V5TE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
Isaac Sogunro
Jul 17, 2013, 12:06:28 PM7/17/13
to google-visua...@googlegroups.com
Hello,
I am trying to add dual yaxis to my chart but it's not appearing. Here's what I have...
Any ideas?
Thanks!
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Reply all
Reply to author
Forward
0 new messages