在Google图表中显示没有值的日期

Question

I've got the below script & it's working perfectly.

However, it may be the case that on some days there are no orders. In this case, the date should still show, but the value should be zero.

Like in the above, it jumps from 06-19 to 06-21.

Is there a way to still show 06-20 and just have the value as zero? The missing date doesn't exist in the database as a record is only created when an expense is submitted, so I'm a bit lost.

Thank you in advance

Head Script

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
 function drawChart() {
 var data = google.visualization.arrayToDataTable([

 ['Date', 'Total Orders'],
 ['2017-9-6',200],['2017-8-6',1500],['2017-7-7',800],['2017-7-3',1,800],['2017-7-2',200],['2017-6-13',10000],['2017-10-5',800],['2017-10-12',4,500],['',], 
 ]);

 var options = {
 title: 'Orders Per Day'
 };
 var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
 chart.draw(data, options);
 }
 </script>

Body Script

<h3>Column Chart</h3>
 <div id="columnchart" style="width: 900px; height: 500px;"></div>

Answer 1

To address this issue you would need to define that your axes are continuous. This can be achieved by defining the data type for your chart columns.

Below is an example that uses different data to your problem to make it easier to see the solution. The string dates in the array need to be converted to a date object to meet the data type criteria. This is achieved by using the new Date() object.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Total Orders');

  data.addRows([
     [new Date('2017-9-6'),200],
     [new Date('2017-7-7'),800],
     [new Date('2017-7-3'),800],
     [new Date('2017-7-2'),200],
     [new Date('2017-6-13'),300]
 ]);

 var options = {
     title: 'Orders Per Day'
 };

 var chart = new 
   google.visualization.ColumnChart(document.getElementById('columnchart'));
 chart.draw(data, options);
}
</script>