Google API Chart with dynamic data - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Google API Chart with dynamic data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Line 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="ex0"></div> 
      <script type="text/javascript">
            google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);
    function drawChart() {// w w  w  .j a v a  2  s .c o m
      var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
      data.addColumn('number', 'X');
      data.addRows([
        [new Date(2008, 0, 1), 1],
        [new Date(2008, 1, 14), 2],
        [new Date(2008, 9, 14), 12],
        [new Date(2008, 10, 14), 22],
        [new Date(2009, 1, 1), 30]
      ]);
      var options = {
        width: 1000,
        height: 563,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Popularity'
        }
      };
      var chart = new google.visualization.LineChart(
        document.getElementById('ex0'));
      chart.draw(data, options);
    }

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

Related Tutorials