Tooltip in Google Chart while populating chart using JSON

问题

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.

回答1:

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

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

回答2:

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

来源：https://stackoverflow.com/questions/11174562/tooltip-in-google-chart-while-populating-chart-using-json

标签

google-visualization