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/
You have got several small issues to fix:
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]
.
You have to use renderer: $.jqplot.DateAxisRenderer
for dates (link below).
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.