Подсказка в диаграмме Google при заполнении диаграммы с использованием JSON

Question

Я заполняю свою диаграмму Google с помощью JSON в настоящее время, но мне также нужно настроить всплывающие подсказки. В настоящее время мой JSON выглядит следующим образом:

{ 
    "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"}]} 
    ] 
} 

Но если мне указать подсказку в JSON тоже так:

{ 
    "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"}]} 
    ] 
} 

Я получаю сообщение об ошибке, что все значения в серии должны быть того же типа данных.

Мой клиент сторона код выглядит следующим образом:

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); 

Пожалуйста, дайте мне знать, если кто-то знает решение.

Answer 1

Столбец всплывающей подсказки плохо определен; должно быть что-то вроде:

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

Answer 2

Расширяющегося на ответ @Marc Polizzi, некоторые типы диаграмм могут принимать данные в different roles (data, tooltip, annotation, etc). Я покажу, как заполнять через AJAX (динамически) и отображать через javascript, созданный с помощью PHP.

Это единый массив, многоколончатыми JSON набор данных (в файле PHP, который отвечает на запрос AJAX) которого слушатель называется yourAjaxListener.php, например:

$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() 
) 
); 

Какой будет генерировать выходной сигнал ниже

{"average": {"cols": [{"type": "string", "label": "Plant Variety"}, {"type": "number", "label": "Avg"} , { "типа": "номер", "метка": "Harvested_Hectares"}, { "типа": "номер", "метка": "Kilos_Harvested"}, { "типа": "номер", "метка": "Harvested_Acres"}, { "типа": "количество", "метка": "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": "Как 3575 Ipro \ n34.7 acres"}, {"v" : "139"}, {"v": "839901"}, {"v": "289269"}, {"v": 35}, {"v": 4821}, {"v": "139 bu/ас "}]}]}}

Это Javascript для вызова Ajax и отобразить вспомогательный массив average после того, как правильно получать АЯКС

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); 

Теперь я создам представление для массива, который, как вы помните, имеет 7 столбцов (начало отсчета при 0).

Первый параметр = 0 означает, что мы используем 1-й столбец по оси x. Второй параметр = 5 означает, что мы используем 6-й столбец по оси y.

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

Затем мы устанавливаем данные, которые будут отображаться в annotation это номер, напечатанный на колонке (в примере ниже = 2755, 3292 ...).

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

И, наконец, мы устанавливаем, что текст всплывающей подсказки будет, чьи данные поступают из колонны № 6 (седьмой столбец).

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

Тогда это вопрос определения, какой элемент HMTL получит диаграмму и вызвать функцию, чтобы сделать это, потребляя данные из viewSubTotalVariety и не сырой формат JSON массив данных

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

, который будет генерировать что-то как это