Populate Flot chart with text from div - php

Question

I'm trying to populate a Flot chart with data from a MySQL query in PHP. I'm sure this is a crappy way to go about things (without Ajax or JSON, neither of which I'm comfortable with yet), but I output the query results in the format Flot needs for its data points into a hidden div on my PHP page, like so:
function get_team_chart($arr) {
$data1 = array();
$data2 = array();
foreach ($arr as $a) {
$data1[] = '[' . $a['week'] . ',' . $a['pts'] . ']';
$data2[] = '[' . $a['week'] . ',' . $a['league_avg'] . ']';
}
$str1 = implode(', ', $data1);
$str2 = implode(', ', $data2);
echo " <div id='series1' style='display:none;'>" . $str1 . "</div>
<div id='series2' style='display:none;'>" . $str2 . "</div>";
}
Then I try to pull that data into my chart in JavaScript like so:
function plot_team_chart() {
var series1 = $('#series1').html();
var series2 = $('#series2').html();
$.plot( $("#team-chart"),
[ series1,
series2],
{ xaxis: {min:0,
max:13},
yaxis: {max:150,
min:0}}
);
}
This doesn't throw any JS errors at runtime, and the chart shows up with the specified mins and maxes, but no data is plotted. I checked the values of series1 and series2 and they are both without quotes around the numerical values (i.e. they are like [1,120.3], [2,89.0], not like ["1","120.3"], ["2","89.0"]).
This is my first foray into the world of Flot, so please be gentle. Also, I verified that the chart plots fine with hardcoded values.
Thank you.

Answer 1

Got it working. Feel free to respond with how this functionality would be accomplished with Ajax and/or JSON, but here is how I accomplished pulling in data within a hidden div to plot on Flot:
function plot_team_chart() {
var tmp1 = new Array();
var tmp2 = new Array();
var tmp3 = new Array();
var data = new Array();
$('.to-plot').each(function() {
tmp1 = $(this).html().split('|');
for (var i=0; i<tmp1.length; i++) {
tmp2 = tmp1[i].split(',');
tmp3.push(tmp2);
}
data.push({ label: $(this).attr('data_label'),
data: tmp3});
tmp3 = [];
});
var options = { xaxis: { min:1,
max:13},
yaxis: { max:120,
min:30},
grid: { borderColor:'#ccc'},
legend: { show:true,
position:'se'}};
if (data.length > 0) {
$.plot( $("#team-chart"),
data,
options
);
}
}
And the modified PHP to accommodate the changes:
function get_team_chart($arr) {
$data1 = array();
$data2 = array();
foreach ($arr as $a) {
$data1[] = $a["week"] . "," . $a["pts"];
$data2[] = $a["week"] . "," . $a["league_avg"];
}
$str1 = implode('|', $data1);
$str2 = implode('|', $data2);
echo " <div id='series1' data_label='avg score' style='display:none;'>" . $str1 . "</div>
<div id='series2' data_label='league avg' style='display:none;'>" . $str2 . "</div>";
}

Answer 2

If you just want quotes around those variables, why not do:
$data1[] = '["' . $a['week'] . '","' . $a['pts'] . '"]';
$data2[] = '["' . $a['week'] . '","' . $a['league_avg'] . '"]';
That will quote your output via the lazy man's way.