[Chartjs]-Chart.js – if there is not value show 0

by

1👍

✅

before loading the chart,
you can manually fill the missing points.

first, save the labels and points in separate variables… 

var labels = [00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
var points = [{x: 0, y: 1}, {x: 1, y: 4}, {x: 2, y: 7}, {x: 14, y: 5}];

then fill the missing points… 

// fill missing points
labels.forEach(function (label) {
  hasPoint = false;
  points.forEach(function (point) {
    if (point.x === label) {
      hasPoint = true;
    }
  });
  if (!hasPoint) {
    points.push({
      x: label,
      y: 0
    });
  }
});

// sort final points
points.sort(function (pointA, pointB) {
  return pointA.x - pointB.x;
});

see following working snippet… 

$(document).ready(function() {
  Chart.defaults.scale.ticks.beginAtZero = true;
  Chart.scaleService.updateScaleDefaults('line', {
    ticks: {
      min: 0
    }
  });

  var labels = [00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
  var points = [{x: 0, y: 1}, {x: 1, y: 4}, {x: 2, y: 7}, {x: 14, y: 5}];

  // fill missing points
  labels.forEach(function (label) {
    hasPoint = false;
    points.forEach(function (point) {
      if (point.x === label) {
        hasPoint = true;
      }
    });
    if (!hasPoint) {
      points.push({
        x: label,
        y: 0
      });
    }
  });
  
  // sort final points
  points.sort(function (pointA, pointB) {
    return pointA.x - pointB.x;
  });

  var options = {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        {
          label: 'Dataset 3 (filled)',
          data: points,
          backgroundColor: "rgba(54, 162, 235, 1)",
          borderColor:"rgba(54, 162, 235, 0.6)",
          borderWidth: 2,
          fill: false
        }
      ]
    },
    options: {
      tooltips: {
        mode: "index",
        intersect: false,
      },
      hover: {
        mode: "nearest",
        intersect: true
      },
      scales: {
        yAxes: [{
          ticks: {
            stacked: true
          }
        }]
      }
    }
  }

  var ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

EDIT

depending on the labels used for the x-axis,
you may need to adjust the sort function…

for sorting by weekday names… 

// sort final points
points.sort(function (pointA, pointB) {
  var customSort = {
    "Sunday": 0,
    "Monday": 1,
    "Tuesday": 2,
    "Wednesday": 3,
    "Thursday": 4,
    "Friday": 5,
    "Saturday": 6
  };
  return customSort[pointA.x] - customSort[pointB.x];
});

see following working snippet… 

$(document).ready(function() {
  Chart.defaults.scale.ticks.beginAtZero = true;
  Chart.scaleService.updateScaleDefaults('line', {
    ticks: {
      min: 0
    }
  });

  var labels = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  var points = [{ x: "Sunday", y: "2" }, { x: "Tuesday", y: "3" }, { x: "Thursday", y: "2" }, ];

  // fill missing points
  labels.forEach(function (label) {
    hasPoint = false;
    points.forEach(function (point) {
      if (point.x === label) {
        hasPoint = true;
      }
    });
    if (!hasPoint) {
      points.push({
        x: label,
        y: 0
      });
    }
  });

  // sort final points
  points.sort(function (pointA, pointB) {
    var customSort = {
      "Sunday": 0,
      "Monday": 1,
      "Tuesday": 2,
      "Wednesday": 3,
      "Thursday": 4,
      "Friday": 5,
      "Saturday": 6
    };
    return customSort[pointA.x] - customSort[pointB.x];
  });

  var options = {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        {
          label: 'Dataset 3 (filled)',
          data: points,
          backgroundColor: "rgba(54, 162, 235, 1)",
          borderColor:"rgba(54, 162, 235, 0.6)",
          borderWidth: 2,
          fill: false
        }
      ]
    },
    options: {
      tooltips: {
        mode: "index",
        intersect: false,
      },
      hover: {
        mode: "nearest",
        intersect: true
      },
      scales: {
        yAxes: [{
          ticks: {
            stacked: true
          }
        }]
      }
    }
  }

  var ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment