Increase length of y-axis in Google LIne Charts - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Increase length of y-axis in Google LIne Charts

Demo Code

ResultView the demo in separate window 

<!--/*from   w w  w .  ja va  2s .  co m*/
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
   <head> 
      <meta name="viewport" content="width=device-width"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <style>

#curve_chart {
   width: 200px;
}

      </style> 
   </head> 
   <body> 
      <div id="test"> 
         <div id="curve_chart"></div> 
         <br> 
         <div id="curve_chart2"></div> 
         <div> 
            <script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
function drawChart() {
 var data3 = google.visualization.arrayToDataTable([
    ['Day', 'Sales','exp'],
    ['4-APRIL-16', 1000,200],
    ['5-APRIL-16', 1170,300],
    ['6-APRIL-16', 660,400],
    ['7-APRIL-16', 1030,500],
    ['8-APRIL-16', 60,4100],
    ['9-APRIL-16', 130,5020],
    ['10-APRIL-16', 60,4100],
    ['11-APRIL-16', 130,5020],
  ]);
 var options3 = {
   title: 'Company Performance',
   curveType: 'function',
   legend: {
    position: 'bottom'
  }
};
  var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart3.draw(data3, options3);
  var options4 = {
    title: 'Company Performance',
    curveType: 'function',
    height: 400,
    width: 500,
    legend: {
    position: 'bottom'
        }
    };
  var chart4 = new google.visualization.LineChart(document.getElementById('curve_chart2'));
  chart4.draw(data3, options4);
}

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

Related Tutorials