Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

const generateData = (amount) => {
  const data = [];
  for (let i = 0; i < amount; i++) {
    data.push(Math.random() * 100);
  }
  return data;
};

const generateSeries = (amount, pointsAmount) => {
  const series = [];
  for (let i = 0; i < amount; i++) {
    series.push({
			data: generateData(pointsAmount)
		});
  }
  return series;
};

const series1 = generateSeries(9, 1000);
const series2 = generateSeries(1, 1000);
const series3 = generateSeries(1, 1000);

let chart1 = Highcharts.chart('container1', {
  series: series1,
  legend: {
    enabled: false
  }
});

setTimeout(function() {
  console.time("recreating time");
  chart1 = Highcharts.chart('container1', {
    series: series2,
    legend: {
      enabled: true
    },
    subtitle: {
      text: 'subtitle'
    }
  });
  console.timeEnd("recreating time");
}, 1000);

setTimeout(function() {
  console.time("updating time");
  chart1.update({
    series: series3,
    legend: {
      enabled: true
    },
    subtitle: {
      text: 'subtitle'
    }
  });
  console.timeEnd("updating time");
}, 2000);