Plot GPU-Z data with live chart

[SirAdelaide]

I’m trying to develop a plot that shows data from sensors in my PC (and networked PCs) using the live updating chart as a base:
https://canvasjs.com/docs/charts/how-to/live-updating-javascript-charts-json-api-ajax/

I have a server set up that provides JSON data from a URL (eg I’m using http://localhost:5000 for testing) in the following format.
I’d like to be able to parse out the SensorValue from one Sensor eg “SensorName”: “GPU Temperature” is followed by “SensorValue”: “48.84375”, and then put that sensor value in the chart. The server updates the JSON data every second, which suits the default chart refresh.

How should I modify the example code to parse this JSON and extract the desired data for the chart?

[
  {
    "SensorApp": "GPU-Z",
    "SensorClass": "GPU",
    "SensorName": "GPU Clock",
    "SensorValue": "135",
    "SensorUnit": "MHz",
    "SensorUpdateTime": 71916
  },
  {
    "SensorApp": "GPU-Z",
    "SensorClass": "GPU",
    "SensorName": "Memory Clock",
    "SensorValue": "162",
    "SensorUnit": "MHz",
    "SensorUpdateTime": 71916
  },
  {
    "SensorApp": "GPU-Z",
    "SensorClass": "GPU",
    "SensorName": "GPU Temperature",
    "SensorValue": "48.84375",
    "SensorUnit": "°C",
    "SensorUpdateTime": 71916
  },
  {
    "SensorApp": "GPU-Z",
    "SensorClass": "GPU",
    "SensorName": "Hot Spot",
    "SensorValue": "62.84375",
    "SensorUnit": "°C",
    "SensorUpdateTime": 71916
  }
]

[Sachin Bisht]

@siradelaide,

You can parse the JSON data from your server and render it to the chart. Please check the code snippet below:

function parseJSON(jsonData) {
    var dataPoints = [];
    for(var i=0; i<jsonData.length; i++){
      var label = jsonData[i].SensorName;
      var yValue = parseFloat(jsonData[i].SensorValue);
      dataPoints.push({label: label, y: yValue})
    }
    chart.options.data[0].dataPoints = dataPoints;
    chart.render();
}

Please take a look at this JSFiddle for an example on the same.

—
Sachin Bisht
Team CanvasJS