JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.threshold.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.time.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div id="winrate-graph" style="width: 100%; height: 160px;"></div>
JavaScript
var data = [[1382911200000,7.6805],[1382306400000,27.4607],[1381701600000,13.0376],[1381096800000,-26.3855],[1380492000000,-11.9624],[1379887200000,-5.018],[1379282400000,-11.0009],[1378677600000,50.5376],[1378072800000,0],[1377468000000,0]];
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push(data[i][0]);
}
data = [
{ label: 'Win Rate', data: data }
];
$.plot('#winrate-graph', data, {
grid: { hoverable: true },
series: {
color: '#5CB95C',
lines: {
show: true,
fill: true
},
points: {
show: true
},
threshold: {
below: 0,
color: '#D65652'
}
},
xaxis: {
mode: 'time',
ticks: ticks,
tickFormatter: function(val, axis) {
return moment(val).format('W');
}
}
});