Create Google Charts Values With AJAX - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Create Google Charts Values With AJAX

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> 
      <script type="text/javascript">
    window.onload=function(){//from w w  w .j  a  v a  2  s  .  c  o  m
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart () {
     var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
      var options = {
      animation: {duration: 1000, easing: 'out', "startup": true},
      vAxis: {minValue: 0},
      pointSize: 4,
      pointShape: 'circle'
      };
       var resultantAjaxResponse="['Date', 'This month', 'Last month'],['2016-10-01', 0, 0],['2016-10-02', 0, 0],['2016-10-03', 0, 0],['2016-10-04', 0, 0],['2016-10-05', 0, 0],['2016-10-06', 0, 0],['2016-10-07', 0, 0],['2016-10-08', 0, 0],";
     resultantAjaxResponse=resultantAjaxResponse.replace(/'/g, '"').replace(/,\s*$/g, '');
     var arr = JSON.parse("[" + resultantAjaxResponse + "]");
     chart.draw(google.visualization.arrayToDataTable(arr), options);
  }
    }

      </script> 
   </head> 
   <body> 
      <div id="chart_div"> 
      </div>  
   </body>
</html>

Related Tutorials