Pocketquery: how to display a bar chart with annotations on bars

[Stefano Coletta]

From the official Google docs about Google Charts I see in the example "Density of Precious Metals, in g/cm^3" I can annotate the value of the bars at its end by adding

var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

And then pass view at the draw() function.

My current code to display a bar is simple as:

<script>
PocketQuery.chart('BarChart', {
  height: 700,
  chartArea: {
    height: '100%',
    width: '50%'
  }
});
</script>

How can I add annotations like that by using PocketQuery? Which is the correct call?

Thank you for any help.

[Felix Grund (Scandio)]

Hi Stefano,

Sorry for the late reply! In your case, you need to manipulate the data array for the charts. You can achieve this that way:

<script>
(function() {
    // Create a new data table object in which the first row already contains
    // the table headers.
    var dataTable = [['col1', 'col2', {role: 'style'}]];
     
    // Iterate through the PocketQuery result and add the values to the data table. You can do arbitrary manipulations with the data before.
    jQuery.each(PocketQuery.queryArray(), function(index, row) {
        dataTable.push([row.col1, row.col2, '#ccc']);
    });
 
    PocketQuery.chart('AnnotationChart', {dataTable: dataTable});
}());
</script>

You should try around in your developer tools and the JS debugger to dig more into this surrounding. Let me know if you need further help!

Regards, Felix [Scandio]