title: Combine PHP variable with jQuery/Javascript
body: <p>Im working on my admin panel and I'm facing a problem. I'm using a small script which outputs my server CPU usage and I want to integrate that into a javascript chart. I cant get it working..
  And I want to know how to make the variable work in the javascript chart.</p>
  
  <p>My PHP: </p>
  
  <pre><code>&lt;?php
  
  $stat1 = file('/proc/stat'); 
  sleep(1); 
  $stat2 = file('/proc/stat'); 
  $info1 = explode(" ", preg_replace("!cpu +!", "", $stat1[0])); 
  $info2 = explode(" ", preg_replace("!cpu +!", "", $stat2[0])); 
  $dif = array(); 
  $dif['user'] = $info2[0] - $info1[0]; 
  $dif['nice'] = $info2[1] - $info1[1]; 
  $dif['sys'] = $info2[2] - $info1[2]; 
  $dif['idle'] = $info2[3] - $info1[3]; 
  $total = array_sum($dif); 
  $cpu = array(); 
  foreach($dif as $x=&gt;$y) $cpu[$x] = round($y / $total * 100, 1);
  $usedcpu = $cpu['user'] + $cpu['nice'] + $cpu['sys'];
  
  ?&gt;
  </code></pre>
  
  <p>And my javascript</p>
  
  <pre><code>    &lt;script&gt;
      $(document).ready(function() {
  
          // Demo #1
          // we use an inline data source in the example, usually data would be fetched from a server
          var data = "&lt;?php echo $usedcpu; ?&gt;";
          function getData() {
              return data;
          }
  
          // setup control widget
          var updateInterval = 30;
          $("#updateInterval").val(updateInterval).change(function () {
              var v = $(this).val();
              if (v &amp;&amp; !isNaN(+v)) {
                  updateInterval = +v;
              if (updateInterval &lt; 1)
                  updateInterval = 1;
              if (updateInterval &gt; 2000)
                  updateInterval = 2000;
              $(this).val("" + updateInterval);
              }
          });
  
          // setup plot
          var options = {
              series: {
                  shadowSize: 0,
                  color: '#c0382b',
                  lines: {
                      fill: true
                  }
              }, // drawing is faster without shadows
              yaxis: { min: 0, max: 10 },
              xaxis: { show: false },
              grid: { backgroundColor: '#ffffff', borderColor: 'transparent' },
          };
          var plot = $.plot($("#demo-1"), [ getData() ], options);
  
          function update() {
              plot.setData([ getData() ]);
              // since the axes don't change, we don't need to call plot.setupGrid()
              plot.draw();
              setTimeout(update, updateInterval);
          }
  
          update();
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I hope you guys can help me, thanks in advance!</p>