Search code examples
javascriptjsonchartsgoogle-visualization

Google Charts {c:[v: new Date()]} fails on "JSON.parse" in jsapi_compiled_default_module.js


The Google Charts documentation states that new Date() can be used as a value and that you can load data from remote sources.
Documentation: https://developers.google.com/chart/interactive/docs/reference#format-of-the-constructors-javascript-literal-data-parameter
See the 'cols Property' section: 'datetime' - JavaScript Date object including the time.
Example value: v:new Date(2008, 0, 15, 14, 30, 45)
The example also contains a new Date() value: {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}

Using this example from Google I load the data and populate the graph: https://developers.google.com/chart/interactive/docs/php_example

Using a JSON file without new Date works fine and the Graph gets drawn ok:

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

Using a JSON file WITH new Date returns an error, even when it is not 'JSON data'. Data Used:

{ cols: [
        {id: 'A', label: 'Datum', type: 'datetime'},
        {id: 'B', label: 'Watt', type: 'number'}
    ],
    rows: [
        {c:[{v: new Date(2021,10,28,19,01,00)},{ v: 2014 }]},{c:[{v: new Date(2021,10,28,19,02,00)},{ v: 1810 }]},{c:[{v: new Date(2021,10,28,19,03,00)},{ v: 1880 }]},{c:[{v: new Date(2021,10,28,19,04,00)},{ v: 1815 }]},{c:[{v: new Date(2021,10,28,19,05,00)},{ v: 1837 }]},{c:[{v: new Date(2021,10,28,19,06,00)},{ v: 1812 }]},{c:[{v: new Date(2021,10,28,19,07,00)},{ v: 1786 }]},{c:[{v: new Date(2021,10,28,19,08,00)},{ v: 1785 }]},{c:[{v: new Date(2021,10,28,19,09,00)},{ v: 1767 }]},{c:[{v: new Date(2021,10,28,19,10,00)},{ v: 1740 }]},{c:[{v: new Date(2021,10,28,19,11,00)},{ v: 1741 }]},{c:[{v: new Date(2021,10,28,19,12,00)},{ v: 1710 }]},{c:[{v: new Date(2021,10,28,19,13,00)},{ v: 1696 }]},{c:[{v: new Date(2021,10,28,19,14,00)},{ v: 1742 }]},{c:[{v: new Date(2021,10,28,19,15,00)},{ v: 1670 }]},{c:[{v: new Date(2021,10,28,19,16,00)},{ v: 1691 }]},{c:[{v: new Date(2021,10,28,19,17,00)},{ v: 1723 }]},{c:[{v: new Date(2021,10,28,19,18,00)},{ v: 1713 }]},{c:[{v: new Date(2021,10,28,19,19,00)},{ v: 1694 }]},{c:[{v: new Date(2021,10,28,19,20,00)},{ v: 1693 }]},{c:[{v: new Date(2021,10,28,19,21,00)},{ v: 1686 }]},{c:[{v: new Date(2021,10,28,19,22,00)},{ v: 1689 }]},{c:[{v: new Date(2021,10,28,19,23,00)},{ v: 1707 }]},{c:[{v: new Date(2021,10,28,19,24,00)},{ v: 1778 }]},{c:[{v: new Date(2021,10,28,19,25,00)},{ v: 1755 }]},{c:[{v: new Date(2021,10,28,19,26,00)},{ v: 1774 }]},{c:[{v: new Date(2021,10,28,19,27,00)},{ v: 1739 }]},{c:[{v: new Date(2021,10,28,19,28,00)},{ v: 1731 }]},{c:[{v: new Date(2021,10,28,19,29,00)},{ v: 1707 }]},{c:[{v: new Date(2021,10,28,19,30,00)},{ v: 1735 }]}
    ]
}

Error in Chrome & Firefox:

Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 2
    at JSON.parse (<anonymous>)
    at gvjs_Li (jsapi_compiled_default_module.js:171)
    at new gvjs_M (jsapi_compiled_default_module.js:283)
    at (index):183

Line 171 in https://www.gstatic.com/charts/51/js/jsapi_compiled_default_module.js uses a "JSON.parse(a)" parse method and this fails because new Date() is not valid json.

The javascript i'm using does not load the data as JSON:

getRAW("youless/?a=h").then(response => {
    console.log( response )
    var data = new google.visualization.DataTable(response);
    chart = new google.visualization.LineChart(document.getElementById('powerChartHour'));
    var options = {title: 'W00t'};
    chart.draw(data, options);
})

If I load it as JSON I get the same error:

const getJSON = async url => {
    const response = await fetch(url, { method: 'GET' });
    if(!response.ok)
        throw new Error(response.statusText);
    const data = response.json();
    return data;
}

Conclusion: The documenation is incorrect or incomplete. Or I'm doing something wrong (probably).


Solution

  • see --> dates and times using the date string representation

    basically, if you're passing JSON to the data table constructor,
    for dates, simply pass the date as a string while dropping the new keyword...

    { cols: [
            {id: "A", label: "Datum", type: "datetime"},
            {id: "B", label: "Watt", type: "number"}
        ],
        rows: [
            {c:[{v: "Date(2021,10,28,19,01,00)"},{ v: 2014 }]}
        ]
    }
    

    see following working snippet...

    google.charts.load('current', {
      packages: ['table']
    }).then(function() {
      var data = new google.visualization.DataTable({
        cols: [{id: "A", label: "Datum", type: "datetime"},
          {id: "B", label: "Watt", type: "number"}
        ],
        rows: [
          {c: [{v: "Date(2021,10,28,19,01,00)"}, {v: 2014}]}
        ]
      });
    
      var table = new google.visualization.Table(document.getElementById('table_div'));
      table.draw(data);
    });
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="table_div"></div>