Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="result"></div>
<table id="table-sparkline">
  <thead>
    <tr>
      <th>State</th>
      <th>Income per quarter</th>
    </tr>
  </thead>
  <tbody id="tbody-sparkline">

  </tbody>
</table>

CSS

#result {
  text-align: right;
  color: gray;
  min-height: 2em;
}

#table-sparkline {
  margin: 0 auto;
  border-collapse: collapse;
}

th {
  font-weight: bold;
  text-align: left;
}

td,
th {
  padding: 5px;
  border-bottom: 1px solid silver;
  height: 20px;
}

thead th {
  border-top: 2px solid gray;
  border-bottom: 2px solid gray;
}

.highcharts-tooltip>span {
  background: white;
  border: 1px solid silver;
  border-radius: 3px;
  box-shadow: 1px 1px 2px #888;
  padding: 8px;
}

JavaScript

/**
 * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
 * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
 */
 var dataStr = `[{"data":[{"name":"Black Hawk","value":0,"x":0,"y":0},{"name":"Hamilton","value":0,"x":1,"y":0},{"name":"Adair","value":1689.06,"x":2,"y":1689.06}],"name":"ADAIR"},{"data":[{"name":"Black Hawk","value":75914.54999999999,"x":0,"y":75914.54999999999},{"name":"Hamilton","value":0,"x":1,"y":0},{"name":"Adair","value":0,"x":2,"y":0}],"name":"CEDAR FALLS"},{"data":[{"name":"Black Hawk","value":0,"x":0,"y":0},{"name":"Hamilton","value":540.6899999999999,"x":1,"y":540.6899999999999},{"name":"Adair","value":0,"x":2,"y":0}],"name":"ELLSWORTH"},{"data":[{"name":"Black Hawk","value":9421.17,"x":0,"y":9421.17},{"name":"Hamilton","value":0,"x":1,"y":0},{"name":"Adair","value":0,"x":2,"y":0}],"name":"EVANSDALE"},{"data":[{"name":"Black Hawk","value":0,"x":0,"y":0},{"name":"Hamilton","value":0,"x":1,"y":0},{"name":"Adair","value":1137.48,"x":2,"y":1137.48}],"name":"FONTANELLE"},{"data":[{"name":"Black Hawk","value":0,"x":0,"y":0},{"name":"Hamilton","value":0,"x":1,"y":0},{"name":"Adair","value":1236.3899999999999,"x":2,"y":1236.3899999999999}],"name":"GREENFIELD"},{"data":[{"name":"Black Hawk","value":235.89999999999998,"x":0,"y":235.89999999999998},{"name":"Hamilton","value":0,"x":1,"y":0},{"name":"Adair","value":0,"x":2,"y":0}],"name":"HUDSON"},{"data":[{"name":"Black Hawk","value":0,"x":0,"y":0},{"name":"Hamilton","value":337.22,"x":1,"y":337.22},{"name":"Adair","value":0,"x":2,"y":0}],"name":"JEWELL"},{"data":[{"name":"Black Hawk","value":1538.5299999999997,"x":0,"y":1538.5299999999997},{"name":"Hamilton","value":0,"x":1,"y":0},{"name":"Adair","value":0,"x":2,"y":0}],"name":"LA PORTE CITY"},{"data":[{"name":"Black...