JSFiddle - React, Tailwind, and code Playground

by Jane Wilkie

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

CSS

#chart {
  height: 400px;
  width: 100%;
}

#btn-holder {
  position: relative;
  height: 1px;
  width: 100%;
}

#compare-btn {
  font-size: 12px;
  position: absolute;
  right: 0;
  top: -34px;
}

JavaScript

$(function() {
  var data = [{
    "day": "06/19/2016",
    "region": "Ohio",
    "daily_er": "98.61"
  }, {
    "day": "06/19/2016",
    "region": "Western NE",
    "daily_er": "98.63"
  }, {
    "day": "07/19/2016",
    "region": "Ohio",
    "daily_er": "68.61"
  }, {
    "day": "07/19/2016",
    "region": "Western NE",
    "daily_er": "32.63"
  }, {
    "day": "08/19/2016",
    "region": "Ohio",
    "daily_er": "98.61"
  }, {
    "day": "08/19/2016",
    "region": "Western NE",
    "daily_er": "48.63"
  }]

  var exist, index, options = {
    xAxis: {
      categories: []
    },
    series: []
  }
  Highcharts.each(data, function(p, i) {
    exist = false;
    if (options.xAxis.categories.indexOf(p.day) < 0) {
      options.xAxis.categories.push(p.day)
    }
    Highcharts.each(options.series, function(s, j) {
      if (s.name === p.region) {
        exist = true;
        index = j;
      }
    });
    if (exist) {
      options.series[index].data.push(parseFloat(p.daily_er))
    } else {
      options.series.push({
        name: p.region,
        data: [parseFloat(p.daily_er)]
      })
    }
  })
  $('#container').highcharts(options);
});