CODEWITHSUNDEEP
javascriptjsongoogle-visualization
Chromozorz
Chromozorz

Reputation: 461

Google Charts JSON structure - what is incorrect

Appreciate any help on this one.

I am serving up JSON from my server but the data is not being displayed on my table. There are no javascript errors, suggesting an issue with my JSON(using sample data in the JS function works...).

Here is the JSON;

    {
        "cols": [
            {"label": "month","type": "string"},
            {"label": "date","type": "date"},
            {"label": "amount","type": "number"},
            {"label": "extype","type": "string"},
            {"label": "claimed","type": "boolean"}
        ],
        "rows": [
            {"c":["2016-10","2016-10-01",{"v":38.09,"f":"$38.09"},"Dinner",true]},
            {"c":["2016-10","2016-10-02",{"v":30.07,"f":"$30.07"},"Lunch",true]},
            {"c":["2016-10","2016-10-03",{"v":44.7,"f":"$44.7"},"Dinner",true]}
        ]
    }

Here is my javascript function used to render the table. The JSON above is passed to the function as dataset

    function drawTable(dataset,options){
        'use strict';
        var data = new google.visualization.DataTable(dataset);
        var cssClassNames = {
            'tableRow': '',
            'hoverTableRow': '',
            'headerCell': 'd',
            'tableCell': ''};
        options.cssClassNames = cssClassNames;
        var table = new google.visualization.Table(document.getElementById('tableChart'));
        table.draw(data, options);
    }

Here is the output as rendered (note only the amount shows);

Table Issue

Upvotes: 1

Views: 42

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

first, each column should be defined using object notation, similar to the amount column 

{"c":[{"v":"2016-10"},{"v":"Date(2016, 9, 1)"},{"v":38.09,"f":"$38.09"},{"v":"Dinner"},{"v":true}]}

next, for the second column to be an actual date, the format will need to change...

from --> "2016-10-01"

to --> "Date(2016, 9, 1)"

note: months are zero based using this approach (9 = October)

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var jsonData = {
      "cols": [
        {"label": "month","type": "string"},
        {"label": "date","type": "date"},
        {"label": "amount","type": "number"},
        {"label": "extype","type": "string"},
        {"label": "claimed","type": "boolean"}
      ],
      "rows": [
        {"c":[{"v":"2016-10"},{"v":"Date(2016, 9, 1)"},{"v":38.09,"f":"$38.09"},{"v":"Dinner"},{"v":true}]},
        {"c":[{"v":"2016-10"},{"v":"Date(2016, 9, 2)"},{"v":30.07,"f":"$30.07"},{"v":"Lunch"},{"v":true}]},
        {"c":[{"v":"2016-10"},{"v":"Date(2016, 9, 3)"},{"v":44.7,"f":"$44.7"},{"v":"Dinner"},{"v":true}]}
      ]
    };

    var data = new google.visualization.DataTable(jsonData);
    var table = new google.visualization.Table(document.getElementById('tableChart'));
    table.draw(data);
  },
  packages:['table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="tableChart"></div>

Upvotes: 1

Related Questions