Google's Api chartArea. Draw 2 graphs in a chart

Question

First of all I don't have much idea about PHP language 😓. Neverthless, I've got a problem with the representation of Area graphs with Google's API (google.visualization.DataTable). When I try to draw two graphs at the same time with the same axis, the first graph draws good but afterwards, a line its drawn to the point that teh next graph starts (then drwas teh second graph). However, if i draw each graph in a separate chart, the program works well. I use addRows routine to pass all data. (The both graphs have the same length)

How can I do it?

What I doing wrong?

One of them ... Another one ... Both. Wrong chart

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time');
  data.addColumn('number', 'Value (kW)');
  data.addColumn({
    type: 'string',
    role: 'style'
  });


  data.addRows([
    [{
      v: [06, 04, 0],
      f: 'Last year C.D : 06:04-06:19'
    }, 0, '#e874d2'],
    [{
      v: [06, 19, 0],
      f: 'Last year C.D : 06:19-06:34'
    }, 0, '#e874d2'],
    [{
      v: [06, 34, 0],
      f: 'Last year C.D : 06:34-06:49'
    }, 0, '#e874d2'],
    [{
      v: [06, 49, 0],
      f: 'Last year C.D : 06:49-07:4'
    }, 0, '#e874d2'],
    [{
      v: [07, 04, 0],
      f: 'Last year C.D : 07:04-07:19'
    }, 0.001395, '#e874d2'],
    [{
      v: [07, 19, 0],
      f: 'Last year C.D : 07:19-07:34'
    }, 0, '#e874d2'],
    [{
      v: [07, 34, 0],
      f: 'Last year C.D : 07:34-07:49'
    }, 0, '#e874d2'],
    [{
      v: [07, 49, 0],
      f: 'Last year C.D : 07:49-08:4'
    }, 0, '#e874d2'],
    [{
      v: [08, 04, 0],
      f: 'Last year C.D : 08:04-08:19'
    }, 0, '#e874d2'],
    [{
      v: [08, 19, 0],
      f: 'Last year C.D : 08:19-08:34'
    }, 0, '#e874d2'],
    [{
      v: [08, 34, 0],
      f: 'Last year C.D : 08:34-08:49'
    }, 0, '#e874d2'],
    [{
      v: [08, 49, 0],
      f: 'Last year C.D : 08:49-09:4'
    }, 0, '#e874d2'],
    [{
      v: [06, 30, 0],
      f: 'Today C.D: 06:30-06:45'
    }, 1.008, '#109895'],
    [{
      v: [06, 45, 0],
      f: 'Today C.D: 06:45-07:00'
    }, 1.728, '#109895'],
    [{
      v: [07, 00, 0],
      f: 'Today C.D: 07:00-07:15'
    }, 1.744, '#109895'],
    [{
      v: [07, 15, 0],
      f: 'Today C.D: 07:15-07:30'
    }, 1.76, '#109895'],
    [{
      v: [07, 34, 0],
      f: 'Today C.D: 07:34-07:49'
    }, 1.76, '#109895'],
    [{
      v: [07, 49, 0],
      f: 'Today C.D: 07:49-08:4'
    }, 1.76, '#109895'],
    [{
      v: [08, 04, 0],
      f: 'Today C.D: 08:04-08:19'
    }, 2.768, '#109895'],
    [{
      v: [08, 19, 0],
      f: 'Today C.D: 08:19-08:34'
    }, 3.408, '#109895'],
    [{
      v: [08, 34, 0],
      f: 'Today C.D: 08:34-08:49'
    }, 3.36, '#109895'],
  ]);

  var options = {

    chartArea: {
      top: '3%',
      width: '90%',
      height: '80%'
    },
    legend: {
      position: 'none'
    },
    vAxis: {
      title: 'Power (kW)',
    },

    hAxis: {
      title: 'Time',
      format: 'HH:mm',
      gridlines: {
        count: 10
      }
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div4'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Answer 1

first, each chart, or series, needs it's own set of columns in the data

var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
// series 0
data.addColumn('number', 'Value (kW)');
data.addColumn({
  type: 'string',
  role: 'style'
});
// series 1
data.addColumn('number', 'Value (kW)');
data.addColumn({
  type: 'string',
  role: 'style'
});

use null for column values where the rows do not coincide

[{
  v: [08, 49, 0],
  f: 'Last year C.D : 08:49-09:4'
}, 0, '#e874d2', null, null],
[{
  v: [06, 30, 0],
  f: 'Today C.D: 06:30-06:45'
}, null, null, 1.008, '#109895'],

---

next, the scale of the first series is so small, it is not visible when shown on the same y-axis as the second series

this will assign the second series its own y-axis...

series: {
  1: {
    targetAxisIndex: 1
  }
},

---

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time');
  data.addColumn('number', 'Value (kW)');
  data.addColumn({
    type: 'string',
    role: 'style'
  });
  data.addColumn('number', 'Value (kW)');
  data.addColumn({
    type: 'string',
    role: 'style'
  });


  data.addRows([
    [{
      v: [06, 04, 0],
      f: 'Last year C.D : 06:04-06:19'
    }, 0, '#e874d2', null, null],
    [{
      v: [06, 19, 0],
      f: 'Last year C.D : 06:19-06:34'
    }, 0, '#e874d2', null, null],
    [{
      v: [06, 34, 0],
      f: 'Last year C.D : 06:34-06:49'
    }, 0, '#e874d2', null, null],
    [{
      v: [06, 49, 0],
      f: 'Last year C.D : 06:49-07:4'
    }, 0, '#e874d2', null, null],
    [{
      v: [07, 04, 0],
      f: 'Last year C.D : 07:04-07:19'
    }, 0.001395, '#e874d2', null, null],
    [{
      v: [07, 19, 0],
      f: 'Last year C.D : 07:19-07:34'
    }, 0, '#e874d2', null, null],
    [{
      v: [07, 34, 0],
      f: 'Last year C.D : 07:34-07:49'
    }, 0, '#e874d2', null, null],
    [{
      v: [07, 49, 0],
      f: 'Last year C.D : 07:49-08:4'
    }, 0, '#e874d2', null, null],
    [{
      v: [08, 04, 0],
      f: 'Last year C.D : 08:04-08:19'
    }, 0, '#e874d2', null, null],
    [{
      v: [08, 19, 0],
      f: 'Last year C.D : 08:19-08:34'
    }, 0, '#e874d2', null, null],
    [{
      v: [08, 34, 0],
      f: 'Last year C.D : 08:34-08:49'
    }, 0, '#e874d2', null, null],
    [{
      v: [08, 49, 0],
      f: 'Last year C.D : 08:49-09:4'
    }, 0, '#e874d2', null, null],
    [{
      v: [06, 30, 0],
      f: 'Today C.D: 06:30-06:45'
    }, null, null, 1.008, '#109895'],
    [{
      v: [06, 45, 0],
      f: 'Today C.D: 06:45-07:00'
    }, null, null, 1.728, '#109895'],
    [{
      v: [07, 00, 0],
      f: 'Today C.D: 07:00-07:15'
    }, null, null, 1.744, '#109895'],
    [{
      v: [07, 15, 0],
      f: 'Today C.D: 07:15-07:30'
    }, null, null, 1.76, '#109895'],
    [{
      v: [07, 34, 0],
      f: 'Today C.D: 07:34-07:49'
    }, null, null, 1.76, '#109895'],
    [{
      v: [07, 49, 0],
      f: 'Today C.D: 07:49-08:4'
    }, null, null, 1.76, '#109895'],
    [{
      v: [08, 04, 0],
      f: 'Today C.D: 08:04-08:19'
    }, null, null, 2.768, '#109895'],
    [{
      v: [08, 19, 0],
      f: 'Today C.D: 08:19-08:34'
    }, null, null, 3.408, '#109895'],
    [{
      v: [08, 34, 0],
      f: 'Today C.D: 08:34-08:49'
    }, null, null, 3.36, '#109895'],
  ]);

  var options = {
    chartArea: {
      top: '3%',
      width: '90%',
      height: '80%'
    },
    legend: {
      position: 'none'
    },
    vAxis: {
      title: 'Power (kW)',
    },

    series: {
      1: {
        targetAxisIndex: 1
      }
    },

    hAxis: {
      title: 'Time',
      format: 'HH:mm',
      gridlines: {
        count: 10
      }
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>