Home/ Questions/Q 7593181
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T21:06:09+00:00

Who knows about rgraph and HTML5? ( http://www.rgraph.net ) The code of my chart

  • 0

Who knows about rgraph and HTML5? ( http://www.rgraph.net )

The code of my chart is the following and my problem is that I can’t save the canvas (image) on the server even following their suggestion.

 <html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">

<title>Title</title>

<meta name="keywords" content="rgraph javascript charts html5 canvas basic example" />
<meta name="description" content="A basic example of an RGraph chart for implementation help" />
<meta name="googlebot" content="NOODP">

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<script src="../libraries/RGraph.common.core.js" ></script>
<script src="../libraries/RGraph.common.context.js" ></script>
<script src="../libraries/RGraph.common.annotate.js" ></script>
<script src="../RGraph.common.tooltips.js" ></script>
<script src="../libraries/RGraph.common.zoom.js" ></script>
<script src="../libraries/RGraph.common.effects.js" ></script>

<script src="../libraries/RGraph.common.key.js" ></script>
<script src="../libraries/RGraph.line.js" ></script>
<script src="../libraries/RGraph.common.key.js" ></script>
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
<script src="../libraries/jquery.min.js" ></script>

<script>
    window.onload = function ()
    {
        var line1 = new RGraph.Line('line1', [3,56,22,7,84,8,34,1,1], [3,4,45,0,5,97,46,29,7]);
        line1.Set('chart.background.grid', true);
        line1.Set('chart.linewidth', 3);
        line1.Set('chart.gutter.left', 35);
        line1.Set('chart.hmargin', 5);

        if (!document.all || RGraph.isIE9up()) {
            line1.Set('chart.shadow', true);
        }
        line1.Set('chart.tickmarks', null);
        line1.Set('chart.units.post', '');
        line1.Set('chart.colors', ['#FA4E1D', '#2D659A']);
        line1.Set('chart.background.grid.autofit', true);
        line1.Set('chart.background.grid.autofit.numhlines', 10);
        line1.Set('chart.background.grid.autofit.numvlines', 29);
        line1.Set('chart.curvy', 0);
        line1.Set('chart.curvy.factor', 0.25);
        line1.Set('chart.labels',['1','2','3','4','5','6','7','8','9']);
        line1.Set('chart.title','Title of the Chart');
        line1.Set('chart.key.text.size',7);
        line1.Set('chart.key',['A','B']);
        line1.Set('chart.key.shadow','shadow');
        line1.Set('chart.key.position','graph');
        line1.Set('chart.ymax',200);
        line1.Draw();


    }
     </script>

</head>

<body>

<center><h2>My title</h2><center>

<!-- 2/3. This is the canvas that the graph is drawn on -->
    <div style="text-align: center">
        <canvas id="line1" width="300" height="180">[Please wait...]</canvas>

</div>


</body>
</html>

The suggestion is at the end of this page: http://www.rgraph.net/docs/index.html#image at the specific paragraph “Saving the chart as an image on the server”.
My only result is a 0-lenght file .png inside my server.

Could someone help me?
Thanks in advance.

Mattew

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is how I do it (you’ll probably want to add some sort of validation in the PHP to prevent random uploading):

    JS:

    function saveImage(){
var xmlhttp;
    xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //do something with the response
        }
    }
    xmlhttp.open("POST","myImageSavingScript.php",true);
    var oldCanvas = document.getElementById('line1').toDataURL("image/png");
    var img = new Image();
    img.src = oldCanvas;
    xmlhttp.setRequestHeader("Content-type", "application/upload")
    xmlhttp.send(oldCanvas);
}

    PHP:

    <?php
$im = imagecreatefrompng($GLOBALS["HTTP_RAW_POST_DATA"]);
imagepng($im, 'filename.png');
?>

    And this is a variation if you need to pass other parameters along with it:

    JS (just the mod):

    var oldCanvas = document.getElementById('line1').toDataURL("image/png");
    var img = new Image();
    img.src = oldCanvas;
    var params=oldCanvas+"&someOtherParameter=parameterValue";
    xmlhttp.setRequestHeader("Content-type", "application/upload")
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);

    PHP:

    <?php
$params=explode('&',$GLOBALS["HTTP_RAW_POST_DATA"]);
        $val=split("=",$params[1]);
        $someOtherParam=urldecode($val[1]);
        $imgsrc=str_replace(' ','+',$params[0]);
        $im = imagecreatefrompng($imgsrc);
        imagepng($im, 'filename.png');
?>
    • 0