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?

score 5 · Accepted Answer · answered Feb 12 '18 at 12:39

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>

I had attempted doing this, but for whatever reason when I add the next series/column I end up with an error. Since your example works though, it must be possible. I should be able to use this to work backward to figure out where I'm going wrong. Thank you very much for taking the time to read and respond to my question :) — Joel Magoun, Feb 12 '18 at 17:55
You can see the full code that doesn't work here (https://stackoverflow.com/revisions/48745951/3) .. I just rolled it back for people that stumble on this question in the future, because your answer should be more than enough, and I didn't want to bother you with trivialities. I imagine my problem stems from the way I am adding the date, or something.. — Joel Magoun, Feb 12 '18 at 18:11
no problem, there should be only one `series` option, that includes both `1` and `2`, the example you provided has duplicate `series`, so the chart ignores the second, and expects 4 columns instead of one... — WhiteHat, Feb 12 '18 at 18:16

Multiple lines over google candlestick chart

1 Answers1

Linked