0

I've made a fiddle demonstrating two identical plots being fed the exact same data. One receives the data from an array generated from table cells, and the other has had the data written directly into the script that generates the plot.

The array-sourced plot seems to have no idea of the min/max variables - and, while I can use more vars to tell it the min/max values, this is where the real bugs start to kick in (like only half the chart rendering/labels not rendering/etc).

I might be feeding the array to jqPlot incorrectly, or maybe there's a quick fix I can't find online. Does anyone have a solution to this?

Check it out:

http://jsfiddle.net/SH5Sj/2/

$('.plotter').each(function(){ // START PLOTTER
v = [];
$(this).find('tr').each(function(){
    var v1 = $(this).find('td:first').html();
    var v2 = $(this).find('td:last').html();
    var array = [v1,v2];
    v .push(array);
});

var plot1 = $.jqplot ('chart1', [v]);

}); // END PLOTTER

Versus:

var plot2 = $.jqplot ('chart2', [[[1,10],[2,20],[3,50],[4,100]]]);
James Mathieson
  • 419
  • 2
  • 5
  • 22

1 Answers1

1

The difference is that your table-example uses textual data in your dataset, whereas your handcrafted example uses numerical data.

Try converting the table data to numerical first:

var array = [ parseInt(v1), parseInt(v2) ];

updated jsfiddle

I haven't dug deep into jqPlot to find out why this happens, although I've been bitten by a similar issue myself.

robertklep
  • 198,204
  • 35
  • 394
  • 381