Wednesday, June 5, 2013

How to draw a two y axis line chart in google charts


function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['x',                'Total Run', 'Centuary', 'Half Centuary'],
    ['January, 2013',    200,         1,           1],
    ['February, 2013',   105,         0,           1],
    ['March, 2013',      300,         1,           2],
    ['April, 2013',      305,         0,           5],
    ['May, 2013',        100,         0,           0],
    ['June, 2013',       290,         1,           2],
    ['July, 2013',       400,         2,           3],
    ['August, 2013',     180,         0,           1],
    ['September, 2013',  270,         1,           2],
    ['Ocotber, 2013',    170,         0,           1],
    ['November, 2013',   180,         1,           0],
    ['December, 2013',   240,         1,           2]
  ]);

  new google.visualization.AreaChart(document.getElementById('visualization')).
      draw(data, {
        curveType: "function",width: 500, height: 400,
        vAxes: {
          0: {logScale: false, maxValue: 100},
          1: {logScale: false, maxValue: 5}
        },
        focusTarget: 'category',
        series:{
          0:{targetAxisIndex:0},
          1:{targetAxisIndex:1},
          2:{targetAxisIndex:1}}
      }
   );
} 

Example Image:

No comments:

Post a Comment