Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container"></div>

CSS

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

JavaScript

var chartT = Highcharts.chart({
  chart: {
    renderTo: 'container'
  },
  title: {
    text: 'BME280 Temperature'
  },
  series: [{
    showInLegend: false,
    data: []
  }],
  plotOptions: {
    line: {
      animation: false,
      dataLabels: {
        enabled: true
      }
    },
    series: {
      color: '#059e8a'
    }
  },
  yAxis: {
    title: {
      text: 'Temperature (Celsius)'
    }
    //title: { text: 'Temperature (Fahrenheit)' }
  },
  credits: {
    enabled: false
  }
});

const mockedData = [{
    "point": 184,
    "temp": 20.5,
    "humidity": 49.5,
    "weight1": 0,
    "weight2": 0
  },
  {
    "point": 185,
    "temp": 20.6,
    "humidity": 49.7,
    "weight1": 0,
    "weight2": 0
  },
  {
    "point": 186,
    "temp": 20.6,
    "humidity": 49.6,
    "weight1": 0,
    "weight2": 0
  }
]
// only for test purposes
function getMockedData() {
  const processedData = mockedData.map(
    dataEl => [dataEl.point, dataEl.temp]
  );
  chartT.series[0].setData(processedData);
}

function getData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      const data = JSON.parse(this.responseText);
      const processedData = data.map(dataEl => [dataEl.point, dataEl.temp]);
      chartT.series[0].setData(processedData);
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}
getMockedData();
//getData();