Google line chart: How to compare values from different time periods?

1
votes

Let us suppose the following: I have a dataset counting daily ticket sales.

It's relatively easy to use Google Line Chart and draw a chart displaying the count of tickets per day.

What I would like to be able to do is draw multiple lines comparing different time periods; for example, a blue line showing the daily ticket sales between 01-01-2020 through 01-31-2020, and then a red line showing the daily ticket sales between 02-01-2020 through 03-02-2020.

Is this something Google Line Charts naturally supports?

EDITED TO ADD EXAMPLE DATASET BECAUSE COMMENTS ARE HARD TO READ

Well, in the same way as you can have multiple Y-axes values across the same X-axes, this would be multiple X and Y axes sets of values, where the X axis values all have a 1:1 correspondence with one another.

So, one representation of the dataset would look like

[ 
[ ['2020-01-01', 50], ['2020-01-02, 75] ], 
[ ['2020-02-01', 25], ['2020-02-02', 35] ]
]

(which would then be turned into a DataTable)

And would draw a chart with two lines; one corresponding to the January data, and one corresponding to the February data, where the dates share the x-axis

1
javascriptchartsgoogle-visualization
to clarify, you would like the sales for 1/1 and 2/1 to be plotted on the same x-axis value? – WhiteHat
Well, in the same way as you can have multiple Y-axes values across the same X-axes, this would be multiple X and Y axes sets of values, where the X axis values all have a 1:1 correspondence with one another. So, one representation of the dataset would look like [ ['2020-01-01', 50], ['2020-01-02, 75], ['2020-02-01', 25], ['2020-02-02', 35] ] (which would then be turned into a DataTable) And would draw a chart with two lines; one corresponding to the January data, and one corresponding to the February data, where the dates share the x-axis. – Drew Stevens

1 Answers

2
votes

in google charts, the first column of the data table represents the x-axis values.
each additional column represents the y-axis values.
to plot two lines, requires three data table columns.

  data.addColumn('number', 'Day');
  data.addColumn('number', 'Jan')
  data.addColumn('number', 'Feb')

and each line would need the same value for the x-axis.
you could just use 1 for the first day of the month.

[1, 50, 75]

google charts does have some features we can use to customize the appearance of the chart.

for instance, if you would like the tooltips for each line to display a different x-axis value,
you can use object notation when providing the data.

we can provide the value (v:) and the formatted value (f:).
the tooltips display the formatted value.

as such, the following data would plot on the same x-axis value,
however, the tooltips for each would display a different date.

[{v: 1, f: '2020-01-01'}, 50, null],
[{v: 1, f: '2020-02-01'}, null, 75],

see following working snippet for an example...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Jan')
  data.addColumn('number', 'Feb')
  data.addRows([
    [{v: 1, f: '2020-01-01'}, 50, null],
    [{v: 1, f: '2020-02-01'}, null, 75],
    [{v: 2, f: '2020-01-02'}, 25, null],
    [{v: 2, f: '2020-02-02'}, null, 35],
    [{v: 3, f: '2020-01-03'}, 20, null],
    [{v: 3, f: '2020-02-03'}, null, 50],
  ]);

  var xAxisTicks = [];
  for (var i = 1; i <= 31; i++) {
    xAxisTicks.push(i);
  }

  var options = {
    aggregationTarget: 'none',
    chartArea: {
      left: 64,
      top: 48,
      right: 32,
      bottom: 64,
      height: '100%',
      width: '100%'
    },
    hAxis: {
      ticks: xAxisTicks,
      title: 'Day of Month'
    },
    height: '100%',
    interpolateNulls: true,
    legend: {
      alignment: 'start',
      position: 'top'
    },
    selectionMode: 'multiple',
    tooltip: {
      trigger: 'both'
    },
    vAxis: {
      title: 'Daily Ticket Sales'
    },
    width: '100%'
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([
      {row: 4, column: 1},
      {row: 5, column: 2}
    ]);
  });

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });  
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
  min-height: 400px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

EDIT

another option is to use the column role feature,
which allows us to add multiple domain columns.
if not specified, the first column of the data table is used as the domain column.

by explicitly setting the role type,
we can have multiple domains, or x-axis values.
in this scenario, we do not have to perform any manipulation,
in order to display the correct values in the tooltips.
and all the values can be set in the same row...

data.addColumn({label: 'Date', role: 'domain', type: 'string'});
data.addColumn({label: 'Jan', type: 'number'});
data.addColumn({label: 'Date', role: 'domain', type: 'string'});
data.addColumn({label: 'Feb', type: 'number'});
data.addRows([
  ['2020-02-01', 75, '2020-01-01', 50],
  ['2020-02-02', 35, '2020-01-02', 25],
  ['2020-02-03', 50, '2020-01-03', 20],
]);

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn({label: 'Date', role: 'domain', type: 'string'});
  data.addColumn({label: 'Jan', type: 'number'});
  data.addColumn({label: 'Date', role: 'domain', type: 'string'});
  data.addColumn({label: 'Feb', type: 'number'});
  data.addRows([
    ['2020-02-01', 75, '2020-01-01', 50],
    ['2020-02-02', 35, '2020-01-02', 25],
    ['2020-02-03', 50, '2020-01-03', 20],
  ]);

  var xAxisTicks = [];
  for (var i = 1; i <= 31; i++) {
    xAxisTicks.push(i);
  }

  var options = {
    aggregationTarget: 'none',
    chartArea: {
      left: 64,
      top: 48,
      right: 32,
      bottom: 48,
      height: '100%',
      width: '100%'
    },
    hAxis: {
      ticks: xAxisTicks,
      title: 'Day of Month'
    },
    height: '100%',
    legend: {
      alignment: 'start',
      position: 'top'
    },
    selectionMode: 'multiple',
    tooltip: {
      trigger: 'both'
    },
    vAxis: {
      title: 'Daily Ticket Sales'
    },
    width: '100%'
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([
      {row: 2, column: 1},
      {row: 2, column: 3}
    ]);
  });

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });  
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>