[Chartjs]-Can't create separate charts using chart.js

by

2👍

✅

The success function of the $.ajax call is very odd; I can’t understand why the data variable is iterated 3 separate times. Since no test data was provided in the question I’ve reverse-engineered some, based on the code, and created a simplified answer that draws three separate charts:

// spoofed user input for testing.
var visualisesensor = ['1', '2'];

// spoofed ajax result data for test purposes.
var data = [{
  SensorID: '1',
  Sensornaam: 'tempsensor',
  Temperatuur: '45'
}, {
  SensorID: '2',
  Sensornaam: 'meter',
  Temperatuur: '83'
}];

for (var i = 0; i < visualisesensor.length; i++) {
  $("#chart-container").append("<canvas id=" + visualisesensor[i] + "></canvas>");
}

for (var i = 0; i < data.length; i++) {
  var ctx = $("#" + data[i].SensorID);

  var chartdata = {
    labels: [data[i].Sensornaam],
    datasets: [{
      label: 'Sensor Temperatuur',
      backgroundColor: 'rgba(200, 200, 200, 0.75)',
      borderColor: 'rgba(200, 200, 200, 0.75)',
      hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
      hoverBorderColor: 'rgba(200, 200, 200, 1)',
      data: [data[i].Temperatuur]
    }]
  };

  new Chart(ctx, {
    type: 'bar',
    data: chartdata,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart-container"></div>

Leave a comment