Google Charts to Show Data Point Values in Line Chart - Javascript Google Chart

Javascript examples for Google Chart:Line Chart

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

Description

Google Charts to Show Data Point Values in 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', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
    function drawChart() {//from w ww  .j  a  va  2  s .  c  om
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Payout Ratio'],
          ['2004',  1.2],
          ['2005',  -0.25],
          ['2006',  2.5],
          ['2007',  5.8]
        ]);
        var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },]);
      var options = {
        title: 'Payout Ratio',
        backgroundColor: '#fafbfc',
        colors: ['#3073b5'],
        pointSize: 5,
      };
        var chart = new google.visualization.LineChart(document.getElementById("payout_ratio"));
        chart.draw(view, options);
    }

      </script> 
   </head> 
   <body> 
      <div id="payout_ratio" style="width: 500px; height: 300px"></div>  
   </body>
</html>

Related Tutorials