Home/ Questions/Q 9209559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T00:52:19+00:00

I am using jqplot and dateAxisRenderer to display a line chart with date labels

  • 0

I am using jqplot and dateAxisRenderer to display a line chart with date labels on the x-axis. However, I need to update that plot regularly with new data. When calling replot, the plot does not change as the below example demonstrates. Any suggestions?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <script type="text/javascript" src="../jquery/ui/1.9.2/custom/js/jquery-1.8.3.js"></script>

        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/jquery.jqplot.js"></script> 
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.dateAxisRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.canvasTextRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.canvasAxisTickRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.AxisLabelRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.categoryAxisRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.barRenderer.js"></script>
        <script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.enhancedLegendRenderer.js"></script>

        <link rel="stylesheet" type="text/css" href="../jquery/plugins/jqplot/dist/jquery.jqplot.css" />
    </head>

    <body>
        <div id="chartdiv" style="height:400px;width:800px;"></div>

        <script type="text/javascript">
            $(document).ready(function(){
                var line1 = [
                    [new $.jsDate("2013-01-28 1:10PM"), 1.0],
                    [new $.jsDate("2013-01-28 1:11PM"), 2.0],
                    [new $.jsDate("2013-01-28 1:12PM"), 4.0],
                    [new $.jsDate("2013-01-28 1:13PM"), 8.0],
                    [new $.jsDate("2013-01-28 1:14PM"), 16.0],
                    [new $.jsDate("2013-01-28 1:15PM"), 32.0]
                ];
                var plot2 = $.jqplot('chartdiv', [line1] ,{
                    series:[{lineWidth:4, showMarker:false, renderer:$.jqplot.LineRenderer}],
                    axesDefaults: {
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer
                    },
                    axes:{
                        xaxis:{
                            renderer:$.jqplot.CategoryAxisRenderer,
                                tickOptions:{
                                    formatString:'%F %X',
                                    angle: -30
                                }
                        },
                    }
                });

                alert("wait");
                line1 = [
                    [new $.jsDate("2013-01-28 1:10PM"), 32.0],
                    [new $.jsDate("2013-01-28 1:11PM"), 16.0],
                    [new $.jsDate("2013-01-28 1:12PM"), 8.0],
                    [new $.jsDate("2013-01-28 1:13PM"), 4.0],
                    [new $.jsDate("2013-01-28 1:14PM"), 2.0],
                    [new $.jsDate("2013-01-28 1:15PM"), 1.0]
                ];
                plot2.data = [line1];
                plot2.replot({resetAxes:true});
            });
        </script>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have done some work with jqplot recently and find the inconsistencies in the data handling a bit frustrating.

    Given your example of plot2: For a bar chart you have to look at plot2.series[i].data not plot2.data and then replot() it (ref: http://www.jqplot.com/deploy/dist/examples/selectorSyntax.html)

    e.g. for your code

                ...
            plot2.series[0].data = [line1];
            plot2.replot({resetAxes:true});
            ...

    I’ve tried to abstract the nuances for the different chart types but until then I have been abstracting it by storing the data on a parent object, destroying the plot and then redoing the plot using $.jqplot(e, data,options)

    • 0