Create Google Area-chart for last twenty four hours - Javascript Google Chart

Javascript examples for Google Chart:Area Chart

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

Description

Create Google Area-chart for last twenty four hours

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Area Chart Example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
      <div id="chart_div" style="width: 900px; height: 500px;"></div> 
      <script type="text/javascript">
      google.setOnLoadCallback(drawChart);
      function drawChart() {/*from  w ww  .  j  ava2s.com*/
     var data = google.visualization.arrayToDataTable([
          ['Hour', 'Activites', 'Responses'],
          ['-24h',  8000,      400],
          ['-16h',  1170,      460],
          ['-12h',  660,       1120],
          ['-8h',  1030,      540],
          ['-4h',  1030,      540],
          ['now',  1030,      540]
        ])
     for (var i = 0; i < data.getNumberOfRows(); i++) {
         for(var j=1;j<data.getNumberOfColumns();j++){
            var dataPoint = data.getValue(i, j);
            data.setValue(i, j, dataPoint / 1000);
            data.setFormattedValue(i, j, dataPoint.toString());
         }
      }
            var options = {
              title: 'Company Performance',
              hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
              vAxis: {minValue: 0},
                vAxis: {format: "#,###k"}
            };
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

      </script>  
   </body>
</html>

Related Tutorials