Turn PHP array into javascript array to pass to jQuery.flot for charting

Question

I have been building a PHP page, step-by-step, so I can confirm each piece working properly, etc. I also have canned data in JS that is passed to jQuery.flot for creating a stacked bar chart.

Basically, I have all the pieces working, but right now, I'm stumped on how to output PHP array into a JS array. Whatever I do simply doesn't seem to work.

I need my js array to appear as such:

var Tim_data1 = [
    [Tim_gd(2014,1,1),13], [Tim_gd(2014,1,2),30], etc., etc.
];

The "Tim_gd" function converts the passed values to a unix date/time. This chart plots the data over time by date. So, each element of the js array is Tim_gd(,,),]. Due to the amount of data, this chart will be created for each month, etc.

Overview:

1. values are retrieved in the same PHP code via a mysql select, this isn't coming from Ajax, or coming from some other external source.
2. returned rows from the select contain the date (in form of YYYY-MM-DD), and the count of records that have that date
3. I'm charting only one month at a time.

A snippet of the PHP code that creates the array:

<?php
    $chartdata = array();
.
.
.
$result2 = mysql_query( $query2 ) or die(mysql_error());  

while ($row2 = mysql_fetch_array($result2)) {
    $event_date = $row2['event_date'];     // date returned as string, YYYY-MM-DD
    $event_count = $row2['event_count'];
    // Build up php array
    $chartdata[$event_date] = $event_count;
}

I've output the above data into an HTML table using the PHP "foreach", so I know I'm getting the values, etc. I should, and can use the PHP substr function to get at the constituent pieces of the date to extract year, month, day. The code to create/output the javascript is as follows:

<script type="text/javascript">
    var TimData1 =[ 
<?php        
    foreach ($chartdata as $k => $v) {
    $yr = substr($k,0,4);
    $day = substr($k,5,2);
    $mon = substr($k,8,2);
 $HTML = <<< eof
    [Tim_gd($yr,$mon,$day),$v],
 eof;
}
?>
];
</script>

With the above PHP snippet, all I get for output is:

<script type="text/javascript">
    var TimData1 =[ 
    ];
</script>

No data output.... I've also tried using PHP echo to no avail either. I apologize in advance, as I know this is something simple, but I've been drinking from a firehose the last few days trying to solve multiple issues at once. I've been puzzling over this for several hours, and don't seem to be any nearer a solution.

So, what am I doing wrong? And I know I'm going to have an issue with a trailing comma in the js array to solve as well with the method I've outlined above.

Or is there a way to pass JSON data to jQuery.flot, and does that affect the "options" passed to the .plot function? I can't seem to find a relevant example for this. Doesn't mean it doesn't exist - I just haven't found it yet.

Answer 1

Why don't you use JSON format that is handled by both languages?

you could do something like this:

<?php 
$chartJSON = json_encode($chartdata);
?>
<script type="text/javascript">
    json = "<?php echo $chartJSON;?>";
    var TimData1 = JSON.parse(json);
</script>