Search code examples
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.