CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
ssbb
ssbb

Reputation: 1931

Google Combo Chart + multiple legend for != data

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. The picture i have currently. 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.

Upvotes: 1

Views: 2127

Answers (1)

mihaimm
mihaimm

Reputation: 521

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);
  }

Upvotes: 4

Related Questions