Load google line charts - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Load google line charts

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>  murali</title> 
   </head> 
   <body translate="no"> 
      <div id="columnchart_material">
         <div class="preloader">
            &nbsp;/*www. ja  va2  s  .co m*/
         </div>
      </div> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['corechart']
            }]
          }">

      </script> 
      <script>
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([['Exam Name','English Percentage','Highest English Percentage '],['5-FA1', 100, 100],['5-FA2', 100, 100],['5-SA1', 58, 95],['5-FA3', 70, 100],]);
        var options={
            curveType:'function',
            width: 500, height: 250,
            pointSize: 5,
legend: {position: 'right'},
            tooltip: {isHtml: true },
chartArea: {left:60, width: 330,right:110} ,
            hAxis: {title: 'Exam name',direction:1, slantedText:true,slantedTextAngle:25},
            vAxis: {
          title: 'in percentage', viewWindow: {
        min: 0,
        max: 110
    },gridlines:{color: '#333', count: 10},
    ticks: [0, 25, 50, 75, 100,110],
textStyle:{color: '#005500',fontSize: '12',paddingLeft: '60',marginLeft: '60'}
        },
            series: {0:{color: 'black', areaOpacity: 0.0, lineWidth: 2},
            1:{color: 'red', areaOpacity: 0.0, lineWidth: 2}}
            };
         var chart = new google.visualization.LineChart(document.getElementById('columnchart_material'));
            options.title='English'
            options.series[1].lineWidth = 0;
        chart.draw(data,options );}
      </script>  
   </body>
</html>

Related Tutorials