Integration with server-side scripting and AJAX

This is a easy process, as easy as sending HTML to the browser. All you need to do is make the data variable (as in the example below) contain the data you want to be displayed. Eg:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<canvas id="cvs" width="600" height="200">[No canvas support]</canvas>

<script>
    var data = [78,16,26,23,25,51,34,64,84,84];

    var line = new RGraph.Line({
        id: "cvs",
        data: data,
        options: {
            labels: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"]
        }
    }).draw();
</script>

To get the above using PHP you could do this:

<?php
    // This simply makes a string out of the array of data
    $myData = join(',', array(78,16,26,23,25,51,34,64,84,84));

    // This prints out the required HTML markup
    print('<script src="RGraph.common.core.js"></script>' . "\n");
    print('<script src="RGraph.line.js"></script>' . "\n");
    print('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>' . "\n\n");
    print('<canvas id="cvs" width="600" height="200">[No canvas support]</canvas>' . "\n\n");
    print('<script>' . "\n");
    print('    var data = [' . $myData . '];' . "\n\n");
    print('    var line = new RGraph.Line({' . "\n");
    print('        id: "cvs",' . "\n");
    print('        data: data,' . "\n");
    print('        options: {' . "\n");
    print('            labels: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"],' . "\n");
    print('        }' . "\n");
    print('    }).draw();' . "\n");
    print('</script>');
?>

Strictly speaking the var isn't necessary, however if you put the code inside a function (like window.onload), it's probably best to do so as using var will make the variable local, and not global. So doing so will help prevent naming clashes.

 

Integration with PHP and MySQL

This is a simple matter of formatting what you get back from MySQL into a string, as the MySQL dump and PHP code below shows (it's based on a database called RGraph_example):

#
# Table structure for table `daily_statistics`
#

CREATE TABLE `daily_statistics` (
  `st_day` char(9) NOT NULL,
  `st_statistics` tinyint(4) NOT NULL,
  UNIQUE KEY `st_day` (`st_day`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

#
# Dumping data for table `daily_statistics`
#

INSERT INTO `daily_statistics` VALUES ('Mon', 124);
INSERT INTO `daily_statistics` VALUES ('Tue', 95);
INSERT INTO `daily_statistics` VALUES ('Wed', 64);
INSERT INTO `daily_statistics` VALUES ('Thu', 94);
INSERT INTO `daily_statistics` VALUES ('Fri', 75);
INSERT INTO `daily_statistics` VALUES ('Sat', 98);
INSERT INTO `daily_statistics` VALUES ('Sun', 84);
<?php
    /**
    * Change these to your own credentials
    */
    $hostname = "localhost";
    $username = "root";
    $password = "PASSWORD";
    $database = "RGraph_example";
    
    $connection = mysql_connect($hostname, $username, $password) OR die('Could not connect to MySQL: ' . mysql_error());
    mysql_select_db($database);
    
    $result = mysql_query("SELECT st_day, st_statistics FROM daily_statistics");
    if ($result) {
    
        $labels = array();
        $data   = array();
    
        while ($row = mysql_fetch_assoc($result)) {
            $labels[] = $row["st_day"];
            $data[]   = $row["st_statistics"];
        }

        // Now you can aggregate all the data into one string
        $data_string = "[" . join(", ", $data) . "]";
        $labels_string = "['" . join("', '", $labels) . "']";
    } else {
        print('MySQL query failed with error: ' . mysql_error());
    }
?>
<html>
<head>

    <!-- Don't forget to update these paths -->

    <script src="libraries/RGraph.common.core.js" ></script>
    <script src="libraries/RGraph.line.js" ></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
    
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    <script>
        chart = new RGraph.Line({
            id: 'cvs',
            data: <?php print($data_string) ?>,
            options: {
                background: {
                    grid: {
                        autofit: true
                    }
                },
                gutter: {
                    left: 35,
                    right: 5
                },
                hmargin: 10,
                tickmarks: 'endcircle',
                labels: <?php print($labels_string) ?>
            }
        }.draw()
    </script>

</body>
</html>

This PHP code provides the data in two strings - $labels_string and $data_string. These variables are then used in the RGraph code to provide the data and the labels.

Remember:

 

Making AJAX requests

Note: It is important that you're careful with types when making AJAX requests. Since the response is initially a string, and your AJAX function/library may not do conversions for you, you may need to convert these strings to numbers. To do this you can use the Number() or parseInt() functions. For example:

<script>
    num = Number('23');
    num = parseInt('43');
</script>

A simple function for making AJAX requests is now included in the RGraph common library:

<script>
    /**
    * This simple callback function is called when the data is ready. As of April 2012 you don't
    * need to check the readyState or status - they're checked for you.
    */
    function myCallback ()
    {
        alert(this.responseText);
    }
    
    RGraph.AJAX('http://www.example.com/getdata.php', myCallback);

</script>

There's an example here that shows updating your chart dynamically and a fuller example of fetching data with AJAX here. There's also two basic examples that maybe worth looking at.

The June 2013 release added a few new AJAX functions that may help you when dealing with type issues (ie string vs numbers). You could also use jQuery to fetch data from your server. There's a documentation page here which tells you about the new AJAX functions.

 

Saving the chart as an image on the server

RGraph runs in the browser and as it's HTML5 canvas based there are no images involved. You can however save the chart as an image on the server by using jQuery and a little server side scripting. Here's a user submitted example using PHP.

Here's the Javascript that posts the canvas to the server just after the drawing of the chart:

<script>
    /**
    * The toDataURL() is a standard canvas method. Assume that the myChart variable is your RGraph object.
    */
    var image_data = myChart.canvas.toDataURL("image/png");
    $.post("save_chart.php", { src: image_data } );
</script>

And here's the server side PHP code that takes the data and writes it to a file:

<?php
    // You need to adjust this to suit
    $filename = '/tmp/myChart.png';

    $src     = $_POST['src'];
    $src     = substr($src, strpos($src, ",") + 1);
    $decoded = base64_decode($src);
    
    $fp = fopen($filename,'wb');
    fwrite($fp, $decoded);
    fclose($fp);
?>

 

Using the CSV reader to read server based data

One option that you have to integrate with a database is to use the CSV reader. By using this you can have a server based .php file that instead of outputting HTML outputs CSV data (ie just comma seperated values). which looks like the sample CSV file. Then by using the CSV reader you can read that file and subsequently create your chart.

 

Rendering charts without a browser

If you wish to generate charts without a browser or user involved - eg from a cron task - there is something called PhantomJS that you can use to generate PNGs from webpages automatically.