Add four charts using google chart - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Add four charts using google chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <style id="compiled-css" type="text/css">
.wrapper > div {
   position:absolute;
   width:50vw;
   height:50vh;
   overflow:hidden;
}
#chart1 {top:0;left:0;}
#chart2 {top:0;right:0;}
#chart3 {bottom:0;left:0;}
#chart4 {bottom:0;right:0;}


      </style> 
      <script type="text/javascript">
    window.onload=function(){/*from  w  ww  .  j  a  va 2s .c o  m*/
google.charts.load('current', {'packages':['corechart', 'gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);
  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart1'));
  chart.draw(data, options);
  var data2 = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55]
  ]);
  var options2 = {
    redFrom: 90, redTo: 100,
    yellowFrom:75, yellowTo: 90,
    minorTicks: 5
  };
  var chart2 = new google.visualization.Gauge(document.getElementById('chart2'));
  chart2.draw(data2, options2);
  var chart3 = new google.visualization.LineChart(document.getElementById('chart3'));
  chart3.draw(data, options);
  var chart4 = new google.visualization.LineChart(document.getElementById('chart4'));
  chart4.draw(data, options);
}
    }

      </script> 
   </head> 
   <body> 
      <div class="wrapper"> 
         <div id="chart1"></div> 
         <div id="chart2"></div> 
         <div id="chart3"></div> 
         <div id="chart4"></div> 
      </div>  
   </body>
</html>

Related Tutorials