Create a PNG file from a chart


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Lorenzo on 10th June 2014
HI,
it's possibile to create in some server-side way a file .png (or.jpg) with the chart cretaed by Rgraph ? I would like to put on line for everyone the image of the chart, not the chart in itself with the code used to create it..

Thanks in advance.

Lorenzo

Posted by Richard on 11th June 2014
Yes you can do that, using jQuery to POST it back to the server. There's a bit in the docs with an example here:

www.rgraph.net/docs/integration-with-server-side-scripting.html#image





Richard
Posted by Lorenzo on 11th June 2014
many thanks for the very useful answer. Now I'm able to put on line the .png files :-)
Posted by Lorenzo on 14th June 2014
HI, creating the PNG file is OK, it works fine. Now I'm going crazy with another problem. I'm trying to create the PNG file with a cron job directly on the server. When I go with my browser to the URL where is the php file creating the PNG, everything works fine. But when the cron job on the server starts the same php file, the file PNG is not create. I don't understand why. Any suggestion ?
Posted by Lorenzo on 15th June 2014
While trying to solve the problem with the cron job, I realize that maybe I didn't understand how to save a chart as image file.
So, about this code:

<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>

I put it at the end of the file creating the chart. What does the command $.post("save_chart.php", { src: image_data } ); ?

And the file "save_chart.php" is where I have to put the server side PHP code ?


<?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);
?>

Or I have to add this code in the same file creating the chart ?


So, I wrote this file (to read a CSV file, to create the chart and to save it as PNG image):



         <script src="/librerie/RGraph.common.core.js" ></script>
  <script src="/librerie/RGraph.common.effects.js" ></script>
  <script src="/librerie/RGraph.common.dynamic.js"></script>
  <script src="/librerie/RGraph.common.csv.js"></script>
  <script src="/librerie/RGraph.bar.js" ></script>
  <script src="/librerie/RGraph.line.js" ></script>
  <script src="/librerie/RGraph.drawing.text.js" ></script>
  <script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>
     <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->

<canvas id="cvs" width="800" height="550">[Not supported by your browser]</canvas>

<script>
window.onload = function ()
     {
         /**
         * This fetchs the CSV file and shows the Bar chart
         */
         var csv = new RGraph.CSV('data.csv', function (csv)
         {
             // Get the first column which becomes the labels
             var labels = csv.getCol(0);
            
             // Get the number of rows in the CSV
             var numrows = csv.numrows;

             // Get the number of cols in the CSV
             var numcols = csv.numcols;
   
             // Get the second column which becomes the data
             var data1 = csv.getCol(1);
    var data2 = csv.getCol(2);
         
             // Create the chart
             var line = new RGraph.Line('cvs', data1, data2)
   .set('spline', false)
   .set('tickmarks',null)
   .set('background.grid.autofit.align', true)
   .set('numxticks', 30)
   .set('linewidth', 5)
   .set('title', 'example chart')
                 .set('colors', ['#0E6AB8', '#A61616'])
                 .set('strokestyle', 'white')
                 .set('noxaxis', true)
                 .set('shadow', true)
   .set('shadow.offsetx', 0)
                 .set('shadow.offsety', 0)
                 .set('shadow.blur', 10)
                 .set('shadow.color', '#aaa')
   .set('gutter.bottom', 20)
                 .set('gutter.left', 40)
                 .set('gutter.right', 15)
   .set('background.grid.autofit.numhlines', 10)
                 .set('background.grid.autofit.numvlines', 30)
   .set('labels', labels)
   .set('labels.above', false)
   .fadeIn({'duration': 250});
           
   var text1 = new RGraph.Drawing.Text('cvs', 38,18,'data 1')
                 .set('font', 'Arial bold italic')
                 .set('size', 12)
                 .set('halign', 'left')
                 .set('valign', 'bottom')
                 .set('colors', ['#A61616'])
                 .draw();

   var text2 = new RGraph.Drawing.Text('cvs', 780,18,'data 2')
                 .set('font', 'Arial bold italic')
                 .set('size', 12)
                 .set('halign', 'right')
                 .set('valign', 'bottom')
                 .set('colors', ['#0E6AB8'])
                 .draw();

                 var text3 = new RGraph.Drawing.Text('cvs', 780,528,'website')
                 .set('font', 'Arial bold italic')
                 .set('size', 16)
                 .set('halign', 'right')
                 .set('valign', 'bottom')
                 .set('colors', ['#EE8640'])
                 .draw();

   var text4 = new RGraph.Drawing.Text('cvs', 42,528,'data by me')
                 .set('font', 'Arial bold italic')
                 .set('size', 12)
                 .set('halign', 'left')
                 .set('valign', 'bottom')
                 .set('colors', ['grey'])
                 .draw();

   var image_data = canvas.toDataURL("image/png");
   $.post("save_chart_line.php", { src: image_data } );
         });
     }

     // You need to adjust this to suit
     $filename = 'grafico_line.png';
     $src = $_POST['src'];
     $src = substr($src, strpos($src, ",") + 1);
     $decoded = base64_decode($src);
     $fp = fopen($filename,'wb');
     fwrite($fp, $decoded);
     fclose($fp);
</script>


This file works fine and create on the server the PNG image (grafico_line.png) if I call it from my browser. Conversely, the file don't create the PNG image if I call it through a cronjob.








Posted by Richard on 16th June 2014
The charts are created using JavaScript in the browser - so no browser means no chart. You can't create them via cron.





Richard
Posted by Lorenzo on 16th June 2014
ouch, very sad news.
Any alternative ?
Posted by Richard on 16th June 2014
You have to use a browser - it's the browser that creates the chart.


Richard
Posted by Matt Hoskins on 19th June 2014
Lorenzo - there are a handful of tools which basically allow "headless" access to html rendering engines (i.e. you don't need a web browser open - you can run a command line tool). I would suggest in the first instance you have a look at phantomjs - I've not tried it myself but I think it's been used before to render the results of javascript chart libraries, including rgraph. It can render the output from a page (remote or local file) to png, jpg, gif or pdf. Have a look at phantomjs.org/screen-capture.html and also you can see where someone reported a bug in the phantomjs rendering where they were having a problem with shadows on the rgraph thermometer example here github.com/ariya/phantomjs/issues/11007

I hope that's of help!

Add a reply

 




« Back to message list
RGraph on social media