Google Combo Chart + multiple legend for != data

Question

a short explenation.

I'm using a google Combo chart to display the graph below : https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart#Configuration_Options

But, as you can see, it's not easy to read blue values, as long as the red line is the accumulate of blue values, it can go very high. Is there a way to put a second legend on the right of the picture? In order to the red line to stay at a reasonable high, and make all this thing readable easely? i read the doc about legend, but i didn't found:

how to put a second legend ? How to make the red line folow the second legend? just in case. Do you have some snippet ?

thanks.

Answer 1

You can use multiple vAxes and specify which series is plotted on which axis. Roughly something like:

  function drawVisualization() {
    // Just data, use your own
    var data = google.visualization.arrayToDataTable([
      ['Date', 'Value', 'Cumulate'],
      ['2014/01/01',  5,   5],
      ['2014/01/02', 20,  25],
      ['2014/01/03',  7,  32],
      ['2014/01/04', 15,  47],
      ['2014/01/05',  3,  50],
      ['2014/01/06',  5,  55],
      ['2014/01/07',  0,  55],
      ['2014/01/08',  0,  55],
      ['2014/01/09', 10,  65],
      ['2014/01/10',  5,  70],
      ['2014/01/11', 10,  80],
      ['2014/01/12',  0,  80],
      ['2014/01/13',  7,  87],
      ['2014/01/14', 13,  90],
      ['2014/01/15', 10, 100]
    ]);

    var options = {
      title : 'Pluviometre',
      // multiple axis (you can have different labels, colors, etc.)
      vAxes: [
        {title: "mm/h"},
        {title: "mm/h",textStyle:{color: "red"}}
      ],
      hAxis: {title: "date"},
      seriesType: "bars",
      // 1st series on axis 0 (by default), 2nd series on axis 1
      series: {1: {type: "line", targetAxisIndex:1}}
    };

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