unable to get json data into jqplot

358 views
Skip to first unread message

Michael

unread,
Feb 10, 2012, 1:05:22 PM2/10/12
to jqplot...@googlegroups.com
Hello:

I am not sure why we are unable to load JSON data into jqplot. The plot draws itself, however, without any data. I have attached a code snippet. Any suggestions are greatly appreciated.


Thanks in advance,

Michael
snippet.txt

Al Brown

unread,
Feb 13, 2012, 4:54:39 PM2/13/12
to jqplot-users
I write something like this out to the page:

<script type="text/javascript" charset="utf-8">
//<![CDATA[
scheduleData = $j.parseJSON('{\"lines\":
[[[\"2011-10-04T01:00:00-07:00\",0],[\"2011-10-05T01:00:00-07:00\",0],
[\"2011-10-06T01:00:00-07:00\",0][\"2012-03-04T00:00:00-08:00\",0]]],
\"y_label\":\"# Tests\",\"chart_start_date\":\"2011-10-02 01:00:00
-0700\",\"chart_end_date\":\"2012-03-04 00:00:00 -0800\",,
\"y_axis_height\":60}');
// ]]>
</script>

How you write that out will depend on how you're implementing your web
app, but here is how I do it with a Rails 3.2 app:

<script type="text/javascript" charset="utf-8">
//<![CDATA[
scheduleData = $j.parseJSON('<%=j
@schedule_data.to_json.html_safe -%>');
// ]]>
</script>

And @schedule_data is just a hash

{ :lines => get_lines,
:chart_start_date => chart_start_date.to_s,
:chart_end_date => chart_end_date.to_s,
:y_axis_height => get_y_axis_height(test_total) }


Then I can reference it like this, passing it to the method that will
use it.

// If there is a schedule, draw it
$j(".schedule").each(function(index) {
drawSchedule('mainSchedule', scheduleData);
});

And here's a portion of that method showing how I access the lines and
a variable:

// Draw a schedule
function drawSchedule(targetId, scheduleData) {
$j('#' + targetId).empty();

$j.jqplot(targetId, scheduleData.lines, {
axes: {
xaxis: {
renderer: $j.jqplot.DateAxisRenderer,
labelRenderer: $j.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $j.jqplot.CanvasAxisTickRenderer,
min: scheduleData.chart_start_date, max:
scheduleData.chart_end_date
},
>  snippet.txt
> 2KViewDownload

Michael

unread,
Feb 13, 2012, 5:07:32 PM2/13/12
to jqplot...@googlegroups.com
Thanks Al.

We managed to get the data into the chart. Our issue was that we weren't working with an array, but a string representation of an array. We had to include, the eval function:

for (i = 0; i < rows.length; i++) {
     var temp = rows[i];
     var this_date;
                                            
    items.push(eval([temp[0], temp[1]]));
}

Thanks for your help.

Has anyone had success with running flash canvas instead of excanvas with jqplot. It seems to break in IE.7/8 only when zooming. Has anyone experienced something similar and found a work around?


Thanks again,
Michael 

Tom Cassidy

unread,
Feb 13, 2012, 10:20:06 PM2/13/12
to jqplot...@googlegroups.com
I would strongly recommend against using eval() for this.  You would be better off using JSON.parse() as JSON is a subset of JavaScript.  This would prevent any problems from accidentally parsing JavaScript code.

See https://developer.mozilla.org/En/Using_native_JSON for examples.


--
You received this message because you are subscribed to the Google Groups "jqplot-users" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jqplot-users/-/sMokkhn0mr8J.
To post to this group, send email to jqplot...@googlegroups.com.
To unsubscribe from this group, send email to jqplot-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jqplot-users?hl=en.

Reply all
Reply to author
Forward
0 new messages