Chartjs-How to dynamically render and update chart.js line graph

by

1👍

I played a little with your example – I am not sure is that the result you are expecting to receive… In general you built the data object as list of maps where the key in the map is your dynamic attribute, I change it to the list of objects:

/* var base_url = $('head base').attr('href'); */

//chart.js config arrays
var graphColors = [
  '#0275d8',
  '#d9534f',
  '#5cb85c',
  '#f0ad4e',
  '#5bc0de'
];

var graphDatasets = [];

const number_format = (a) => a;

// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

var data = [];

window.onload = init();

function init() {
  var jsonString = '[{"id":"1","temp1":"22","temp2":"33","hum":"55"},{"id":"2","temp1":"33","temp2":"44","hum":"44"},{"id":"3","temp1":"12","temp2":"25","hum":"66"}]';
  var myData = JSON.parse(jsonString);
  var temp = [];
  myData.slice(-2).forEach(o => Object.entries(o).forEach(([k, v]) => {
    if (!temp[k]) data.push({
      data: temp[k] = [],
      key: k
    });
    temp[k].push(v);
  }));
  //Populate graphDatasets array
  var i = 0;
  data.forEach((elem) => {
    if ((elem.key !== "id") && (elem.key !== "date")) {
      graphDatasets.push({
        label: elem.key,
        lineTension: 0.3,
        backgroundColor: "rgba(78, 115, 223, 0.05)",
        borderColor: graphColors[i],
        pointRadius: 3,
        pointBackgroundColor: graphColors[i],
        pointBorderColor: "rgba(78, 115, 223, 1)",
        pointHoverRadius: 3,
        pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
        pointHoverBorderColor: "rgba(78, 115, 223, 1)",
        pointHitRadius: 10,
        pointBorderWidth: 2,
        data: elem.data
      });
      i++;
    }
  })
}

//console.log(data[0]);
//console.log(graphDatasets);

// Area Chart Example
var ctx = document.getElementById("chartIndex");
var chartIndex = new Chart(ctx, {
  type: 'line',
  data: {
    labels: data[0].id,
    datasets: graphDatasets
  },
  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 10,
        right: 25,
        top: 25,
        bottom: 0
      }
    },
    scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 5,
          padding: 10,
          // Include a dollar sign in the ticks
          callback: function(value, index, values) {
            return '$' + number_format(value);
          }
        },
        gridLines: {
          color: "rgb(234, 236, 244)",
          zeroLineColor: "rgb(234, 236, 244)",
          drawBorder: false,
          borderDash: [2],
          zeroLineBorderDash: [2]
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      intersect: false,
      mode: 'index',
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
        }
      }
    }
  }
});

var updateChart = function() {
  $.ajax({
    type: 'GET',
    url: base_url + '//',
    dataType: 'json',
    success: function(response) {

      var obj = response.parse();
      var i = 0;

      Object.keys(obj).forEach(function(key, index) {
        if (data.hasOwnProperty(key)) {
          data.key.push(obj[key]);
          chartIndex.data.labels.push(obj.date);
          chartIndex.data.datasets[i].data.push(data.key);
          i++;
        }
      });
      // re-render the chart
      myChart.update();
    }
  });
};

// get new data every 3 seconds
//setInterval(updateChart, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chartIndex" width="400" height="400"></canvas>

Leave a comment