Plot GPU-Z data with live chart

• July 14, 2023 at 10:01 am #43331
  
  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
    }
  ]

  July 17, 2023 at 9:45 am #43340
  
  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