JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 600px"></div>
<button id="changingButton">Change It</button>

JavaScript

var changeIt = false;

$(function() {

$('#changingButton').click(function(){
    changeIt=!changeIt;
});

	// See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
	$.getJSON('http://www.highcharts.com/samples/data/from-sql.php?callback=?', function(data) {
		
		// Add a null value for the end date 
		data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
				
		// create the chart
		$('#container').highcharts('StockChart', {
			chart : {
				type: 'candlestick',
				zoomType: 'x'
			},

			navigator : {
				adaptToUpdatedData: false,
				series : {
					data : data
				}
			},

			scrollbar: {
				liveRedraw: false
			},
			
			title: {
				text: 'AAPL history by the minute from 1998 to 2011'
			},
			
			subtitle: {
				text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
			},
			
			rangeSelector : {
				buttons: [{
					type: 'hour',
					count: 1,
					text: '1h'
				}, {
					type: 'day',
					count: 1,
					text: '1d'
				}, {
					type: 'month',
					count: 1,
					text: '1m'
				}, {
					type: 'year',
					count: 1,
					text: '1y'
				}, {
					type: 'all',
					text: 'All'
				}],
				inputEnabled: false, // it supports only days
				selected : 4 // all
			},
			
			xAxis : {
				events : {
					afterSetExtremes : afterSetExtremes
				},
				minRange: 3600 * 1000 // one hour
			},

			series : [{
				data : data,
				dataGrouping: {
					enabled: false
				}
			}]
		});
	});
});


/**
 * Load new data depending on the selected min and max
 */
function afterSetExtremes(e) {

	var url,
		currentExtremes = this.getExtremes(),
		range = e.max - e.min;
	var chart = $('#container').highcharts();
	chart.showLoading('Loading data from server...');
    
    if(changeIt){
        console.log(new Date(e.max));
        e.max += 22340000;
        console.log(new Date(e.max));
   ...