JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css">
<script src="https://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<h2>ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>
JavaScript
$(document).ready(function() {
// The url for our json data
var url = 'mc_measurementne_new1.json';
data = [{
"id": 1,
"essid": "\"WiredSSID\"",
"mac": "08:00:27:b1:3e:4d",
"ip": "10.0.3.15",
"ss": -55,
"lon": -18.5333,
"lat": 65.9667,
"alt": 15.044444,
"acc": 1,
"res": 18058,
"pub_date": "2015-12-01 22:39:07.700953"
}, {
"id": 2,
"essid": "\"WiredSSID\"",
"mac": "08:00:27:b1:3e:4d",
"ip": "10.0.3.15",
"ss": -55,
"lon": -18.5333,
"lat": 65.9667,
"alt": 15.044444,
"acc": 1,
"res": 16337,
"pub_date": "2015-12-01 23:13:52.639206"
}];
populateGraph(data);
/*
$.ajax({
url: url,
dataType: "json",
success: function (data) {
populateGraph(data);
}
});
*/
function populateGraph(ret) {
var ID = [];
var Delay = [];
for (i = 0; i < ret.length; i++) {
// Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
ID.push([ret[i].pub_date, ret[i].id]);
Delay.push([ret[i].pub_date, ret[i].res]);
}
var plot1 = $.jqplot('chart1', [ID, Delay], {
title: "Delay",
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%d/%m/%Y'
},
label: 'Date'
},
yaxis: {
label: 'ID'
},
y2axis: {
label: 'Delay'
}
},
series: [{
yaxis: 'yaxis',
label: 'ID'
}, {
yaxis: 'y2axis',
label: 'Delay'
}],
highlighter: {
show: true,
sizeAdjust: 1
},
cursor: {
show: false
}
});
};
});