title: How to pass data from a PHP array into Javascript to build a chart
body: <p>So I'm currently working on building a simple area chart using Morris.JS and PHP. </p>
  
  <p>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.</p>
  
  <p><strong>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</strong> </p>
  
  <p>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.</p>
  
  <p><strong>How I generate the <code>$lifeSpanArray</code> array:</strong></p>
  
  <pre><code>$params = array(
                      'state' =&gt; 'all',
                      'sort' =&gt; 'newest',
                      'detailType' =&gt; 'simple'
                  );
  
              $items = $pocket-&gt;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' =&gt; $timeAdded,'timeRead' =&gt;   $dateRead);
  
                  }
                  else {
                      $hasNotRead++;
                  }
  
              }
  </code></pre>
  
  <p><strong>A simple var_dump of the array:</strong> </p>
  
  <pre><code>Array
  (
      [0] =&gt; Array
          (
              [timeAdded] =&gt; 07/15/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [1] =&gt; Array
          (
              [timeAdded] =&gt; 07/15/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [2] =&gt; Array
          (
              [timeAdded] =&gt; 07/15/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [3] =&gt; Array
          (
              [timeAdded] =&gt; 07/15/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [4] =&gt; Array
          (
              [timeAdded] =&gt; 07/15/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [5] =&gt; Array
          (
              [timeAdded] =&gt; 07/15/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [6] =&gt; Array
          (
              [timeAdded] =&gt; 07/15/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [7] =&gt; Array
          (
              [timeAdded] =&gt; 07/14/2014
              [timeRead] =&gt; 07/14/2014
          )
  
      [8] =&gt; Array
          (
              [timeAdded] =&gt; 07/13/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [9] =&gt; Array
          (
              [timeAdded] =&gt; 07/13/2014
              [timeRead] =&gt; 07/13/2014
          )
  
      [10] =&gt; Array
          (
              [timeAdded] =&gt; 07/12/2014
              [timeRead] =&gt; 07/15/2014
          )
  
      [11] =&gt; Array
          (
              [timeAdded] =&gt; 07/12/2014
              [timeRead] =&gt; 07/12/2014
          )
  
      [12] =&gt; Array
          (
              [timeAdded] =&gt; 07/12/2014
              [timeRead] =&gt; 07/12/2014
          )
  
      [13] =&gt; Array
          (
              [timeAdded] =&gt; 07/12/2014
              [timeRead] =&gt; 07/12/2014
          )
  
      [14] =&gt; Array
          (
              [timeAdded] =&gt; 07/12/2014
              [timeRead] =&gt; 07/12/2014
          )
  
      [15] =&gt; Array
          (
              [timeAdded] =&gt; 07/12/2014
              [timeRead] =&gt; 07/12/2014
          )
  
      [16] =&gt; Array
          (
              [timeAdded] =&gt; 07/11/2014
              [timeRead] =&gt; 07/11/2014
          )
  
      [17] =&gt; Array
          (
              [timeAdded] =&gt; 07/11/2014
              [timeRead] =&gt; 07/11/2014
          )
  
      [18] =&gt; Array
          (
              [timeAdded] =&gt; 07/10/2014
              [timeRead] =&gt; 07/11/2014
          )
  
      [19] =&gt; Array
          (
              [timeAdded] =&gt; 07/10/2014
              [timeRead] =&gt; 07/10/2014
          )
  
      [20] =&gt; Array
          (
              [timeAdded] =&gt; 07/09/2014
              [timeRead] =&gt; 07/09/2014
          )
  )
  </code></pre>
  
  <p><strong>And then the Javascript:</strong> </p>
  
  <pre><code>$(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
          });
  });
  </code></pre>