David Eisen David Eisen - 4 months ago 82
Ajax Question

Google Charts LineChart Permanent Annotations Above Points using Ajax and JS

I am racking my brain trying to understand how to do Ajax with Annotations in a Line Chart from Google Charts. I am looking for the numbers to sit direct above each point.

Information provided by grab_twitter_stats.php

[15, 194, 194],[14, 169, 169],[13, 155, 155],[12, 185, 185],[11, 154, 154],[10, 154, 154],[9, 135, 135],[8, 176, 176],[7, 193, 193],[6, 198, 198],[5, 185, 185],[4, 204, 204],[3, 219, 219],[2, 254, 254],[1, 230, 230],


Google Graphs Code:

<script type="text/javascript">

google.charts.load('current', {
callback: function () {
drawChart();
setInterval(drawChart, (20000));

function drawChart() {
$.ajax({
url: 'grab_twitter_stats.php',
type: 'get',
success: function (txt) {
// check for trailing comma
if (txt.slice(-1) === ',') {
txt = txt.substring(0, txt.length - 1);
}
var txtData = JSON.parse('[["Minutes", "Tweets", ""],' + txt + ']');
;

var data = google.visualization.arrayToDataTable(txtData);
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'string', role: 'annotation'});
//alert(data);
var options = {
curveType: 'function',
hAxis: {
format: '#',
baseline:15,
direction: '-1',
textStyle: {
color: '#7acdd0',
fontSize: 20
},
gridlines: {
color: 'transparent'
},
viewWindow:{
max:15,
min:1
},
},
vAxis: {
baseline:0,
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#7acdd0',
fontSize: 20
}
},
pointSize: 15,
chartArea: {'width': '89%', 'height': '65%'},
pointShape: 'circle',
lineWidth: 5,
colors: ['#7acdd0'],
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#871b47', // The color of the text.
auraColor: '#d799ae', // The color of the text outline.
opacity: 0.8 // The transparency of the text.
}
},
legend: { position: 'none' }
};

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
},
packages: ['corechart']
});

</script>


The end display looks something like this:
Google Chart

You can also see here that ToolTips are working, but it provides the name for whatever I set the 3rd item to in JSON.parse.

Google Chart with Tooltips

What am I missing? Thanks.

Answer

need to adjust how the DataTable is built


currently, the table is created using arrayToDataTable

var txtData = JSON.parse('[["Minutes", "Tweets", ""],' + txt + ']');
var data = google.visualization.arrayToDataTable(txtData);

this creates the table with 3 columns and all the rows

then 3 more columns are added

data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'string', role: 'annotation'});

but no data is ever provided to these columns


instead, create a blank table, then add the columns and rows...

var txtData = JSON.parse('[' + txt + ']');

var data = new google.visualization.DataTable();
data.addColumn('number', 'Minutes');
data.addColumn('number', 'Tweets');
data.addColumn({type: 'number', role: 'annotation'});
data.addRows(txtData);

be sure to remove the column definitions from txtData
also, for the annotation, you should probably use --> type: 'number'
or change the type in the array being passed --> [15, 194, "194"]


see following working snippet...
(using static data but will translate back to ajax just the same)

google.charts.load('current', {
  callback: function () {
    var txt = "[15, 194, 194],[14, 169, 169],[13, 155, 155],[12, 185, 185],[11, 154, 154],[10, 154, 154],[9, 135, 135],[8, 176, 176],[7, 193, 193],[6, 198, 198],[5, 185, 185],[4, 204, 204],[3, 219, 219],[2, 254, 254],[1, 230, 230]";
    var txtData = JSON.parse('[' + txt + ']');

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Minutes');
    data.addColumn('number', 'Tweets');
    data.addColumn({type: 'number', role: 'annotation'});
    data.addRows(txtData);

    var options = {
      curveType: 'function',
      hAxis: {
      format: '#',
      baseline:15,
        direction: '-1',
          textStyle: {
              color: '#7acdd0',
              fontSize: 20
          },
        gridlines: {
              color: 'transparent'
          },
        viewWindow:{
              max:15,
              min:1
          },
      },
      vAxis: {
          baseline:0,
          gridlines: {
              color: 'transparent'
          },
          textStyle: {
              color: '#7acdd0',
              fontSize: 20
          }
      },
      pointSize: 15,
      chartArea: {'width': '89%', 'height': '65%'},
      pointShape: 'circle',
      lineWidth: 5,
      colors: ['#7acdd0'],
      annotations: {
          textStyle: {
            fontName: 'Times-Roman',
            fontSize: 18,
            bold: true,
            italic: true,
            color: '#871b47',     // The color of the text.
            auraColor: '#d799ae', // The color of the text outline.
            opacity: 0.8          // The transparency of the text.
          }
        },
      legend: { position: 'none' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>