Multiple lines over google candlestick chart

Question

I'm trying to create a google candlestick chart, but also trying to overlay multiple lines on the same chart.

I'm able to draw one line over the candlestick if I do something like the following:

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');

data.addRow('Mon', 1, 1, 2, 2, 1.5]);
data.addRow('Tue', 2, 2, 3, 3, 2.5]);
data.addRow('Wed', 2, 2, 4, 4, 3.5]);

var options = {
  legend:'none',
  series: {1: {type: 'line'}}
};

But I can't seem to figure out how to add a second line.

To avoid confusion, I'll leave out all of the things I've attempted, but the goal is to just add another data column and specify whatever is necessary to tell the chart to overlay the new data as a second line.

Is there any way to make this work?

WhiteHat WhiteHat · Accepted Answer · 2018-02-12T12:39:44

sure, just keep adding line series as you have, using the series option...

for the CandleStickChart, five columns are required,
those five columns count as one series,
in this example, series 0

which makes the 6th column series 1
which you've changed to 'line'

1: {type: 'line'}

adding another column would be series 2,
just add another column and change the type...

  1: {type: 'line'},
  2: {type: 'line'}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Low');
  data.addColumn('number', 'Open');
  data.addColumn('number', 'Close');
  data.addColumn('number', 'High');
  data.addColumn('number', 'Average');
  data.addColumn('number', 'Average 2');

  data.addRow(['Mon', 1, 1, 2, 2, 1.5, 2.5]);
  data.addRow(['Tue', 2, 2, 3, 3, 2.5, 3.5]);
  data.addRow(['Wed', 2, 2, 4, 4, 3.5, 4.5]);

  var options = {
    legend: 'none',
    series: {
      1: {type: 'line'},
      2: {type: 'line'}
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.CandlestickChart(container);
  chart.draw(data, options);
});

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

Multiple lines over google candlestick chart

1 Answers