jqPlot step chart not plotting in series order

Question

I need to build a step chart using jQPlot. My X-Axis is Date/Time and my Y-Axis is a number.

Doing this prototype everything runs fine:

<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>

<link href="@Url.Content("~/Scripts/jqplot/jquery.jqplot.min.css")" rel="stylesheet" media="screen">


<!-- Plot -->
<div id="chart1"></div>

<br />
<br />

<script type="text/javascript">
    $(document).ready(function () {
        var line1 = [['2014-01-15 15:10:01', 21],
                     ['2014-01-15 15:10:12', 21],
                     ['2014-01-15 15:10:12', 22],
                     ['2014-01-15 15:10:14', 22],
                     ['2014-01-15 15:10:14', 21],
                     ['2014-01-15 15:10:17', 21],
                     ['2014-01-15 15:10:17', 22],
                     ['2014-01-15 15:10:23', 22],
                     ['2014-01-15 15:10:23', 18],
                     ['2014-01-15 15:10:28', 18]];

        var plot1 = $.jqplot('chart1', [line1], {
            title: 'Default Date Axis',
            axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } },
            series: [{ lineWidth: 1, markerOptions: { style: 'square' } }]
        });
    });

</script>

Check the image below. A real step plot:

But If a add a new value to the series, the plot gets lost.

Code:

<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>

<link href="@Url.Content("~/Scripts/jqplot/jquery.jqplot.min.css")" rel="stylesheet" media="screen">


<!-- Plot -->
<div id="chart1"></div>

<br />
<br />

<script type="text/javascript">
    $(document).ready(function () {
        var line1 = [['2014-01-15 15:10:01', 21],
                     ['2014-01-15 15:10:12', 21],
                     ['2014-01-15 15:10:12', 22],
                     ['2014-01-15 15:10:14', 22],
                     ['2014-01-15 15:10:14', 21],
                     ['2014-01-15 15:10:17', 21],
                     ['2014-01-15 15:10:17', 22],
                     ['2014-01-15 15:10:23', 22],
                     ['2014-01-15 15:10:23', 18],
                     ['2014-01-15 15:10:28', 18],
                     ['2014-01-15 15:10:28', 21]];

        var plot1 = $.jqplot('chart1', [line1], {
            title: 'Default Date Axis',
            axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } },
            series: [{ lineWidth: 1, markerOptions: { style: 'square' } }]
        });
    });

</script>

Image:

Can someone help me to find out what´s going wrong ? I need to keep the step plot (one point connecting to next point in list and so forth).

Thanks for any help.

Answer 1

Use CategoryAxisRenderer, it will solve your problem and then you dont have to supply min and max.

You can keep on adding as much data you want it will always plot it correctly.

Jsfiddle link

var line1 = [['2014-01-15 15:10:01', 21],
             ['2014-01-15 15:10:12', 21],
             ['2014-01-15 15:10:12', 22],
             ['2014-01-15 15:10:14', 22],
             ['2014-01-15 15:10:14', 21],
             ['2014-01-15 15:10:17', 21],
             ['2014-01-15 15:10:17', 22],
             ['2014-01-15 15:10:23', 22],
             ['2014-01-15 15:10:23', 18],
             ['2014-01-15 15:10:28', 18],
             ['2014-01-15 15:10:28', 21]];

        var plot1 = $.jqplot('chart1', [line1], {
            title: 'Default Date Axis',
            axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer } },
            series: [{ lineWidth: 1, markerOptions: { style: 'square' } }]
        });

Answer 2

You need to set the sort attribute to false, look:

http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.sortData

With this you can make your own sequence.

I am working in a irrigation project, and need circulate irrigate area dynamically, sorry but I don't have reputation to post a picture of it.