jqPlot stackSeries: true, Uncaught TypeError: Cannot read property '0' of undefined - charts

Question

I want to display 3 data series.
Whenever I set the stackSeries: true option in the I get the
Uncaught TypeError: Cannot read property '0' of undefined
or
Uncaught TypeError: Cannot read property '1' of undefined
when trying to display data.
When I remove the stackSeries: true attribue then the chart is rendered. What's wrong?
Update
$(document).ready(function(){
var bar1 = [
<?php
if(!empty($bar1)){
$i = 0;
foreach($bar1 as $bar){
$i++;
if(!empty($bar['jobs']['date_published'])){
if($i == count($bar1))
echo '[\''.$bar['jobs']['date_published'].'\', '.$bar[0]['count'].']';
else
echo '[\''.$bar['jobs']['date_published'].'\', '.$bar[0]['count'].'], ';
}
}
}
?>
];
var bar2 = [
<?php
if(!empty($bar2)){
$i = 0;
foreach($bar2 as $bar){
$i++;
if(!empty($bar['jobs']['date_published'])){
if($i == count($bar2))
echo '[\''.$bar['jobs']['date_published'].'\', '.$bar[0]['count'].']';
else
echo '[\''.$bar['jobs']['date_published'].'\', '.$bar[0]['count'].'], ';
}
}
}
?>
];
var bar3 = [
<?php
if(!empty($bar3)){
$i = 0;
foreach($bar3 as $bar){
$i++;
if(!empty($bar['jobs']['date_published'])){
if($i == count($bar3))
echo '[\''.$bar['jobs']['date_published'].'\', '.$bar[0]['count'].']';
else
echo '[\''.$bar['jobs']['date_published'].'\', '.$bar[0]['count'].'], ';
}
}
}
?>
];
<?php
if(!empty($bar1) && !empty($bar2) && !empty($bar3))
echo 'var labels = ["Bar 1", "Bar 2", "Bar 3"];';
else if(!empty($bar1) && !empty($bar2))
echo 'var labels = ["Bar 1", "Bar 2"];';
else if(!empty($bar2) && !empty($bar3))
echo 'var labels = ["Bar 2", "Bar 3"];';
else if(!empty($bar1) && !empty($bar3))
echo 'var labels = ["Bar 1", "Bar 3"];';
else if(!empty($bar1))
echo 'var labels = ["Bar 1"];';
else if(!empty($bar2))
echo 'var labels = ["Bar 2"];';
else if(!empty($bar3))
echo 'var labels = ["Bar 3"];';
?>
optionsObj = {
//stackSeries: true,
seriesColors:[<?php if(!empty($bar1)) echo '"#4bb2c5",';
if(!empty($bar2)) echo '"#F78181",';
if(!empty($bar3)) echo '"#9AFE2E",';
echo '"#4bb2c5"'; ?>],
animate:true,
legend:{
show:true,
location:"sw",
rowSpacing:"0px",
labels:labels
},
title:{
text:"Jobs",
fontSize:"12px"
},
seriesDefaults:{
showMarker: true,
pointLabels: { show: true },
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 2
}
},
axes:{
xaxis:{
pad:1,
tickOptions:{
fontSize:"10px"
},
renderer:$.jqplot.DateAxisRenderer
},
yaxis:{autoscale: true}
},
highlighter: {show: true},
grid:{drawGridlines:true}
};
<?php $empty = false;
if(!empty($bar1) && !empty($bar2) && !empty($bar3)){ ?>
$.jqplot('chart1', [bar1, bar2, bar3], optionsObj);
<?php } else if(!empty($bar1) && !empty($bar2)){ ?>
$.jqplot('chart1', [bar1, bar2], optionsObj);
<?php } else if(!empty($bar2) && !empty($bar3)){ ?>
$.jqplot('chart1', [bar2, bar3], optionsObj);
<?php } else if(!empty($bar1) && !empty($bar3)){ ?>
$.jqplot('chart1', [bar1, bar3], optionsObj);
<?php } else if(!empty($bar1)){ ?>
$.jqplot('chart1', [bar1], optionsObj);
<?php } else if(!empty($bar2)){ ?>
$.jqplot('chart1', [bar2], optionsObj);
<?php } else if(!empty($bar3)){ ?>
$.jqplot('chart1', [bar3], optionsObj);
<?php } ?>
});

Answer 1

I found that if my dataset has discontinuities in it anywhere, then a stacked graph will throw an error.
For example, this data series will throw an error:
[
[[0,22],[1,22],[2,22]],
[[0,33],[2,33]],
]
this one will not:
[
[[0,22],[1,22],[2,22]],
[[0,33],[1,33],[2,33]],
]
Note the difference between the two. The first one doesn't have a data point at X=1 for the second series. The fix would be to make sure all your series have values at all the possible X values, setting any missing ones to zero:
[
[[0,22],[1,22],[2,22]],
[[0,33],[1,0],[2,33]],
]