I'm new to both highcharts and jQuery and I'm experiencing problems displaying the data from a Sharepoint list using SPServices. I have two columns; one with a Date value, and another with numeric values. I'm using tutorial this as my guideline for the code.
I'm getting the error 'Uncaught Highcharts error #14: www.highcharts.com/errors/14', which I understand is because Highcharts is expecting the Date value to be a number. I read here that I should use parseFloat() or parseInt() which has not worked.
I then tried to generate a line chart using a 'Number' type column instead of the date column and I'm receiving the same error which confuses me further. Thanks for any help.
Code:
<script>
$(document).ready(function () {
var valuesArray = [];
$().SPServices({
operation: "GetListItems",
async: false,
CAMLQuery: "<Query><OrderBy><FieldRef Name='Week'/></OrderBy></Query>",
listName: "{GUIDVALUEREMOVED}",
CAMLViewFields: "<ViewFields><FieldRef Name='Week'/><FieldRef Name='Total'/></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var week = ($(this).attr('ows_Week'));
var total = ($(this).attr('ows_Total'));
valuesArray.push([parseFloat(week), total]);
});
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'CHANGEME',
type: 'line'
},
title: {
text: 'FS Total by Week'
},
yAxis: {
title: {
text: 'values'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
subtitle: {
text: 'Change me 2'
},
tooltip: {
formatter: function() {
return '<b>'+ this.y;}
},
credits: {
enabled: false
},
plotOptions: {
column: {
allowPointSelect: true,
pointPadding: 0.2,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: 'transparent',
formatter: function() {
return '<b>'+ this.y;
}
}
}
},
series: [{
type:'line',
name: 'Total',
data: valuesArray
}]
});
});
</script>
<div id="CHANGEME">
</div>
Here: valuesArray.push([parseFloat(week), total]);
you are parsing only x-value, do the same with y-value: valuesArray.push([parseFloat(week), parseFloat(total)]);