Chartjs-How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?

by

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>

Leave a comment