Googleライングラフのデータなしの値を0に設定する

Question

ラズベリーpi端末にGoogleライングラフを統合して、自分のコーヒー消費に関する統計情報を表示します。私のjsonに日付の値がない場合、折れ線グラフは値を0に設定する必要があります。現時点では、値のない日付は前日の値を持っています。何か案は？

私は、この設定を使用している：値のない

let options = { 
       hAxis: { 
        format: 'd.M.yy', 
        gridlines: {count: 15}, 


       }, 
       vAxis: { 
        title: 'Cups of Coffee', 

       }, 
       colors: ['#34495e'], 
       interpolateNulls : true 

      }; 

日付は私のJSONには表示されません。たとえば、次のようにここに日付2017年6月3日のエントリは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

だけ不足している日付の行を追加する必要があります...

利用データテーブル方式getFilteredRowsある日のデータをチェックするために

が作業スニペット以下を参照してください...

JSONはメートルで始まる、その後、ロードされ、データ、
と現在の日付で終わるの日付で、それぞれの日は、現在の行が見つかった場合は、1が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>