Google Line Chart set value for no data to 0 - google-visualization

Question

I want integrate a google line chart on my raspberry pi terminal to show some statistics about my coffee consumption. If my json have got no value for a date, the line chart should set the value to 0. At the moment, dates with no values have got the value of the day before. Any ideas?
I have used this configuration:
let options = {
hAxis: {
format: 'd.M.yy',
gridlines: {count: 15},
},
vAxis: {
title: 'Cups of Coffee',
},
colors: ['#34495e'],
interpolateNulls : true
};
Dates with no value are not displayed in my json. For example: no entry for the date 3.6.2017 Here is the json:
[{
"_id": {
"year": 2017,
"month": 6,
"day": 9,
"action": "Coffee made"
},
"createdAt": "2017-06-09T06:41:50.904Z",
"count": 1
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 8,
"action": "Coffee made"
},
"createdAt": "2017-06-08T05:44:04.081Z",
"count": 1
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 7,
"action": "Coffee made"
},
"createdAt": "2017-06-07T06:10:01.713Z",
"count": 4
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 6,
"action": "Coffee made"
},
"createdAt": "2017-06-06T05:52:09.775Z",
"count": 2
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 2,
"action": "Coffee made"
},
"createdAt": "2017-06-02T06:03:47.243Z",
"count": 1
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 1,
"action": "Coffee made"
},
"createdAt": "2017-06-01T05:37:31.399Z",
"count": 1
},
{
"_id": {
"year": 2017,
"month": 5,
"day": 31,
"action": "Coffee made"
},
"createdAt": "2017-05-31T05:18:49.220Z",
"count": 1
}
]
Current line chart output (The values of date 2. Jun to 5. June should be 0)

Answer 1

just need to add a row for the missing dates...
use data table method getFilteredRows to check data for a certain day
see following working snippet...
the json is loaded, then starting with the min date in the data,
and ending with the current date, each day is checked for data
if now rows are found, one is added with value of 0
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart', 'table']
});
function drawChart() {
var jsonData = [{
"_id": {
"year": 2017,
"month": 6,
"day": 9,
"action": "Coffee made"
},
"createdAt": "2017-06-09T06:41:50.904Z",
"count": 1
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 8,
"action": "Coffee made"
},
"createdAt": "2017-06-08T05:44:04.081Z",
"count": 1
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 7,
"action": "Coffee made"
},
"createdAt": "2017-06-07T06:10:01.713Z",
"count": 4
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 6,
"action": "Coffee made"
},
"createdAt": "2017-06-06T05:52:09.775Z",
"count": 2
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 2,
"action": "Coffee made"
},
"createdAt": "2017-06-02T06:03:47.243Z",
"count": 1
},
{
"_id": {
"year": 2017,
"month": 6,
"day": 1,
"action": "Coffee made"
},
"createdAt": "2017-06-01T05:37:31.399Z",
"count": 1
},
{
"_id": {
"year": 2017,
"month": 5,
"day": 31,
"action": "Coffee made"
},
"createdAt": "2017-05-31T05:18:49.220Z",
"count": 1
}
];
var datePattern = 'd.M.yy';
var formatDate = new google.visualization.DateFormat({
pattern: datePattern
});
var dataTable = new google.visualization.DataTable({
"cols": [
{"label": "Date", "type": "date"},
{"label": "Cups of Coffee", "type":"number"}
]
});
jsonData.forEach(function (row) {
dataTable.addRow([
new Date(row.createdAt),
row.count
]);
});
var startDate = dataTable.getColumnRange(0).min;
var endDate = new Date();
var oneDay = (1000 * 60 * 60 * 24);
for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
var coffeeData = dataTable.getFilteredRows([{
column: 0,
test: function (value, row, column, table) {
var coffeeDate = formatDate.formatValue(table.getValue(row, column));
var testDate = formatDate.formatValue(new Date(i));
return (coffeeDate === testDate);
}
}]);
if (coffeeData.length === 0) {
dataTable.addRow([
new Date(i),
0
]);
}
}
dataTable.sort({column: 0});
var chartLine = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
dataTable: dataTable,
options: {
theme: 'material',
legend: {
position: 'none',
},
chartArea: {
top: 12,
right: 12,
bottom: 48,
left: 48,
height: '100%',
width: '100%'
},
colors: ['#34495e'],
hAxis: {
format: datePattern,
gridlines: {
count: 15
},
},
pointSize: 4,
vAxis: {
title: 'Cups of Coffee',
}
}
});
chartLine.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>