How to pass data from a PHP array into Javascript to build a chart

Question

So I'm currently working on building a simple area chart using Morris.JS and PHP.

I have my PHP array which spits out all the data I want currently, and I also have a simple demo of the chart up and running. In that sense, everything is working well.

The only task left to do now is hook in the PHP array data into the Javascript to pass real data into the chart. As you can see, I need to pass 3 values into the chart (period, read and read). The unread and read is clear, and for the period I'd like to split it by day if possible

To keep things simple for now - I'm including all the PHP, Javascript and markup on the same page - but of course I aim to eventually pass the data in via AJAX or something, I'm just trying to get a hang on how to actually put the array data into the Javascript.

How I generate the $lifeSpanArray array:

$params = array(
                    'state' => 'all',
                    'sort' => 'newest',
                    'detailType' => 'simple'
                );

            $items = $pocket->retrieve($params, $accessToken);

            $lifeSpanArray = array();


            foreach ($items['list'] as $key) {

                $timeAdded = date('m/d/Y', $key["time_added"]); 

                if ($key["status"] == 1) {
                    $hasRead++;

                    $dateRead = date('m/d/Y', $key["time_read"]);

                    //Push into lifespan array
                    $lifeSpanArray[] = array('timeAdded' => $timeAdded,'timeRead' =>   $dateRead);

                }
                else {
                    $hasNotRead++;
                }

            }

A simple var_dump of the array:

Array
(
    [0] => Array
        (
            [timeAdded] => 07/15/2014
            [timeRead] => 07/15/2014
        )

    [1] => Array
        (
            [timeAdded] => 07/15/2014
            [timeRead] => 07/15/2014
        )

    [2] => Array
        (
            [timeAdded] => 07/15/2014
            [timeRead] => 07/15/2014
        )

    [3] => Array
        (
            [timeAdded] => 07/15/2014
            [timeRead] => 07/15/2014
        )

    [4] => Array
        (
            [timeAdded] => 07/15/2014
            [timeRead] => 07/15/2014
        )

    [5] => Array
        (
            [timeAdded] => 07/15/2014
            [timeRead] => 07/15/2014
        )

    [6] => Array
        (
            [timeAdded] => 07/15/2014
            [timeRead] => 07/15/2014
        )

    [7] => Array
        (
            [timeAdded] => 07/14/2014
            [timeRead] => 07/14/2014
        )

    [8] => Array
        (
            [timeAdded] => 07/13/2014
            [timeRead] => 07/15/2014
        )

    [9] => Array
        (
            [timeAdded] => 07/13/2014
            [timeRead] => 07/13/2014
        )

    [10] => Array
        (
            [timeAdded] => 07/12/2014
            [timeRead] => 07/15/2014
        )

    [11] => Array
        (
            [timeAdded] => 07/12/2014
            [timeRead] => 07/12/2014
        )

    [12] => Array
        (
            [timeAdded] => 07/12/2014
            [timeRead] => 07/12/2014
        )

    [13] => Array
        (
            [timeAdded] => 07/12/2014
            [timeRead] => 07/12/2014
        )

    [14] => Array
        (
            [timeAdded] => 07/12/2014
            [timeRead] => 07/12/2014
        )

    [15] => Array
        (
            [timeAdded] => 07/12/2014
            [timeRead] => 07/12/2014
        )

    [16] => Array
        (
            [timeAdded] => 07/11/2014
            [timeRead] => 07/11/2014
        )

    [17] => Array
        (
            [timeAdded] => 07/11/2014
            [timeRead] => 07/11/2014
        )

    [18] => Array
        (
            [timeAdded] => 07/10/2014
            [timeRead] => 07/11/2014
        )

    [19] => Array
        (
            [timeAdded] => 07/10/2014
            [timeRead] => 07/10/2014
        )

    [20] => Array
        (
            [timeAdded] => 07/09/2014
            [timeRead] => 07/09/2014
        )
)

And then the Javascript:

$(function () {
        Morris.Area({
            element: 'morris-area-chart',
            data: [{
                period: '2010 Q1',
                read: 50,
                added: 100
            }, {
                period: '2010 Q2',
                read: 240,
                added: 400
            }, {
                period: '2010 Q3',
                read: 30,
                added: 15
            }, {
                period: '2010 Q4',
                read: 30,
                added: 100
            }],
            xkey: 'period',
            ykeys: ['read', 'added'],
            labels: ['Read', 'Added'],
            pointSize: 2,
            hideHover: 'auto',
            resize: true
        });
});

Answer 1

You can use json encode. With everything on one page:

 Morris.Area({
        element: 'morris-area-chart',
        data: <?php echo json_encode($lifeSpanArray);?>,
        xkey: 'period',
        ykeys: ['read', 'added'],
        labels: ['Read', 'Added'],
        pointSize: 2,
        hideHover: 'auto',
        resize: true
    });

If you where to seperate this out into seperare files, you could call getdata.php from js, something like this:

//getdata.php

$lifeSpanArray = array();//your code for generating array goes here

//remember to set correct content type
header('Content-Type: application/json');
echo json_encode($lifeSpanArray);
die();

//js

$.get( "getdata.php", function( json ) {
  Morris.Area({
      element: 'morris-area-chart',
      data: json,
      xkey: 'period',
      ykeys: ['read', 'added'],
      labels: ['Read', 'Added'],
      pointSize: 2,
      hideHover: 'auto',
      resize: true
  });
});