Combochart met JS literal

[Zass]

Voor mijn werk heb ik een combochart gemaakt die per functie weergeeft het aantal mensen per welke datum in dienst zijn gekomen. Hieronder een hypothetisch voorbeeld.

Voorbeeld:

	Datum	Aantal
Postbode	1-3-2019	2
Monteur	4-3-2019	5
Schilder	4-3-2019	2
Schilder	1-4-2019	1

Nu heb ik in PHP al een stukje geschreven dat de tabel omzet naar

var data = google.visualization.arrayToDataTable([
["Periode","1-3-2019","4-3-2019","1-4-2019"],["Postbode",2,0,0],["Monteur",0,5,0],["Schilder",0,2,1]
]);

Het liefst zou ik alleen deze data buiten de pagina willen genereren en dat moet dan blijkbaar in plaats van in dit formaat met een javascript literal gedaan worden. Ik snap de basis hiervan maar krijg op geen enkele manier dit werkbaar in een combochart. De voorbeeld literals gaan uit van 2 waarden per rij in plaats van in mijn geval 3. Als ik er drie waarden per rij van maak geeft google charts aan dat er een kolom te veel is, terwijl de hiervoor gegeven arrayToDataTable het prima doet.

Ik wil de data dus extern laden met

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

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

Zie ook https://jsfiddle.net/xpa27zfs/

[ Voor 1% gewijzigd door Zass op 01-04-2019 22:15 . Reden: programming voorbeeld aangepast ]

[Postman]

Heb je wel het juiste aantal kolommen aangemaakt in de cols: regel? Anders gaat het natuurlijk niet werken.
Dit werkt namelijk gewoon bij mij.

code:

var data = new google.visualization.DataTable({
        cols: [{id: 'period', label: 'Periode', type: 'string'},
                 {id: 'date1', label: '1-3-2019', type: 'number'},
             {id: 'date2', label: '4-3-2019', type: 'number'},
             {id: 'date3', label: '1-4-2019', type: 'number'}],
      rows: [{c:[{v: 'Postbode'}, {v: 2}, {v: 0}, {v: 0}]},
                 {c:[{v: 'Monteur'}, {v: 0}, {v: 5}, {v: 0}]},
             {c:[{v: 'Schilder'}, {v: 0}, {v: 2}, {v: 1}]}]    
    })

[Zass]

Dank je voor je antwoord. Duidelijk in hoe die literal objects werken! Daar kan ik in ieder geval mee aan de slag.

Nu de praktijk. Als ik jouw code direct in de functie zet krijg ik een linechart met de gegevens. Echter als ik het in data.json zet en laat weergeven met de $.ajax methode uit mijn startpost (de bestandsnaam heb ik aangepast naar data.json) krijg ik de volgende error:

Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 4
at JSON.parse (<anonymous>)
at gvjs_Uh (jsapi_compiled_format_module.js:209)
at new gvjs_R (jsapi_compiled_default_module.js:131)
at drawChart ((index):22)

Dus de file wordt gevonden maar wordt niet als object ingeladen omdat de inhoud niet juist is? Ik begrijp niet waarom de externe file een fout geeft maar als hardcoded variable in de functie niet.

Edit: als ik document.write(jsonData) uitvoer krijg ik de inhoud van data.json te zien.

[ Voor 5% gewijzigd door Zass op 02-04-2019 16:22 . Reden: edit ]

[Klaasvaak]

Voor valide JSON moeten de keys tussen aanhalingstekens. Ik heb geen verstand van PHP, maar de functie json_encode() zou een PHP object in valide JSON moeten omzetten.

code:

var object = {key: "value"};
var json = '{"key": "value"}';

[hellfighter87]

Je kan ook eventueel de output (inspector => network tab) door een json validator heen halen (die kan je makkelijk googleb)

[Postman]

Zonder de code van je data.json bestand te zien is het lastig om te achterhalen voor mij wat er nu precies verkeerd gaat.
En ergens krijg ik het gevoel dat de hele implementatie van je data import niet goed is. Alle voorbeelden op internet hebben namelijk een heel andere indeling.

[Zass]

JSON:

