This is a demonstration of integrating your PHP server-based code with
RGraph. As demonstrated here you can use the json_encode()
PHP
function to convert your PHP arrays or objects into a string that you
can print along with the rest of your page. You can then use the resulting
JavaScript data structure to pass the information to RGraph.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 550px; height: 300px" id="chart-container"></div>This is the code that generates the chart:
<?php $data = array( array('value' => 6, 'label' => 'Jan', 'labelsAbove' => ''), array('value' => 3, 'label' => 'Feb', 'labelsAbove' => ''), array('value' => 8, 'label' => 'Mar', 'labelsAbove' => ''), array('value' => 9, 'label' => 'Apr', 'labelsAbove' => 'Highest'), array('value' => 4, 'label' => 'May', 'labelsAbove' => ''), array('value' => 5, 'label' => 'Jun', 'labelsAbove' => ''), array('value' => 6, 'label' => 'Jul', 'labelsAbove' => ''), array('value' => 4, 'label' => 'Aug', 'labelsAbove' => ''), array('value' => 3, 'label' => 'Sep', 'labelsAbove' => ''), array('value' => 1, 'label' => 'Oct', 'labelsAbove' => 'Lowest'), array('value' => 5, 'label' => 'Nov', 'labelsAbove' => ''), array('value' => 6, 'label' => 'Dec', 'labelsAbove' => ''), ); $str = json_encode($data); ?> <script> src = [{"value":6,"label":"Jan","labelsAbove":""},{"value":3,"label":"Feb","labelsAbove":""},{"value":8,"label":"Mar","labelsAbove":""},{"value":9,"label":"Apr","labelsAbove":"Highest"},{"value":4,"label":"May","labelsAbove":""},{"value":5,"label":"Jun","labelsAbove":""},{"value":6,"label":"Jul","labelsAbove":""},{"value":4,"label":"Aug","labelsAbove":""},{"value":3,"label":"Sep","labelsAbove":""},{"value":1,"label":"Oct","labelsAbove":"Lowest"},{"value":5,"label":"Nov","labelsAbove":""},{"value":6,"label":"Dec","labelsAbove":""}]; data = []; labels = []; labelsAbove = []; // Extract the data from the array for (var i=0; i< src.length; ++i) { data.push(src[i].value); labels.push(src[i].label); labelsAbove.push(src[i].labelsAbove); } var bar = new RGraph.SVG.Bar({ id: 'chart-container', data: data, options: { colors: ['#a00'], xaxisLabels: labels, labelsAbove: true, labelsAboveSize: 8, labelsAboveSpecific: labelsAbove, xaxis: false, yaxis: false, backgroundGridVlines: false, backgroundGridBorder: false } }).wave(); </script>