Why I used jqPlot for ChartBasket.com instead of Flot
In general I consider Flot to be the more capable solution. But in the case of ChartBasket I wanted to setup something quickly and I didn’t need the more advanced stuff Flot makes available, for instance zooming.
With no need for the extras jqPlot makes things easier, no need to convert dates to timestamps, legends are less work to setup and multiple y-axises are automatic. I’m very happy with jqPlot, it will probably be my goto JS library for creating charts and graphs for quite some time going forward. Seriously, how often do you need stuff like this, or this?
Let’s take a look at the jqPlot setup for ChartBasket.
As you can see there’s some PHP thrown in here. Reason being that the amount of charts to be shown is user selectable, then we need things to be dynamic (here’s an example of a basket of consumer related data). A more elegant solution would probably be to have the JS inspect the json encoded data and draw it’s own conclusions but I didn’t feel to be elegant in this case, I felt like being quick 🙂
$.jqplot.config.enablePlugins = true;
$.jqplot("chartdiv", <?php echo $to_graph ?>, {
legend: {show:true},
series: [
<?php $i = 1; foreach($titles as $title): ?>
{showMarker:false, label: "<?php echo $title ?>"<?php echoYaxis($i) ?>},
<?php $i++; endforeach; ?>
],
<?php if(empty($_GET['one_yaxis'])): ?>
axesDefaults: {useSeriesColor: true},
<?php endif ?>
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
rendererOptions:{tickRenderer: $.jqplot.CanvasAxisTickRenderer},
},
yaxis: {autoscale:true}
},
highlighter: {show: false},
cursor: {tooltipLocation:'sw'}
});The data to be drawn is in $to_graph which is a json encoded PHP array.
Note how the x-axis requires the DateAxisRenderer plugin.
There’s not much else to say, compare the JS on ChartBasket with the above mishmash code to see what the pure JS output looks like and how it relates to the PHP sections.