Execute Google Chart API - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

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

Description

Execute Google Chart API

Demo Code

ResultView the demo in separate window 

<html>
   <head></head>
   <body> 
      <script src="canvas2html.js"></script> 
      <div id="chart_div"></div> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
  
      </script> 
      <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart']
    });/*from  w w  w. ja v a 2 s  .c om*/
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2013', 1000, 400],
        ['2014', 1170, 460],
        ['2015', 660, 1120],
        ['2016', 1030, 540]
      ]);
      var options = {
        title: 'Company Performance',
        hAxis: {
          title: 'Year',
          titleTextStyle: {
            color: '#333'
          }
        },
        vAxis: {
          minValue: 0
        }
      };
      var chart = new google.visualization
                 .AreaChart(document.getElementById('chart_div'));
      chart.draw(data, options);
      html2canvas(document.getElementById('chart_div'))
        .then(function(canvas) {
             var dataURL = canvas.toDataURL();
        })
    }
  
      </script>  
   </body>
</html>

Related Tutorials