title: PHP render stacked area chart of JSON dataset
body: <p>i want to chart (PHP) some info that i have on a BD oracle</p>
  
  <p>I have this file to get the info in a JSON format:</p>
  
  <h1>more data.php</h1>
  
  <pre><code>&lt;?php
   header('Content-Type: application/json');
  
   $conn = oci_connect('*****', '*****', 'HOSTNAME_FQDN:1521/ORACLE_SID');
  
   $graph=sprintf("select to_char(FECHA,'dd/mm/yyyy hh24:mi:ss') as Timestamp
      ,CPU
      ,BCPU
      ,BD_SCHEDULER
      ,UIO
      from sginfgbp.v_grafico_oem
      order by fecha desc");
  
   $parse=oci_parse($conn,$graph);
   oci_execute($parse);
   $data=array();
   while($row1 = oci_fetch_array($parse)){
   $data[]=$row1;
  
   }
   print json_encode($data);
  
  ?&gt;
  </code></pre>
  
  <p>So, when i call <a href="http://SERVERNAME/data.php" rel="nofollow noreferrer">http://SERVERNAME/data.php</a>
  i get a JSON dataset    </p>
  
  <p><strong>TIMESTAMP</strong>   "03/07/2018 11:39:00"
      <strong>CPU</strong> "0"
      <strong>BCPU</strong>    "0"
      BD_SCHEDULER    "0"
      <strong>UIO</strong> "0"</p>
  
  <p><strong>TIMESTAMP</strong>   "03/07/2018 11:38:00"
      <strong>CPU</strong> "0"
      <strong>BCPU</strong>    "2"
      <strong>BD_SCHEDULER</strong>    "0"
      <strong>UIO</strong> "0" 
      ...
      ..
      ..
      .
      .</p>
  
  <p>and so on.</p>
  
  <p>How could i chart this info on a stacked area?</p>
  
  <p>X axis = timestamp</p>
  
  <p>Y axis = (value 1,color 1) , (value 2,color 2) , (value 3,color 3) , (value 4,color 4)</p>
  
  <p>I am trying to "clone" the info on the thread:</p>
  
  <p><a href="https://stackoverflow.com/questions/44061726/how-to-make-a-graph-using-php-from-oracle">How to make a graph using PHP from oracle</a></p>
  
  <p>but i can not fix it.....</p>
  
  <p>This is my bargraph.html (the URL that i finally call on the browser)</p>
  
  <h1>more bargraph.html</h1>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;ChartJS - BarGraph&lt;/title&gt;
      &lt;style type="text/css"&gt;
          #chart-container {
              width: 640px;
              height: auto;
          }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div id="chart-container"&gt;
          &lt;canvas id="mycanvas"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  
      &lt;!-- javascript --&gt;
      &lt;script type="text/javascript" src="js/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/Chart.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  </code></pre>
  
  <h1>more app.js</h1>
  
  <pre><code>  $(document).ready(function(){
    $.ajax({
      url: "http://localhost/psm/admin/data.php",
      method: "GET",
      success: function(data) {
          console.log(data);
  
          var timestamp = [];
          var cpu = [];
          var bcpu = [];
          var bd_scheduler = [];
          var uio = [];
  
  
          for(var i in data) {
              timestamp.push("TIMESTAMP " + data[i].TIMESTAMP);
              cpu.push(data[i].CPU);
              bcpu.push(data[i].BCPU);
              bd_scheduler.push(data[i].BD_SCHEDULER);
              uio.push(data[i].UIO);
          }
  
          var chartdata = {
              labels: timestamp,
              datasets : [
                  {
                      label: 'Label ONE',
                      backgroundColor: 'rgba(200, 200, 170, 0.65)',
                      borderColor: 'rgba(180, 190, 200, 0.75)',
                      hoverBackgroundColor: 'rgba(220, 200, 200, 1)',
                      hoverBorderColor: 'rgba(210, 200, 200, 1)',
                      data: cpu
                  }
                               {
                      label: 'Label DOS',
                      backgroundColor: 'rgba(200, 200, 200, 0.75)',
                      borderColor: 'rgba(200, 200, 200, 0.75)',
                      hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                      hoverBorderColor: 'rgba(200, 200, 200, 1)',
                      data: bcpu
                  }
              ]
          };
  
          var ctx = $("#mycanvas");
  
          var barGraph = new Chart(ctx, {
              type: 'stackedArea',
              data: chartdata
          });
        },
        error: function(data) {
          console.log(data);
        }
      });
   });
  </code></pre>