JQPlot: Plot series and labels from an external source

I am working with JQPlot to generate a chart pulling data from a database, like in the example here http://www.jqplot.com/tests/data-renderers.php.

The chart is working fine, but at the moment the series labels are hard coded. How can I make this chart to display the series labels from the database too, just like the series? I assume I need to make a new call, to a second file containing the label names, but I am not really sure how to do that. Any ideas?

Here is the code I am using:

$(document).ready(function(){
var ajaxDataRenderer = function(url, plot) {
    var ret = null;
    $.ajax({
        async: false,
        url: url,
        dataType:'json',
        success: function(data) {
            ret = data;
        }
    });
   return ret;
};
var jsonurl = "./index.php";
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('chart1', jsonurl,{
    dataRenderer: ajaxDataRenderer,
    title: 'Annual Balance Summary',
    legend: {show:true, renderer:$.jqplot.EnhancedLegendRenderer},
    seriesDefaults: {lineWidth:4},
    **series:[{label:'Tilikausi 01/2009 - 12/2009'}, {label:'Tilikausi 01/2010 - 12/2010'}, {label:'Tilikausi 01/2011 - 12/2011'}]**, // THIS ARE THE VALUES I WANT TO BRING FROM THE DATABASE
        showMarker:true,
        pointLabels: { show:true },
    axes: {
        xaxis: {pad:1, numberTicks:12, tickInterval: 1, autoscale:true, tickOptions:{formatString:'%d', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal'}}},
        highlighter: {bringSeriesToFront: true}
        });
});

The outcoming json array of the index.php, look like this:

[[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76],[4,409203.91],[5,392167.56],[6,547296.04],[7,529292.86],[8,523009.35],[9,541452.97],[10,535397.58],[11,555497.48],[12,465849.17]],[[0,465849.17],[1,464569.69],[2,468339.1],[3,471005.39],[4,470786.79],[5,472315.46],[6,492847.16],[7,495973.32],[8,520188.21],[9,550497.27],[10,544294.18],[11,559081.4],[12,479558.69]],[[0,479558.69],[1,467694.94],[2,459592.48],[3,476012.25],[4,463623.8],[5,487588.68],[6,445992.44],[7,457935.72],[8,481076.75],[9,498464.53],[10,508681.42],[11,523928.66],[12,548180.15]]]

The array for the series labels should be something like this:

[["Tilikausi 01\/2009 - 12\/2009"],["Tilikausi 01\/2010 - 12\/2010"],["Tilikausi 01\/2011 - 12\/2011"]] // Array of series labels

Thanks in advance for your answers!

Solution

I think the key to this one is getting the JSON structured correctly that is retrieved by index.php.

Currently you are returning this:

[[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76],[4,409203.91],[5,392167.56],[6,547296.04],[7,529292.86],[8,523009.35],[9,541452.97],[10,535397.58],[11,555497.48],[12,465849.17]],[[0,465849.17],[1,464569.69],[2,468339.1],[3,471005.39],[4,470786.79],[5,472315.46],[6,492847.16],[7,495973.32],[8,520188.21],[9,550497.27],[10,544294.18],[11,559081.4],[12,479558.69]],[[0,479558.69],[1,467694.94],[2,459592.48],[3,476012.25],[4,463623.8],[5,487588.68],[6,445992.44],[7,457935.72],[8,481076.75],[9,498464.53],[10,508681.42],[11,523928.66],[12,548180.15]]]

But what you really need is something like this (some elements of values omitted for brevity):

{
    values: [[[0,413010.71],[1,431586.96],[2,418659.56],[3,418776.76], ... [12,548180.15]]],        
    labels: [["Tilikausi2 01\/2009 - 12\/2009"],["Tilikausi2 01\/2010 - 12\/2010"],["Tilikausi2 01\/2011 - 12\/2011"]]
}

The tricky thing is that labels are assigned to a series when the graph is created. This causes a problem because it really means that the Ajax call must happen prior to creating the graph.

Given the Json as structured above, something like this should do the trick:

$.jqplot.config.enablePlugins = true;
var jsonurl = "./index.php";
//Get the data prior to creating the graph.
var plotData = ajaxDataRenderer(jsonurl);

//plotData.values is now passed in to be the actual data the plot is created from.
plot1 = $.jqplot('chart1', plotData.values, {
    title: 'Annual Balance Summary',
    legend: {show:true, renderer:$.jqplot.EnhancedLegendRenderer},
    seriesDefaults: {lineWidth:4},
    //The series labels can now be supplied.
    series: plotData.labels,
    showMarker:true,
    pointLabels: { show:true },
    axes: {
        xaxis: {pad:1, numberTicks:12, tickInterval: 1, autoscale:true, tickOptions:{formatString:'%d', fontSize:'10pt', fontFamily:'Tahoma', angle:-40, fontWeight:'normal'}}},
        highlighter: {bringSeriesToFront: true}
});

Edit:

The other thing you will need to do is modify the labels array that comes back. We are still using the ajaxDataRenderer function, so just after you have received the data you will need to do this:

for(var i = 0; i < data.labels.length; i++) {
    data.labels[i] = { label: data.labels[i][0] };
}

All this does is create the kind of object literal that jqplot is expecting when you are specifying labels.

Edit 2:

If your JSON looks like:

[[["Tilikausi 01\/2009 - 12\/2009"],["Tilikausi 01\/2010 - 12\/2010"],
  ["Tilikausi 01\/2011 - 12\/2011"]],[[[1,-4308.6],[2,-11725.18],[3,-23253.57],
    ...,[10,-85437.15],[11,-10‌5465.7],[12,-129859.38]]]]

Then it should still work, but you would need to refer to things differently. Instead of plotData.values you would have plotData[1], and instead of plotData.labels you would have plotData[0].

Also, the label rearrangement code would instead look like:

for(var i = 0; i < data[0].length; i++) {
    data[0][i] = { label: data[0][i][0] };
}