1

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

{
    "cols": [
        {"id": "", "label": "date", "type": "string"},
        {"id": "", "label": "price", "type": "number"}
    ],
    "rows": [
        {"c":[{"v": "Apr 24th","f":null}, {"v": 56000,"f":"56000"}]},
        {"c":[{"v": "May 3rd","f":null}, {"v": 68000,"f":"68000"}]},
        {"c":[{"v": "May 13th","f":null}, {"v": 50400,"f":"50400"}]}
    ]
}

But if I specify my tooltip in the JSON too like this:

{
    "cols": [
        {"id": "", "label": "Date", "type": "string"},
        {"id": "", "label": "price", "type": "number"},
        {"id": "", "role": "tooltip", "type": "string"}
    ],
    "rows": [
        {"c":[{"v": "Apr 24th","f":"null"}, {"v": 56000,"f":"56000"}, {"v": "24 April, Price - 56000, Seller-abcd"}]},
        {"c":[{"v": "May 3rd","f":"null"}, {"v": 68000,"f":"68000"}, {"v": "3 May, Price - 68000, Seller-abcd"}]},
        {"c":[{"v": "May 13th","f":"null"}, {"v": 50400,"f":"50400"}, {"v": "23 May, Price - 50000, Seller-abcd"}]}
    ]
}

I get an error that all values in series should be of same data type.

My client side code looks like this:

var jsonData = $.ajax({
    url: '../phps/testPhp.php',
    dataType:"json",
    async: false
}).responseText;

var dataTable = new google.visualization.DataTable(jsonData);

var minVal = 50000;
var maxVal = 70000;    

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

var options = {
    width: 375, height: 240,
    legend: 'none',
    pointSize: 5,
    backgroundColor: 'transparent',
    vAxis: { minValue: 45000, maxValue: 70000 }
};

chart.draw(dataTable, options);

Please let me know if someone knows the solution.

2 Answers 2

4

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

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

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 bar chart production bushels

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.