jqplot replot using dateaxisrenderer goes blank

Question

I am trying to use JQPlot for plotting a live time based data .

As it is live data, I am doing an ajax call every 10 seconds to get new data and appending it to the existing dataset before replotting.

The initial plotting of the JQPlot chart is fine but subsequently from the first replot onwards the chart becomes blank for ever.

Here is my javascript code.

$.jqplot.config.enablePlugins = false;

     var Graph;
     var GraphUpdate;
     var GraphData = [];
     var interval = 10000;
     var npoints = 25;
     var maxIterations = 200;
     var niters = 0;


     var fetchInProgress = false;
     var lastSuccessCDR = 0;

     function BuildDataArray() {

        GraphData = [];
        lastSuccessCDR = 0;


        if(fetchInProgress == false)
        {
            postdata = 'successCDR='+lastSuccessCDR;
            fetchInProgress = true;
            $.ajax({url:'/CDR-Analyser/php/livedata_fetch.php',
                type:'POST',
                data:postdata,
                async:true,
                dataType:"json",
                success: function(data,status){

                        if(lastSuccessCDR == 0)
                        {
                            //GraphData = [data[0]['data']];
                            GraphData = [[["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]]];
                            //GraphData = [[[1,2],[2,5],[3,7]]];
                            lastSuccessCDR = data[1]['lastCDR'];


                            Graph = $.jqplot('livechart', GraphData, {

                                stackseries : true,
                                seriesDefaults: {
                                    showMarker: false,
                                    fill: true,
                                    fillAndStroke: true
                                },
                                axes: {

                                        xaxis: {
                                          //numberTicks:2,
                                          //renderer:$.jqplot.DateAxisRenderer,
                                          //pad:0,
                                          renderer:$.jqplot.DateAxisRenderer,
                                          tickOptions: {
                                                angle: -30
                                            }

                                        },
                                        yaxis: {
                                          label: 'Call Count',
                                          //min:0,
                                          //max:30,
                                          tickInterval:2,
                                          labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                                        }
                                    },
                                cursor:{
                                    zoom:true,
                                    looseZoom: true
                                }
                            });
                        }


                        fetchInProgress = false;
                    }
            });
        }
     }

     function UpdateDataArray() {

        var set = 0;

        if(fetchInProgress == false)
        {
            postdata = 'successCDR='+lastSuccessCDR;
            fetchInProgress = true;
            $.ajax({url:'/CDR-Analyser/php/livedata_fetch.php',
                type:'POST',
                data:postdata,
                async:true,
                dataType:"json",
                success: function(data,status){
                        set = [data[0]['data']];
                        lastSuccessCDR = data[1]['lastCDR'];

                        var newData = new Array();
                        newData = GraphData;

                        newData[0].shift();
                        newData[0].push(set[0][0]); 
                        GraphData = [["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5]]; 
                        //Graph.series[0].data = newData[0];
                        Graph.series[0].data = [["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5]];
                        //Graph.data[0] = [["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]] ;


                        Graph.replot({resetAxes:true});

                        fetchInProgress = false;
                    }
            });
        }



        return set;

     }

     function StartGraphLoop() {
         BuildDataArray();

         GraphUpdate = setInterval(UpdateGraph, interval);
     }


     function UpdateGraph() {
         UpdateDataArray();

     }

     function StopGraphLoop() {

         clearInterval(GraphUpdate);
     }

I have two functions above , BuildDataArray() and updateDataArray() for building the initial data set and for getting the subsequent data elements.

As you can see I have replaced the actual data received from ajax ( it is commented) with sample data to test the behavour of JQPlot. Unfortunately with this sample data also the chart goes blank at the call of first replot. I had earlier tested this with sample data without the dates ( something like [[1,2] , [2,5] , [3,4]] ) by commenting out the dateaxisrenderer option in xaxis property.

So now I am left with no option so either I am missing something or it is a bug in JQPlot while rendering dateaxis.

Please advise

Answer 1

I had the same problem using the dateAxisRenderer where the series were being updated and the plot redrawn but there was no data in my graph. After a lot of head scratching I found this stackoverflow answer

Instead of updating the series data via

chartObj.series[i].data = // your data

You can create a variable and pass it as an argument to the replot() function. To use the snippet from C5H8NNaO4 as an example

var series = [[1,2],[2,3]];
chartObj.replot({data:series});

I haven't tested it with your code but it looks like we had the same problem and this solved the issue for me. If this works I suggest you up-vote the initial answer too :)