Zoom Google Line chart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Zoom Google Line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
         google.charts.load('current', {
            callback: function () {
               drawChart();//www .j  a v a  2 s .  c  o  m
               window.addEventListener('resize', drawChart, false);
            },
            packages:['corechart']
         });
         function drawChart() {
            var data = google.visualization.arrayToDataTable([
               ['Year', 'Sales', 'Expenses', 'Profit'],
               ['2014', 1000, 400, 200],
               ['2015', 1170, 460, 250],
               ['2016', 660, 1120, 300],
               ['2017', 1030, 540, 350]
            ]);
            var options = {
               animation:{
                  duration: 1000,
                  easing: 'linear',
                  startup: true
               },
               height: 600,
               width: window.innerWidth,
               theme: 'material',
               title: 'Company Performance'
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
            chart.draw(data, options);
         }
      
      </script> 
   </head> 
   <body> 
      <div id="columnchart_material" style="height: 500px; "></div>  
   </body>
</html>

Related Tutorials