jQuery addClass example

Change class name on click in jQuery

by grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.0.3/highcharts.js"></script>
<div id="mychart">
  
  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
const chartData = [
  { timestamp: 1515059819853, value: 1, somethingElse: 'foo'},
  { timestamp: 1515059838069, value: 2, somethingElse: 'bar'},
  { timestamp: 1515059838080, value: 3, somethingElse: 'baz'},
  // you get the idea
]
var json = [
{"firstname":"Grant","year":"2016","rooster":"7","miss":"4","quail":"0"},
{"firstname":"Grant","year":"2017","rooster":"15","miss":"10","quail":"3"},
{"firstname":"Grant","year":"2018","rooster":"2","miss":"5","quail":"1"},
{"firstname":"Grant","year":"2019","rooster":"2","miss":"1","quail":"1"},
{"firstname":"Jim","year":"2016","rooster":"5","miss":"2","quail":"0"},
{"firstname":"Jim","year":"2017","rooster":"12","miss":"2","quail":"1"},
{"firstname":"Jim","year":"2018","rooster":"2","miss":"1","quail":"0"}
]
//Highcharts.chart('mychart', {
const Chart = Highcharts.chart(mychart, {
  // ...options
 
  tooltip: {
    formatter () {
      // this.point.x is the timestamp in my original chartData array
      const pointData = json.find(row => row.year === this.point.x)
      //console.log(pointData.rooster)
    }
  },
  series: [{
      name: 'Numbers -- time',
      // restructure the data as an array as Highcharts expects it
      // array index 0 is the x value, index 1 is the y value in the chart
      data: json.map(row => [row.year, parseFloat(row.rooster)])
    }]

})