Create Data Table with JSON in Google Charts

Question

I have a hardcoded JSON object that I'm passing to google.visualization.DataTable() to create the data table object, but something appears to be going wrong. I get a JS error caught in the visualization api: "Uncaught TypeError: undefined is not a function". Here is the JSON data:

var jsonData = {
    cols: [
        {id: 'date', label: 'Sample Date', type: 'date'},
        {id: 'countervalue', label: 'Counter Value', type: 'number'}
    ],

    rows: [
        {c: [ {v: Date(2014, 4, 30, 10, 30, 0)}, {v: 2457.0} ] },
        {c: [ {v: Date(2014, 4, 30, 10, 30, 15)}, {v: 2458.0} ] },
        {c: [ {v: Date(2014, 4, 30, 10, 30, 30)}, {v: 2459.0} ] },
        {c: [ {v: Date(2014, 4, 30, 10, 30, 45)}, {v: 2452.0} ] },
        {c: [ {v: Date(2014, 4, 30, 10, 31, 0)}, {v: 2451.0} ] },
        {c: [ {v: Date(2014, 4, 30, 10, 31, 15)}, {v: 2443.0} ] },
        {c: [ {v: Date(2014, 4, 30, 10, 31, 30)}, {v: 2444.0} ] }
    ]
};

And this is where is appears to be blowing up:

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

Here's a JSFiddle of the solution: http://jsfiddle.net/jcaine04/3PJph/2/

FYI, this is not a JSON object, this is a normal JavaScript object. Your question has nothing to do with JSON, so I would advice to update it accordingly. — Felix Kling
– Felix Kling, Commented May 7, 2014 at 19:08
This solution will eventually call a web service that returns JSON, but for testing purposes I'm hardcoding this value. So I'm not going to remove the JSON relevancy of this question. EDIT: Here's a link of what I'm trying to recreate: google-developers.appspot.com/chart/interactive/docs/… — jcaine04
– jcaine04, Commented May 7, 2014 at 19:26
I tried using google.visualization.DataTable(JSON.stringify(jsonData)) and I still get the same result. — jcaine04
– jcaine04, Commented May 7, 2014 at 19:29

juvian · Accepted Answer · 2014-05-07 19:30:30Z

2

Code works fine, you just need to change:

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

To:

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

Also, change in jsfiddle from onLoad to noWrap , if not drawChart() will not execute. Lastly, when you fix that it will throw you google error of: Pie chart should have a first column of type string×

answered May 7, 2014 at 19:30

juvian

16.1k2 gold badges42 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jcaine04 Over a year ago

Thanks for the help. The PieChart was a copy/paste error and I'm actually using a LineChart. I still get a google error of undefined is not a function though. I updated the jsfiddle to show that: jsfiddle.net/jcaine04/3PJph/4

juvian Over a year ago

@jcaine04 pretty similar reason as well! Change all your v: Date(2014, 4, 30, 10, 30, 45)} to v: new Date(2014, 4, 30, 10, 30, 45)} and it will work ;)

asgallant Over a year ago

Using the JSON strings, you actually want the dates to be strings: "Date(2014, 4, 30, 10, 30, 45)" instead of new Date(2014, 4, 30, 10, 30, 45), as Date objects are not valid JSON.

RohannG Over a year ago

But this is OK for hardcoded values. I need to do it dynamically. Then what should I do for that? How to pass JSON to map chart of google?

juvian Over a year ago

@RohannG its not hardcoded, the json is dynamic, so the chart will change acording to your json. If you are generating the json from server side, just use as @asgallant said for dates: "Date(2014, 4, 30, 10, 30, 45)"

Collectives™ on Stack Overflow

Create Data Table with JSON in Google Charts

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related