jqPlot step chart not plotting in series order

StackOverflow https://stackoverflow.com/questions/21145989

  •  28-09-2022
  •  | 
  •  

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:

enter image description here

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:

enter image description here

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.

Was it helpful?

Solution 2

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' } }]
        });

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top