Chart.js - if there is not value show 0

Question

I am trying to show views stats with charts.js and I am using mysql and php . I save datas only if there is views .There is not data if there is not view. I want to make it "0" if there is not data from mysql . Here my code

   Chart.defaults.scale.ticks.beginAtZero = true;
Chart.scaleService.updateScaleDefaults('line', {
  ticks: {
    min: 0
  }
});
var options = {
  type: 'line',
  data: {
    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],
    datasets: [{
      label: 'Dataset 3 (filled)',
      data: [{
        x: 0,
        y: 1
      }, {
        x: 1,
        y: 4
      }, {
        x: 2,
        y: 7
      }, {
        x: 14,
        y: 5
      }],
      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);

the red line is what I am trying to do .

Here jsfiddle : https://jsfiddle.net/mgLo57as/4/

Thanks for replies

Answer 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>