JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<div id="placeholder"></div>
CSS
#placeholder {
height: 300px;
}
JavaScript
$(function () {
//RED
var data1 = [
[1430369878000, 1690.25],
[1430369879000, 1696.3],
[1430369880000, 1659.65]
];
//BLUE
var data2 = [
[1430369878000, 1682.1],
[1430369879000, 1680.65],
[1430369880000, 1685.1]
];
var dataset = [{
label: "Sell out",
data: data1,
color: "#FF0000",
points: {
fillColor: "#FF0000",
show: true
},
lines: {
show: true
}
}, {
label: "Buy in",
data: data2,
color: "#0062E3",
points: {
fillColor: "#0062E3",
show: true
},
lines: {
show: true
}
}];
var options = {
series: {
shadowSize: 5
},
xaxis: {
mode: "time",
//min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
//max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
timeformat: "%H/%M/%S"
},
yaxis: {
color: "black",
tickDecimals: 2,
axisLabel: "Gold Price in USD/oz",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
noColumns: 0,
labelFormatter: function (label, series) {
return "<font color=\"white\">" + label + "</font>";
},
backgroundColor: "#000",
backgroundOpacity: 0.9,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 3,
mouseActiveRadius: 50,
backgroundColor: {
colors: ["#ffffff", "#EDF5FF"]
},
axisMargin: 20
}
};
var previousPoint = null,
previousLabel =...