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 = [],
    seriesStructure = [],
    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,
        //    step: true,

      };

      seriesCounter++;

      if (seriesCounter == names.length) {
        createChart();
      }
    });
  });

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

  }, function () {
    // chart.getSelectedSeries()[0].type ='column';
    //  chart = new Highcharts.Chart(chart.options);
  })


  $("#column").toggle(function () {
    for (var j = 0, i = 0; j < names.length; j++, i++) {
      seriesStructure[j] = seriesOptions[j];
      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++) {
      seriesStructure[j] = seriesOptions[j];
      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++,...