jqplot: How to use a JSON Data Renderer to Add 2 different lines to a graph

Question

I am trying to write a renderer function as a test for JSON. The example code for jqplot works fine for a single line, but I want to be able to replace my existing data (4 different plots, 2 lines, 2 bar charts) with JSON loading.

An example of the test render functions are below (simplified to return COS/SIN data to test charting).

var SampleLine = function()
{
    var data=[[]];
    for(var i=0; i<13; i+=0.5)
    {
        data[0].push([i, Math.sin(i)]);
    }
    return data;
};

var SecondLine = function()
{
    var data=[[]];
    for(var i=0; i<13; i+=0.5)
    {
        data[0].push([i, Math.cos(i)]);
    }
    return data;
};

var plot3 = $.jqplot('chartdiv', [],
        {
            title:'JSON Test',
            dataRenderer: SecondLine,

            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    label:'Date',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    labelOptions: {
                        fontFamily: 'Georgia, Serif',
                        fontSize: '12pt'
                    },
                },
                yaxis:{
                    label:'Units',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    labelOptions: {
                        fontFamily: 'Georgia, Serif',
                        fontSize: '12pt'
                    },
                }
            },
            series:[
                {
                    showMarker:true,
                    markerOptions: { style:'circle' },
                },
                {
                    renderer:$.jqplot.BarRenderer,
                },
                {
                    renderer:$.jqplot.BarRenderer,
                },
                {
                    showMarker:true,
                    markerOptions: { style:'square' },
                },
            ],
        }
);

My question is how to add the second dataRenderer as I need data from different sources to combine the lines and bars on a graph. Hard setting the arrays works, but I am trying to do this with AJAX/JSON to get data from my DB, and other sources.

Answer 1

I don't believe there is a way to add multiple dataRenderer(s) but why not just use one dataRenderer to retrieve each series and then pass it back to jqPlot -

If you weren't using a dataRenderer you'd pass the 4 data series in like this -

    $.jqplot('chartdiv',  [dataSeries1, dataSeries2, dataSeries3, dataSeries4], {

So use your dataRenderer function to retrieve each data series, set each to an array and then pass the whole set back as an array -

    var retrieveData = function()
    {
      var dataSeries1=[];
      var dataSeries2=[];
      var dataSeries3=[];
      var dataSeries4=[];
      var returnData=[];

      //Populate each data array with values
      for(var i=0; i<13; i+=0.5)
      {
         dataSeries1[0].push([i, Math.cos(i)]);
      }

      //Populate dataSeries2, dataSeries3, dataSeries4
      ......
      //Add all to returnData array then return it

      return returnData;
    };

Hope this is helpful.

Answer 2

I don't know what is dataRenderer, and JQPlot doc also.

You can add or remove series by playing with plot1.series array.

Here is a good jsfiddle : jsfiddle.net/fracu/HrZcj

The idea is to create an array with data

for(var i=0 ; i<50 ; i++)
{
    myNewSerie = Array();
    x = (new Date()).getTime();
    y = Math.floor(Math.random() * 100);
    myNewSerie.push([x, y]);
}

Then add it to the graph using the next available slot

plot1.series[plot1.series.length] = myNewSerie

And finally redraw using plot1.replot();

Check the updateSeries function out in the end of the fiddle