Problem with assigning data to JQplot chart getting data dynamically using jquery

Question

I'm trying to do the following: Get some data from the backend and bind it with a JQplot candlestick chart.

What i've accomplished:

The data is being generated in the backend
The data is being procured by using the $.get() function of jQuery.

So heres the problem:

The data , if i bind it to a variable by doing:

CASE I_
ohlc = [['2011-01-03 09:30:00',325.7,325.99,324.82,325.39],['2011-01-03 09:35:00',325.44,326.74,325.4,326.46],['2011-01-03 09:40:00',326.54,327.38,326.38,327.23]];

case 1 log screenshot

It works like a breeze.

But when i use

CASE II_
$.get('MYSERVLET', function(data){
ohlc = data;
});

Case 2 log screenshot

and the chart is generated , i get an error at the console saying:

Uncaught #<Object>
init
w.jqplot
(anonymous function)
jQuery.event.handle
jQuery.event.add.elemData.handle.eventHandle

Also when i do a console.log in CASE I , i get them as arrays. But in CASE II , it looks like normal data . I dont know if thats of any help but i noticed this.

Does anyone know how to fix this? What am i doing wrong?

Kavitha K Gowd · Accepted Answer · 2011-09-05T11:24:52.107

1

For jqplot the data has to be in array form. You probably have to check what is the format of data you are getting in case 2. If it is not in array format then inside the $.get function you may have to write some custom code which will convert it into array format.

CASE II_
$.get('MYSERVLET', function(data){
var temp = data;
//code to convert data to array format
//populate ohlc.
});

EDIT:

The array similar to 1st case can be generated using 2 for loops

ohlc=[];
for(int l1=0;l1<data.length;l1++)
{
var temp = [];
for(int l2=0;l2<data[l1].length;l2++)
{
temp.push(data[li][l2]);
}
ohlc.push(temp);
}

And as Shortstick suggested the chart has to be drawn only after the data is returned from the get method.

edited Sep 05 '11 at 11:24

answered Sep 05 '11 at 10:45

Kavitha K Gowd

527
1
3
9

Agreed. I noticed that and pointed it out too is there a function in jQuery to do that for me ? – Shrayas Sep 05 '11 at 10:47
Actually just raw text.. Let me update my question with screenshots. – Shrayas Sep 05 '11 at 11:00
I've added the screenshots , please check – Shrayas Sep 05 '11 at 11:08
In the first case its in array format. In the 2nd case its still in array format but json object arrays. So that has to be changed to simple javascript array. Brute force method of doing this would be to loop through each object and create an array. – Kavitha K Gowd Sep 05 '11 at 11:14
Awesome-Sauce! it had to be converted to arrays like u said :) I got a bit of help from [here](http://stackoverflow.com/questions/3535680/problem-with-json-and-jqplot) also – Shrayas Sep 06 '11 at 09:08

score 1 · Answer 2 · answered Sep 05 '11 at 10:58

1

remember the get is asynchronous, make sure that its finished loading the data before you init the graph, you have to set the async = false to make sure it returns inline.

if that isnt the problem then it will be how the data structure is returned. try using json as that preserves arrays etc.

answered Sep 05 '11 at 10:58

longstaff

2,061
1
12
15

Yes mate , i will keep the async in mind . And the problem was the whole data struct return thingie , @Kavitha kg gave me the answer :) – Shrayas Sep 06 '11 at 09:09

score 0 · Answer 3 · edited Mar 15 '13 at 00:32

var line1=[];
for( var j = 0; j < list.length; j++){//creates the rows in the table based on the amount of videos
    x = table.insertRow(-1);    //inserts the cells into the row
    x.insertCell(0).innerHTML = list[j][0];                             
    x.insertCell(1).innerHTML = list[j][2];         
    //x.insertCell(2).innerHTML = list[(j)][5];
    //x.insertCell(2);  
    line1.push([j,1]); 
}

Problem with assigning data to JQplot chart getting data dynamically using jquery

3 Answers3