Google line chart with triple y-axis - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Line Chart

Description

Google line chart with triple y-axis

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//from  w  ww .jav a  2  s.  c o  m
      google.charts.load('current', {'packages':['line', 'corechart']});
      google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'Temperature', 'Humidity', 'Pressure'],
    ['A',   5,     55,     1000],
    ['B',   12,     57,     1001],
    ['C',   14,     57,     1001],
    ['D',   18,     58,     1010],
    ['E',   17,     58,     1010],
    ['F',   17,     60,     1012],
    ['G',   18,     61,     1013],
    ['H',   22,     62,     1010],
    ['I',   24,     62,     1012],
    ['J',   20,     62,     1005],
    ['K',   17,     60,     1005],
    ['L',   17,     58,     1004],
    ['M',   16,     58,     1005],
    ['N',   15,     57,     1003]
  ]);
  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
      "curveType" : "function",
      "lineWidth" : 2,
      "pointSize" : 2,
      "vAxes": {
         "0": {"title": "?C", "textPosition": "out", "minValue": -10, "maxValue": 25 },
         "1": {"title": "% rel", "textPosition": "in", "minValue": 20, "maxValue": 90 },
         "2": {"title": "hPa", "textPosition": "out", "minValue": 900, "maxValue": 1100 }
       },
   "series":{
      "0": {"targetAxisIndex":0, "color" : "blue"},
      "1": {"targetAxisIndex":1, "color" : "red" },
      "2": {"targetAxisIndex":2, "color" : "green" }
    }
   }
   );
};
    }

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="visualization"></div>  
   </body>
</html>

Related Tutorials