Knopinfo in Google Chart tijdens het vullen van diagram met JSON

Ik vul mijn Google-diagram momenteel met JSON, maar ik moet ook knopinfo aanpassen. Momenteel ziet mijn JSON er zo uit:

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

Maar als ik mijn tooltip ook in de JSON specificeer:

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

Ik krijg een foutmelding dat alle waarden in reeksen van hetzelfde gegevenstype moeten zijn.

Mijn client-side code ziet er zo uit:

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

Laat het me weten als iemand de oplossing kent.

1

2 antwoord

De kolominfo is slecht gedefinieerd; zou iets moeten zijn als:

{"id": "", "role": "tooltip", "type": "string", "p" : { "role" : "tooltip" } }   
4
toegevoegd
Goed om te weten; accepteer de reactie ;-)
toegevoegd de auteur Marc Polizzi, de bron
Bedankt dat je me in de goede richting wijst. Ik heb je antwoord een beetje uitgebreid. Ik zou het op prijs stellen als je het zou bekritiseren. GEAVANCEERD :)
toegevoegd de auteur tony gil, de bron
Hallo, ja het werkte :-) bedankt
toegevoegd de auteur Smriti, de bron

Uitbreiding op het antwoord van @Marc Polizzi, sommige grafiektypen kunnen gegevens accepteren in verschillende rollen (gegevens, tooltip, annotatie, enz.) . Ik zal laten zien hoe te vullen via AJAX (dynamisch) en weergeven via javascript, gebouwd met PHP.

Dit is een array JSON-dataset met meerdere kolommen (in het php-bestand dat antwoordt op het AJAX-verzoek) wiens listener yourAjaxListener.php wordt genoemd, bijvoorbeeld:

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

Die de onderstaande output zal genereren

{"gemiddeld": {"cols": [{"type": "string", "label": "Plant Variety"}, {"type": "number", "label": "Avg"} , { "type": "nummer", "label": "Harvested_Hectares"}, { "type": "nummer", "label": "Kilos_Harvested"}, { "type": "nummer", "label": "Harvested_Acres"}, { "type": "nummer", "label": "Bushels_Harvested"}, { "type": "nummer", "label": "Tooltip"}], "rijen": [{ "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"}]}]}}

Dit is het JavaScript om ajax te bellen en de subarray average weer te geven nadat AJAX correct is ontvangen

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

Nu maak ik een weergave voor de array die, zoals je je herinnert, 7 kolommen heeft (begin met tellen bij 0).

De eerste parameter = 0 betekent dat we de eerste kolom op de x-as gebruiken. De tweede parameter = 5 betekent dat we de 6de kolom op de y-as gebruiken.

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

Vervolgens stellen we de gegevens vast die worden weergegeven in de annotatie die het nummer is dat op de kolom is afgedrukt (in het onderstaande voorbeeld = 2755, 3292 ...).

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

En tot slot bepalen we wat de tooltip-tekst zal zijn, waarvan de gegevens afkomstig zijn van kolom nummer 6 (7e kolom).

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

Vervolgens is het een kwestie van bepalen welk HMTL-element het diagram zal ontvangen en de functie zal gebruiken om het te tekenen, waarbij het gegevens uit viewSubTotalVariety gebruikt en niet de onbewerkte 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

0
toegevoegd