JSFiddle - React, Tailwind, and code Playground

by mark47

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="rmschart"></div>
<select>
    <option value="0">series0</option>
    <option value="1">series1</option>
</select>

JavaScript

var chart;
var series = [];
var defaultOptions = {
   chart: {
      renderTo: 'rmschart',
      defaultSeriesType: 'spline',
   },
   title: {
      text: '1RM Trend',
   },
   xAxis: {
      type: 'datetime',
   },
   yAxis: {
      title: {
         text: 'Weight',
      }
   },
   legend: {
      enabled: false,
   },
   credits: {
      enabled: false,
   },
   tooltip: {
      formatter: function() {
         return '<b>'+ this.series.name +'</b><br/>' + this.y;
      }
   },
   series: [],
};

series[0] = [1,4,6,7,3,2];
series[1] = [32,76,32,43,65,23,12,76,87,35];
  
function drawChart(val)
{
  //if(chart) 
  //    chart.destroy()
  var options = defaultOptions;
    options.series[0] = {data: series[val]};
  console.log(options.series);
    
  chart = new Highcharts.Chart(options);
}

$(document).ready(function() {
   $("select").change(function() {
      drawChart(this.value);
   });
    
drawChart(0);
    
});