CODEWITHSUNDEEP
jsonkendo-ui
Grandizer
Grandizer

Reputation: 3025

How To Generate a Kendo UI Chart From a String of JSON

I have some charts that I am generating the JSON for in the back end of my solution. If I take the result as is and just do the following:

$("#myDiv").kendoChart(/* my generated JSON pasted right here */);

it works fine. But that is of course not dynamic. I have a larger object that is returning me other data for the page and some of the data are strings that represent the JSON needed to create the different charts on the page.

I can not seem to figure out how to get the string of JSON into an actual JSON object that successfully generates the chart. I have tried numerous combinations of:

JSON.parse
JSON.stringify

to no avail.

In the associated fiddle, NOTE: You will get an alert popup saying "invalid character" you can see the first chart is "inline" where I took the results I get back and just pasted it into the code. Works great. The second chart is the same data, but I put it into a variable just to see if I could do that. The last one is what I am trying to accomplish. I have a control that holds the string of JSON data. I want to read that string and convert it however possible to generate that third chart.

Thank you in advance for you help.

Upvotes: 2

Views: 1139

Answers (3)

OnaBai
OnaBai

Reputation: 40897

The problem is with the JSON string parsing since it is not correct when parsing a string JSON, fields need to be quoted as well as the values.

Your {series:[{type:'column',aggregate:'count',field:... should actually look as {'series':[{'type':'column','aggregate':'count','field':...

EDIT Then there is a second problem that is in the date definition where KendoUI doesn't know how to parse it because you didn't say which type it is. You should define in the string the model for date field and specify it's type.

Example: This string doesn't work: 

{"series":[{"type":"column","aggregate":"count","field":"date","categoryField":"date"}],"categoryAxis":{"baseUnit":"weeks","majorGridLines":{"visible":false}},"valueAxis":{"min":0,"majorUnit":1,"line":{"visible":false}},"dataSource":{"data":[{"value":0,"date":"2015-01-26T23:00:00.000Z"},{"value":0,"date":"2015-01-27T23:00:00.000Z"},{"value":2,"date":"2015-01-28T23:00:00.000Z"},{"value":1,"date":"2015-01-29T23:00:00.000Z"},{"value":0,"date":"2015-01-30T23:00:00.000Z"},{"value":0,"date":"2015-01-31T23:00:00.000Z"},{"value":0,"date":"2015-02-01T23:00:00.000Z"}]}}`

but if you include in the dataSource definition "schema":{"model":{"fields":{"date":{"type":"date"}}}} it becomes: 

{"series":[{"type":"column","aggregate":"count","field":"date","categoryField":"date"}],"categoryAxis":{"baseUnit":"weeks","majorGridLines":{"visible":false}},"valueAxis":{"min":0,"majorUnit":1,"line":{"visible":false}},"dataSource":{"data":[{"value":0,"date":"2015-01-26T23:00:00.000Z"},{"value":0,"date":"2015-01-27T23:00:00.000Z"},{"value":2,"date":"2015-01-28T23:00:00.000Z"},{"value":1,"date":"2015-01-29T23:00:00.000Z"},{"value":0,"date":"2015-01-30T23:00:00.000Z"},{"value":0,"date":"2015-01-31T23:00:00.000Z"},{"value":0,"date":"2015-02-01T23:00:00.000Z"}],"schema":{"model":{"fields":{"date":{"type":"date"}}}}}}

and then it works fine.

See a JSFiddle here: http://jsfiddle.net/OnaBai/9z1w759m/9/

Upvotes: 0

Grandizer
Grandizer

Reputation: 3025

Okay, with some initial help from @OniBai when stating that all fields must be quoted as well, I continued down that path. Still getting Invalid Character messages. Seems as if I take out the:

new Date("2015/01/30")

I had fewer Invalid Character messages but it was still not working. In order to get it into an input field, I had to put single quotes around the fields and string values. Then, in order to parse correctly I had to do the following:

JSON.parse($("#hdnTest").val().replace(/\'/g, "\"");

Which takes the single quotes (g == globally in the string) and replaces them with double quotes. That worked as you can see in the Updated Fiddle. <-- Solution

Luckily for my actual project, I have to return the string via an older WCF service. It can just put \" within the strings, saving me the .replace call.

Upvotes: 0

JFlox
JFlox

Reputation: 708

To parse the json properly the attribute should be:

<div id="chartDiv" stringToParse='{"foo":"bar"}'></div>

Then you just need to call

JSON.parse($("#chartDiv").attr('chartString'))

Also, I don't think you can just throw new Date() into the attribute like you are.

See fiddle

Upvotes: 1

Related Questions