Utilizing JQPlot, JavaScript, Asp.net 4.5, C# and MS Visual Studio 2012.
Hello all! I'm facing an issue with the following code:
script>
$(document).ready(function () {
var dataArray = [];
<%foreach(Last12MonthsRegistered reg in dbregistered)
{%>
dataArray.push(['<%=reg.MonthName.Trim()%>',<%= reg.TotalReg%>]);
<%}%>
var plot2 = $.jqplot('chart1', [dataArray], {
// Give the plot a title.
title: 'Users Registered Last 12 Months',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
// options for each axis are specified in separate option objects.
xaxis: {
label: "Months"
},
yaxis: {
label: "User Total"
}
}
});
});
</script>
I am trying to render a jqplot graph using data obtained from my SQL Database. This data is bound to a list of objects. I access the values and loop through a Foreach loop in the script above to populate an array, which is then used for the JQplot.
The issue I am encountering is that nothing appears on the graph. When debugging the JS script, the results showed:
dataArray.push(['October',0]);
dataArray.push(['November',0]);
... (more months with corresponding user registrations)
dataArray.push(['September',1]);
which seems correct. However, when hovering over the array during debugging, it shows:
0: Array[2]
1: Array[2]
... (similar pattern for other months)
length: 12
__proto__: Array[0]
This does not seem correct at all! Continuing debugging results in a blank graph being displayed.
I am new to JavaScript and this is my first time using JQPlot. I am struggling to find the necessary information in their documentation. Can you help me understand why my array appears to be incorrect?
Thank you!
UPDATE: 24/10/2013 - 11:24 AM found some more info and changed my code to a bar chart.
$(document).ready(function () {
var dataArray = [];
var ticks = [];
<%foreach(Last12MonthsRegistered reg in dbregistered)
{%>
dataArray.push(<%= reg.TotalReg%>);
<%}%>
<%foreach(Last12MonthsRegistered reg in dbregistered)
{%>
ticks.push('<%= reg.MonthName.Trim()%>');
<%}%>
var plot1 = $.jqplot('chart1', [dataArray], {
// Give the plot a title.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true }
},
series: [
{ label: 'Users Registered' },
],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxsisRenderer,
ticks: ticks
},
yaxis: {
pad: 1.05
}
}
});
});
The arrays appear to be fine, and the month names are displayed on the x-axis, which is great. The only issue is that they are stacked on top of each other to the very left, resulting in nothing being displayed and the names overlapping. Any thoughts on this?
I am puzzled, any insights would be greatly appreciated.