JSFiddle - React, Tailwind, and code Playground
by tankchintan
HTML
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
JavaScript
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=large-dataset.json&callback=?', function(data) {
// Create a timer
var start = + new Date();
// Create the chart
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built chart at '+ (new Date() - start) +'ms'
alert("data loaded");
});
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
xAxis: {
maxZoom: 3 * 24 * 3600000 // three days
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2004-2010'
},
subtitle: {
text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
...