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>";           
}