Tooltip in Google Chart while populating chart using JSON

Question

I am populating my Google chart using JSON currently, but I need to customize tooltips as well. Currently my JSON looks like this:

{
    \"cols\": [
                


        

Answer 1

Expanding on @Marc Polizzi's answer, some chart types can accept data in different roles (data, tooltip, annotation, etc). I will show how to populate via AJAX (dynamically) and display via javascript, built with PHP.

This is a single array, multicolumn JSON dataset (in the php file that answers to the AJAX request) whose listener is called yourAjaxListener.php, for instance:

$grafico = array(
 'average' => array(
    'cols' => array(
        array('type' => 'string', 'label' => 'Plant Variety'),
        array('type' => 'number', 'label' => 'Avg'),
        array('type' => 'number', 'label' => 'Harvested_Hectares'),
        array('type' => 'number', 'label' => 'Kilos_Harvested'),
        array('type' => 'number', 'label' => 'Harvested_Acres'),
        array('type' => 'number', 'label' => 'Bushels_Harvested'),
        array('type' => 'number', 'label' => 'Tooltip')
    ),  
    'rows' => array()
 )
);

Which will generate the output below

{"average":{"cols":[{"type":"string","label":"Plant Variety"},{"type":"number","label":"Avg"},{"type":"number","label":"Harvested_Hectares"},{"type":"number","label":"Kilos_Harvested"},{"type":"number","label":"Harvested_Acres"},{"type":"number","label":"Bushels_Harvested"},{"type":"number","label":"Tooltip"}],"rows":[{"c":[{"v":"Mon 6210 Ipro\n18 acres"},{"v":"153"},{"v":"435996"},{"v":"165280"},{"v":18},{"v":2755},{"v":"153 bu/ac"}]},{"c":[{"v":"Tmg 7062 Ipro\n21.9 acres"},{"v":"150"},{"v":"529600"},{"v":"197537"},{"v":22},{"v":3292},{"v":"150 bu/ac"}]},{"c":[{"v":"Bmx Potencia RR\n15.2 acres"},{"v":"141"},{"v":"367527"},{"v":"128179"},{"v":15},{"v":2136},{"v":"141 bu/ac"}]},{"c":[{"v":"As 3575 Ipro\n34.7 acres"},{"v":"139"},{"v":"839901"},{"v":"289269"},{"v":35},{"v":4821},{"v":"139 bu/ac"}]}]}}

This is the javascript to call ajax and display the sub array average after properly receiving AJAX

function drawChart() {  
 var jsonDataVariety = $.ajax({
      url: "/yourpath/yourAjaxListener.php",
      dataType: "json",
      async: false
      }).responseText;
 var jsonVariety = eval("(" + jsonDataVariety + ")");
 var jsonSubTotalVariety = new google.visualization.DataTable(jsonVariety.average);

Now i will create a view for the array which, as you remember has 7 columns (start counting at 0).

The first parameter = 0 means that we use 1st column on the x axis. The second parameter = 5 means that we use 6th column on the y axis.

 var viewSubTotalVariety = new google.visualization.DataView(jsonSubTotalVariety);
 viewSubTotalVariety.setColumns([0, 5,

Then we establish the data that will be displayed in the annotation that's the number printed on the column (in the example below = 2755, 3292...).

                   { calc: "stringify",
                     sourceColumn: 5,
                     type: "string",
                     role: "annotation" },

And finally we establish what the tooltip text will be, whose data comes from column number 6 (7th column).

                   { sourceColumn: 6,
                     type: "string",
                     role: "tooltip" }]);

Then it is a matter of determining which HMTL element will receive the chart and calling the function to draw it, consuming data from viewSubTotalVariety and not the raw JSON dataset

 var chart7 = new google.visualization.ColumnChart(document.getElementById('bar7_div'));
 chart7.draw(viewSubTotalVariety, optionsSubTotalVariety);
}

which would generate something like this

Answer 2

The tooltip column is badly defined; should be something like :

{"id": "", "role": "tooltip", "type": "string", "p" : { "role" : "tooltip" } }