jqueryjqplot

jqPlot not plotting correct graph


I am quite new to jqplot library, I am using following code to plot jqplot graph however it is not plotting

$(document).ready(function () {
         var cdata = [];

        cdata.push([1.1, '01/13/2020 17:16']);

        cdata.push([2.9, '01/12/2020 17:16']);

        cdata.push([1.2, '01/11/2020 17:16']);

        cdata.push([3.6, '01/10/2020 17:16']);

        cdata.push([6.7, '01/09/2020 17:16']);

        cdata.push([8.8, '01/08/2020 17:16']);

        cdata.push([5.5, '01/07/2020 17:16']);

        cdata.push([7.4, '01/06/2020 17:16']);

        cdata.push([4.3, '01/05/2020 17:16']);

var plot2 = $.jqplot('chart2', cdata, {
        // Give the plot a title.
        title: 'Graph Monitor',
    // You can specify options for all axes on the plot at once with
    // the axesDefaults object.  Here, we're using a canvas renderer
    // to draw the axis label which allows rotated text.
    axesDefaults: {
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    },
    // Likewise, seriesDefaults specifies default options for all
    // series in a plot.  Options specified in seriesDefaults or
    // axesDefaults can be overridden by individual series or
    // axes options.
    // Here we turn on smoothing for the line.
    seriesDefaults: {
            rendererOptions: {
                smooth: true
                }
            },
    // An axes object holds options for all axes.
    // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
    // Up to 9 y axes are supported.
    axes: {
            // options for each axis are specified in seperate option objects.
            xaxis: {
                label: "Date",
            // Turn off "padding".  This will allow data point to lie on the
            // edges of the grid.  Default padding is 1.2 and will keep all
            // points inside the bounds of the grid.
            pad: 0
                },
        yaxis: {
                label: "Level"
        }
            }
        });

});

fiddle: https://jsfiddle.net/a5fmbyv2/


Solution

  • You have got several small issues to fix:

    1. Your xaxes should be Date, but you placed water values instead. Also the date should be standard format YYYY-MM-DD (not required, but better) and therefor instead of [1.1, '01/13/2020 17:16] it should state ['2020-01-13 17:16', 1.1].

    2. You have to use renderer: $.jqplot.DateAxisRenderer for dates (link below).

    3. Your data series should be enclosed by array, which means instead of $.jqplot('chart2', cdata, options) you should put $.jqplot('chart2', [cdata], options).

    All together:

    var cdata = [];
    cdata.push(['2020-01-13 17:16', 1.1]);
    cdata.push(['2020-01-12 17:16', 2.9]);
    cdata.push(['2020-01-11 17:16', 1.2]);
    cdata.push(['2020-01-10 17:16', 3.6]);
    cdata.push(['2020-01-09 17:16', 6.7]);
    cdata.push(['2020-01-08 17:16', 8.8]);
    cdata.push(['2020-01-07 17:16', 5.5]);
    cdata.push(['2020-01-06 17:16', 7.4]);
    cdata.push(['2020-01-05 17:16', 4.3]);
    
    var plot2 = $.jqplot('chart2', [cdata], {
      // Give the plot a title.
      title: 'Graph Monitor',
      // You can specify options for all axes on the plot at once with
      // the axesDefaults object.  Here, we're using a canvas renderer
      // to draw the axis label which allows rotated text.
      axesDefaults: {
        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
      },
      // Likewise, seriesDefaults specifies default options for all
      // series in a plot.  Options specified in seriesDefaults or
      // axesDefaults can be overridden by individual series or
      // axes options.
      // Here we turn on smoothing for the line.
      seriesDefaults: {
        rendererOptions: {
          smooth: true
        }
      },
      // An axes object holds options for all axes.
      // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ...
      // Up to 9 y axes are supported.
      axes: {
        // options for each axis are specified in seperate option objects.
        xaxis: {
        	renderer: $.jqplot.DateAxisRenderer, 
          tickOptions:{formatString:'%b %#d'}, 
          label: "Date",
          // Turn off "padding".  This will allow data point to lie on the
          // edges of the grid.  Default padding is 1.2 and will keep all
          // points inside the bounds of the grid.
          pad: 0
        },
        yaxis: {
          label: "Water Level"
        }
      }
    });
    body {
      background: white;
      padding: 20px;
      font-family: Helvetica;
    }
    
    #banner-message {
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      font-size: 25px;
      text-align: center;
      transition: all 0.2s;
      margin: 0 auto;
      width: 300px;
    }
    
    button {
      background: #0084ff;
      border: none;
      border-radius: 5px;
      padding: 8px 14px;
      font-size: 15px;
      color: #fff;
    }
    
    #banner-message.alt {
      background: #0084ff;
      color: #fff;
      margin-top: 40px;
      width: 200px;
    }
    
    #banner-message.alt button {
      background: #fff;
      color: #000;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <div class="wrapper col-12" id="chart2"></div>

    You can find jqplot date examples here and all the jqplot CDN libraries here.

    For date render formats please check this link.

    Everything also on JSFiddle.