{
    cols:[
        {id: 'period', label: 'Periode', type: 'string'},
        {id: 'date1', label: '1-3-2019', type: 'number'},
        {id: 'date2', label: '4-3-2019', type: 'number'},
        {id: 'date3', label: '1-4-2019', type: 'number'}
    ],
    rows: [
        {c:[
            {v: 'Postbode'}, {v: 2}, {v: 0}, {v: 0}]},
        {c:[
            {v: 'Monteur'}, {v: 0}, {v: 5}, {v: 0}]},
        {c:[
            {v: 'Schilder'}, {v: 0}, {v: 2}, {v: 1}]}
    ]    
}

HTML:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
      
    function drawChart() {
      var jsonData = $.ajax({
          url: "data.json",
          dataType: "json",
          async: false
          }).responseText;
          
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Dit zijn beide bestanden. Code naar voorbeeld van https://developers.google...eractive/docs/php_example.
Ik heb ook naast deze versie alles ge-encapsulate met óf enkele of dubbele quotes (' en " bij alle key => value paren en rows/cols) en dit heeft ook niet geholpen. Ik krijg dan dezelfde error als eerder genoemd.

JSON:

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

Als ik de inhoud van de voorbeeld JSON code invoer krijg ik ook dezelfde foutmelding (Unexpected token c in JSON at position 4) en geen grafiek.

[Klaasvaak]

Ik denk de regeleinden. Probeer dit eens:

code:

{\
  "cols": [\
        {"id":"","label":"Topping","pattern":"","type":"string"},\
        {"id":"","label":"Slices","pattern":"","type":"number"}\
      ],\
  "rows": [\
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},\
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},\
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},\
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},\
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}\
      ]\
}

[418O2]

Die json is gewoon valide. Log het eens voor je het in je chart zet. Ik denk dat je die responseText eerst door een JSON.parse moet gooien

[Postman]

Het werkt nu wel bij mij, echter ik zie het verschil niet waarom het eerst niet heeft gewerkt.

code:

{
  "cols": [
        {"id":"","label":"Periode","type":"string"},
        {"id":"","label":"1-3-2019","type":"number"},
        {"id":"","label":"4-3-2019","type":"number"},
        {"id":"","label":"1-4-2019","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Postbode"},{"v":2},{"v":0},{"v":0}]},
        {"c":[{"v":"Monteur"},{"v":0},{"v":5},{"v":0}]},
        {"c":[{"v":"Schilder"},{"v":0},{"v":2},{"v":1}]}
      ]
}

Lijkt haast wel of die jQuery niet goed werd ingeladen en het daarom niet heeft gewerkt. Blijft altijd een nadeel om afhankelijk te zijn van bestanden die ergens anders gehost worden.

[418O2]

De oplossing hiervoor is zorgen dat je beter leert debuggen. Klinkt wat lomp, maar dan had je geweten waarom het eerst mis ging en nu niet.

[Zass]

Ik heb heel wat pagina's afgestruind, gezocht op de Google Charts developers pagina's en op verscheidene blogs. Qua debuggen ben ik op javascript niet helemaal los, zeker niet met externe libraries. PHP is dan meer mijn ding maar ik doe dit ernaast als klein projectje. Ben dus geen professional.... helaas, want dat had me een hoop tijd en frustratie bespaard .
Bedankt voor alle hulp ik ga ermee aan de slag. Heb het net werkend gekregen, kan alleen niet zeggen waarom. De JSON file is als hieronder en HTML file ongewijzigd.

Postman schreef op woensdag 3 april 2019 @ 09:05:
Het werkt nu wel bij mij, echter ik zie het verschil niet waarom het eerst niet heeft gewerkt.

code:

{
  "cols": [
        {"id":"","label":"Periode","type":"string"},
        {"id":"","label":"1-3-2019","type":"number"},
        {"id":"","label":"4-3-2019","type":"number"},
        {"id":"","label":"1-4-2019","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Postbode"},{"v":2},{"v":0},{"v":0}]},
        {"c":[{"v":"Monteur"},{"v":0},{"v":5},{"v":0}]},
        {"c":[{"v":"Schilder"},{"v":0},{"v":2},{"v":1}]}
      ]
}

Lijkt haast wel of die jQuery niet goed werd ingeladen en het daarom niet heeft gewerkt. Blijft altijd een nadeel om afhankelijk te zijn van bestanden die ergens anders gehost worden.

[ Voor 53% gewijzigd door Zass op 03-04-2019 10:12 . Reden: quote toegevoegd ]