JSFiddle - React, Tailwind, and code Playground

by navindian

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<input id="btnenabledisable" type="button" value="line" align="right"></input>
<input id="column" type="button" value="column"></input>
<input id="spline" type="button" value="spline"></input>
<input id="step" type="button" value="step"></input>
<div id="container" style="height: 500px; min-width: 600px"></div>
<div id="report"></div>

JavaScript

$(function() {
	var $report = $('#report');
	var xAxisMin, xAxisMax;
	var yAxisMin, yAxisMax;
	var seriesOptions = [], yAxisOptions = [], seriesCounter = 0, names = ['MSFT', 'AAPL', 'GOOG'], colors = Highcharts.getOptions().colors;

	$.each(names, function(i, name) {
		$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {
			seriesOptions[i] = {
				name : name,
				data : data,
			};
			seriesCounter++;
			if (seriesCounter == names.length) {
				createChart();
			}
		});
	});

	$("#btnenabledisable").toggle(function() {
		for (var j = 0, i = 0; j < names.length; j++, i++) {
			if (chart.getSelectedSeries()[0].name == seriesOptions[j].name) {
				seriesOptions[j].type = "line";
			}
		}
		createChart();

	}, function() {
	})

	$("#column").toggle(function() {
		for (var j = 0, i = 0; j < names.length; j++, i++) {
			if (chart.getSelectedSeries()[0].name == seriesOptions[j].name) {
				seriesOptions[j].type = "column";
			}
		}
		createChart();

	}, function() {
	})
	$("#spline").toggle(function() {
		for (var j = 0, i = 0; j < names.length; j++, i++) {
			if (chart.getSelectedSeries()[0].name == seriesOptions[j].name) {
				seriesOptions[j].type = "spline";
			}
		}
		createChart();

	}, function() {
	})
	$("#step").toggle(function() {
		for (var j = 0, i = 0; j < names.length; j++, i++) {
			if (chart.getSelectedSeries()[0].name == seriesOptions[j].name) {
				seriesOptions[j].step = true;
			}
		}
		createChart();

	}, function() {
		for (var j = 0, i = 0; j < names.length; j++, i++) {
			if (chart.getSelectedSeries()[0].name == seriesOptions[j].name) {
				seriesOptions[j].step = false;
			}
		}
		createChart();

	})
	function createChart() {

		chart = new Highcharts.StockChart({
			chart : {
				renderTo : 'container',
				events : {
					selection : function(event) {
						if (event.xAxis) {

							xAxisMin = event.xAxis[0].min;
							xAxisMax =...