score:0

in order to produce the desired chart,
the data would need to be structured as follows,
with a column of values for each date...

['ordertime', '2018-02-15', '2018-02-22'],
['0', 24, 26],
['1', 15, 13],
['2', 10, 15],
['3', 34, 30],
['4', 65, 67],
['5', 72, 70],
['6', 18, 20],
['7', 73, 70],
['8', 80, 85],
['9', 50, 55],
['10', 40, 43],
['11', 49, 48],
['12', 70, 70]

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arraytodatatable([
    ['ordertime', '2018-02-15', '2018-02-22'],
    ['0', 24, 26],
    ['1', 15, 13],
    ['2', 10, 15],
    ['3', 34, 30],
    ['4', 65, 67],
    ['5', 72, 70],
    ['6', 18, 20],
    ['7', 73, 70],
    ['8', 80, 85],
    ['9', 50, 55],
    ['10', 40, 43],
    ['11', 49, 48],
    ['12', 70, 70]
  ]);

  var options = {
    chartarea: {
      height: '100%',
      width: '100%',
      top: 60,
      left: 60,
      right: 160,
      bottom: 60
    },
    height: '100%',
    width: '100%',
    title: 'sales by category (arabi) branch (madinah) date (2018-03-15)',
    haxis: {title: 'sales by time',  titletextstyle: {color: '#333'}},
    vaxis: {minvalue: 0},
    series: {
      0: { color: '#885426' },
      1: { color: '#008000' },
    },
    areaopacity: 0.1,
    pointsize: 5,
  };

  var chart = new google.visualization.areachart(document.getelementbyid('chart_div'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>


Related Query

More Query from same tag