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?

Answer 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.

Answer 2

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.

Answer 3

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]); 
}