Trying to generate charts passing literal string but...Uncaught SyntaxError: Unexpected token {

Gianluca Albanese

unread,

Jan 23, 2016, 3:57:47 AM1/23/16

to Google Visualization API

hi all,

ERROR:

.Uncaught SyntaxError: Unexpected token {

this is my code

<html>

<head>

google.charts.load('current', {'packages':['timeline']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var container = document.getElementById('timeline');

var chart = new google.visualization.Timeline(container);

var dataTable = new google.visualization.DataTable({ cols: [

{id:'Fase',label:'Fase',type:'string'},

{id:'Responsabile',label:'Responsabile',type:'string'},

{id:'Inizio',label:'Inizio',type:'date'},

{id:'Fine',label:'Fine',type:'date'}],

{ rows: [

{c:[{v:'1'},{v:'Philip'},{v: new Date('01/01/2015')},{v: new Date('12/31/2015')}]},

{c:[{v:'2'},{v:'George'},{v: new Date('01/01/2016')},{v: new Date('12/31/2016')}]},

{c:[{v:'3'},{v:'Anthony'},{v: new Date('01/01/2017')},{v: new Date('12/31/2017')}]

}]

});

chart.draw(dataTable);

}

</script>

</head>

<body>

</body>

</html>

i cant find the error, can someone plz help me?

Gianluca

Daniel LaLiberte

unread,

Jan 23, 2016, 11:10:37 AM1/23/16

to Google Visualization API

Hi Gianluca,

There were a couple problems with your data structure, and also very importantly, you needed to change from loading jsapi to loading the gstatic.com/charts/loader.js Here is your example working: https://jsfiddle.net/dlaliberte/Lxhyg4tw/

Also, it is generally not a good idea to use Dates in that format because different browsers may have problems parsing the date strings in the same way. See https://developers.google.com/chart/interactive/docs/datesandtimes

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/cbfa526b-ab00-4176-9297-772aec6dc6c7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com 5CC, Cambridge MA

Gianluca Albanese

unread,

Jan 23, 2016, 1:15:08 PM1/23/16

to Google Visualization API

hi Daniel,

thanks for your answer with which I was able to fix the error.

For now I have another problem to solve.

I tried to upload the data via ajax to generate the graph, but I get the following error

ERROR

Uncaught Error: Invalid JSON string: { cols:[{id:'Fase',label:'Fase',type:'string'},{id:'Responsabile',label:'Responsabile',type:'string'},{id:'Inizio',label:'Inizio',type:'date'},{id:'Fine',label:'Fine',type:'date'}], rows:[{c:[{v:'1'},{v:'Philip'},{v: new Date(2015,01,01)},{v: new Date(2015,12,31)}]},{c:[{v:'2'},{v:'George'},{v: new Date(2016,01,01))},{v: new Date(2016,12,31)}]},{c:[{v:'3'},{v:'Anthony'},{v: new Date(2017,01,01))},{v: new Date(2017,12,31)}]}]}

this my code

<html>

<head>

var result = $.ajax("http://localhost/gantt_json.asp", {

async: false,

data: {fk_obbiettivo: '25'},

}).responseText;

console.log(result);

google.charts.load('current', {

'packages': ['timeline']

});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var container = document.getElementById('timeline');

var chart = new google.visualization.Timeline(container);

var dataTable = new google.visualization.DataTable(result);

chart.draw(dataTable);

}

</script>

</head>

<body>

</body>

</html>

I think the error is due to the string generated from the page gantt_json.asp but I can not figure out where I'm wrong.

This is the code of the page gantt_json.asp

<%

Response.ContentType = "application/json"

'colonne

Response.Write("{ cols:[")

Response.Write("{id:'Fase',label:'Fase',type:'string'},")

Response.Write("{id:'Responsabile',label:'Responsabile',type:'string'},")

Response.Write("{id:'Inizio',label:'Inizio',type:'date'},")

Response.Write("{id:'Fine',label:'Fine',type:'date'}],")

'righe

Response.Write(" rows:[")

Response.Write("{c:[{v:'1'},{v:'Philip'},{v: new Date(2015,01,01)},{v: new Date(2015,12,31)}]},")

Response.Write("{c:[{v:'2'},{v:'George'},{v: new Date(2016,01,01))},{v: new Date(2016,12,31)}]},")

Response.Write("{c:[{v:'3'},{v:'Anthony'},{v: new Date(2017,01,01))},{v: new Date(2017,12,31)}]}")

Response.Write("]}")

%>

I hope you can help me again and I thank you in advance.

Gianluca

Daniel LaLiberte

unread,

Jan 23, 2016, 2:33:26 PM1/23/16

to Google Visualization API

It is unfortunate that the JSON parser can't tell in more detail what is wrong with the text it is parsing, but I expect the problems are the following:

* All property names must be quoted with double quotes.

* All strings must use double quotes.

* new Date() is not allowed, since it is a JS expression. JSON doesn't support date or time values, so we allow you to used a string format that is the same as the Date constructor, without 'new'. So use "Date(2015, 11, 31)" for December 31, 2015. Note that month indexes are 0-based, so 11 is December. That's standard across most programming languages.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/bc22a8cc-c87b-4ab4-aa72-3897d9f9763d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward