JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>
<h1 align="center">IDS Sensor Activity</h1>
<div id="container" style="width: 1000px; height: 600px; margin: auto;"></div>
<div class="log"></div>
JavaScript
var chart;
var options;
function setOptions() {
options = {
chart: {
renderTo: 'container',
//type: 'spline',
zoomType: 'x'
},
title: {
text: ''
},
legend: {
backgroundColor: '#FFFFFF',
foregroundcolor: '#000000',
enabled: true,
floating: true,
y: -500,
x: 0
},
xAxis: {
type: 'datetime'
//maxZoom: 1 * 3600000 // one hour
},
yAxis: {
title: {
text: 'Events'
},
min: 0
},
tooltip: {
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
rangeSelector: {
selected: 0,
buttons: [{
type: 'day',
count: 1,
text: 'day'},
{
type: 'week',
count: 1,
text: 'week'},
{
type: 'month',
count: 1,
text: '1m'},
{
type: 'month',
count: 3,
text: '3m'}]
},
series: []
};
}
$(document).ready(function() {
$.ajaxSetup({
error: function(x, e) {
if (x.status == 0) {
alert('Request Time out.');
} else if (x.status == 404) {
alert('Requested URL not found.');
} else if (x.status == 500) {
alert('Internel Server Error.');
} else if (e == 'parsererror') {
alert('Parsing JSON Request failed.');
} else if (e == 'timeout') {
alert('Request Time out.');
} else {
alert('Unknown Error.\n' + x.responseText);
}
},
timeout: 8000
...