Saving a chart to a directory on the server

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« 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 Rey on 19th January 2016
I'm trying to use this example www.rgraph.net/docs/integration-with-server-side-scripting.html#image but for some odd reason that is not working.

I'm using coldfusion instead of php and the binarydecoding is very straight forward. It seems like variable is not being posted to the page.


var dataURL = cvsG.canvas.toDataURL("image/png");
$.post("charts/save_mrachart.cfm", { src: dataURL } );

----This is what is in my save_mrachart.cfm-----
<cfscript>
     function crTchart(){
       var mraanl_img = binaryDecode(dataURL, base64);
     }
     fileWrite(expandPath("charts/mraanl_img.png"), mraanl_img);
</cfscript>

Basically it says dataURL does not exist
Posted by Richard on 20th January 2016
Hi,

Start by ensuring that your variables are indeed what you think they are. ie Before your toDataURL() line add this:

$a(cvsG);

And if that is an object try this:

$a(cvsG.canvas);

You could also check that the data is being generated by doing this:

$a(dataURL );

Also, have you included jQuery?

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





BTW In your CF your function is not being used by the looks of it - your function is called "crTchart" and it's not being referred to by anything.






Richard
Posted by Rey on 21st January 2016
Richard,

Thanks for the reply. The crTchart is being used in this file save_mrachart.cfm which is where the chart image is supposed to be saved according to the RGraph example page.

$.post("charts/save_mrachart.cfm", { src: dataURL } );
Posted by Richard on 21st January 2016
Hi,

So did you get it working?



Richard
Posted by Rey on 21st January 2016
Well I got it to do an alert on the canvas by simply doing $a(cvsG);. However for some reason I keep getting this error:
500 Variable DATAURL is undefined on the POST side.

Meaning that this $.post("charts/save_mrachart.cfm", { src: dataURL } ); is not working.
Posted by Richard on 21st January 2016
Hi,

Well DATAURL is all caps and code isn't - are you mixing case in your JavaScript code? You know that JavaScript is case sensitive...?

You can see what the POST request prints by doing this:

$.post( "charts/save_mrachart.cfm", function(data)
{
     // This will show you what the CFM script outputs
     alert(data);
});

Also, temporarily, you could change your AJAX CFM script to use GET and it would make it easier to debug (because you could just type the URL into your browser instead of using jQuery to make a POST). Just send it a random string of text eg.

www.foo.com/charts/save_mrachart.cfm?arc=0123456789




Richard
Posted by Rey on 21st January 2016
Ok I changed it to $.get("charts/save_mrachart.cfm", { src: dataURL } ); and that is sending the binary string to the page however now I'm getting this error:

500 The input and output encodings are not same?

Posted by Richard on 21st January 2016
Hi,

I don't know CFM and I don't know what that means. In PHP you could do this to see exactly wjhat is being sent to the script (via the URL):

print($_GET['src']);
exit;

Perhaps CFM has something similar?





Richard
Posted by Rey on 21st January 2016
Yes there is also something in CF which does exactly that and I get this huge string, which I could post here if you like.

for cf is <cfoutput>#form.src#</cfoutput>

So I get the page to actually post now without an error but all I get is a blank PNG file.
Posted by Richard on 21st January 2016
Hi,

You need to write that string to the PNG file. In PHP that would be:

$str = $_GET['src'];
file_put_contents ('charts/save_mrachart.cfm', $stc);

In some older versions of PHP the src would be escaped with backslashes in front of some characters. If CF does that too you'll need to take those backslashes out.

If you're using Linux in similar you should ensure that the file is writeable and has a .png extension. Remember that Windows by default hides extensions.

If the file gets written you could then try opening it in an image program eg MS Paint).





Richard
Posted by Richard on 21st January 2016
Hi,

Also, have you looked at this?

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

The server-side code is PHP; but it might give you an idea of whats necessary.




Richard
Posted by Rey on 21st January 2016
This is how I'm writing it in CF

<cfparam name="form.src" default=""> <--- This sets an empty var just in case form.src is blank or no data is posted

<cfset dataURL = "#form.src#">
  
<cfimage action="write" source="#dataURL#" destination="#expandPath("mraanl_img.png")#" isBase64="yes" overwrite="yes">

So for us this is pretty straight forward. It just seems as though nothing is being passed. I know that is trying to write something because the above code produced a blank square with the exact h/w of the chart.
Posted by Richard on 21st January 2016
Hi,

Well if you're passing it in via the URL still and it's in the variable - but not being written to a file then you might need to get an example of CF code that writes things to a file.

Maybe the CF documentation might be the place to start to try and get one.

Once you have the version working that uses GET parameters you can then start changing it to POST (so that when jQuery POSTs the data it uses that instead of the GET data).

It sounds like the bit of code that writes the file is the issue.





Richard
Posted by Richard on 21st January 2016
Hi,

Also - the first bit of the data url needs removing (this bit: "data:image/png;base64,") and the data is base64 encoded - though it looks like this is accounted for).




Richard
Posted by Rey on 26th January 2016
Yes I have done a Replace. Maybe this only works with PHP; Has this been tested with other languages such as ASP.NET, JSP or Python?


<cfparam name="form.src" default=""> <--- This sets an empty var just in case form.src is blank or no data is posted

<!--- Check to make sure data being posted is binary --->
<cfif IsBinary("#form.src#")>

   <cfset dataURL = #Replace("form.src","data:image/png;base64,","","one")#> <---- the ONE is telling the server that is occurring only once.

     <!--- START Write Chart to File on Server --->
        <cfimage action="write" source="#dataURL#" destination="#expandPath('mraanl_img.png')#" overwrite="yes" isBase64="yes">
     <!--- END Write Chart to File on Server --->

</cfif>
<!--- End binary check --->
Posted by Richard on 26th January 2016
Hi there,

> Yes I have done a Replace. Maybe this only works with PHP; Has this
>been tested with other languages such as ASP.NET, JSP or Python?

Writing stuff to disk is not a PHP only thing. Open the file in a basic text editor so that you can see exactly what is being written to disk - if anything.



Richard
Posted by Rey on 26th January 2016
I understand that it is not only PHP thing(but your example was done in PHP); what I was asking if this has been done in another language other than PHP. I have written the output to a file and it is huge. But never mind thanks for trying to assist.
Posted by Rey on 26th January 2016
The file is being written to the directory but there is absolutely no image nor chart info. So again it has nothing to do with writing the file to the server but more of lack of information inside the image.
Posted by Richard on 26th January 2016
Hi,

So what is being written to the disk?

The canvas toDataURL() function gives a base64 representation of the canvas With a bit prepended. So strip that off of the front, POST it to the server (eg with jQuery), have the server base64 decode it (so you end up with binary data) and write it to disk. That's all there is to it.

Richard

Add a reply




« Back to message list