Google Charts API: Show Data Point Values in Line Chart

1
votes

I'm pretty new to PHP and was given a project that uses Google Visualization. In the code below, how do I permanently display the data values and data points on the line chart?

Things I've tried: 1. Setting pointSize to some value 2. Setting dataOpacity to 1 3. Adding this annotation column <? php echo {type: 'string', role: 'annotation'} ?>, as suggested here: Google Charts API: Always show the Data Point Values using arrayToDataTable. How? but gota server error instead. I'm probably doing this wrong.

Appreciate your help. Thanks!

function drawChart() {

    var data = google.visualization.arrayToDataTable([
        ['Year', 'Payout Ratio'],
        [<?php echo json_encode(date('Y', strtotime('-1 year'))); ?>,  <?php echo json_encode($oneYearAgoPayoutRatio); ?>],
        [<?php echo json_encode(date('Y', strtotime('-2 year'))); ?>,  <?php echo json_encode($twoYearsAgoPayoutRatio); ?>],
        [<?php echo json_encode(date('Y', strtotime('-3 year'))); ?>,  <?php echo json_encode($threeYearsAgoPayoutRatio); ?>],
        [<?php echo json_encode(date('Y', strtotime('-4 year'))); ?>,  <?php echo json_encode($fourYearsAgoPayoutRatio); ?>],
        [<?php echo json_encode(date('Y', strtotime('-5 year'))); ?>,  <?php echo json_encode($fiveYearsAgoPayoutRatio); ?>]
    ]);

  var options = {
    chart: {
      title: 'Payout Ratio',
    },
    backgroundColor: '#fafbfc',
    colors: ['#3073b5'],
  };

  var chart = new google.charts.Line(document.getElementById('payout_ratio'));

  chart.draw(data, google.charts.Line.convertOptions(options));
}
2
javascriptphpchartsgoogle-visualization
What exactly is the problem? Do you struggle to get the proper data aggregated or get the proper data visualized properly? – Nico Haase
A good way to debug an error is to analyze the error message. Could you tell us which error you get? – PaulH
you're using a Material line chart (google.charts.Line) vs. a Classic (google.visualization.LineChart) -- there are a number of options that are not supported by Material, including pointSize & dataOpacity, as well as column roles (annotations), see --> Tracking Issue for Material Chart Feature Parity... – WhiteHat

2 Answers

3
votes

After some experimentation, it seems that Material Line Chart does not support annotations at the moment. Have updated my code to use the Classic Line Chart instead and followed @asgallant suggestion in Google Charts API: Always show the Data Point Values using arrayToDataTable. How? to use a DataView. 

<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() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Payout Ratio'],
          ['2004',  1.2],
          ['2005',  -0.25],
          ['2006',  2.5],
          ['2007',  5.8]
        ]);
        
        // Use view to show annotation
        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'],
        // Display data point
        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>
0
votes

Your annotation column should look like this according to the source you posted.

You posted:

<? php echo {type: 'string', role: 'annotation'} ?>

Example was:

[/* column headers */, {type: 'string', role: 'annotation'}, /* column headers */]

Also that is js so you don't need to echo it out in the php.

So that section of your code block would look like this:

var data = google.visualization.arrayToDataTable([
    [/* column headers */, {type: 'string', role: 'annotation'}, /* column headers */],        
    ['Year', 'Payout Ratio'],
    [<?php echo json_encode(date('Y', strtotime('-1 year'))); ?>,  <?php echo json_encode($oneYearAgoPayoutRatio); ?>],
    [<?php echo json_encode(date('Y', strtotime('-2 year'))); ?>,  <?php echo json_encode($twoYearsAgoPayoutRatio); ?>],
    [<?php echo json_encode(date('Y', strtotime('-3 year'))); ?>,  <?php echo json_encode($threeYearsAgoPayoutRatio); ?>],
    [<?php echo json_encode(date('Y', strtotime('-4 year'))); ?>,  <?php echo json_encode($fourYearsAgoPayoutRatio); ?>],
    [<?php echo json_encode(date('Y', strtotime('-5 year'))); ?>,  <?php echo json_encode($fiveYearsAgoPayoutRatio); ?>]
]);