Venkateswararao T Venkateswararao T - 17 days ago 5
jQuery Question

When using more than 3 data sets with jqplot bar graph nothing rendering

When using jqplot example stacked bar graph with more than three data sets nothing rendering, it is working fine when using 3 datasets like s1, s2 and s3. if I add all the 9 segments or more than three segments, I am not seeing anything on the page, or it is not throwing any java script errors on the console. It is silently failing to render the graph.

$(document).ready(function(){
var s1 = [2, 6, 7, 10, 5, 8, 4, 12, 6, 9];
var s2 = [7, 5, 3, 4, 8, 3, 6, 8, 10, 12];
var s3 = [14, 9, 3, 8, 3, 7, 2, 15, 10];
var s4 = [4, 3, 9, 12, 7, 6, 3, 8, 3, 8];
var s5 = [7, 5, 3, 4, 8, 3, 6, 8, 10, 12];
var s6 = [14, 9, 3, 8, 3, 7, 2, 15, 10];
var s7 = [2, 6, 7, 10, 5, 8, 4, 12, 6, 9];
var s8 = [7, 5, 3, 4, 8, 3, 6, 8, 10, 12];
var s9 = [14, 9, 3, 8, 3, 7, 2, 15, 10];
var ticks = ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7', 'Day 8', 'Day 9', 'Day 10'];
plot3 = $.jqplot('graph_container', [s1, s2, s3, s4,s5,s6,s7,s8, s9], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Put a 30 pixel margin between bars.
barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: {show: true}
},
series:[
{label:'Errors'},
{label:'Warnings'},
{label:'Info'},
{label:'Errors2'},
{label:'Warnings2'},
{label:'Info2'},
{label:'Errors3'},
{label:'Warnings3'},
{label:'Info3'}
],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 5
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#graph_container').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info_container').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});

Answer

you need to specify equal no of values for each input array like s1 has 10 elements where as s2 has 9 elements plz correct that then it will work

Comments