Saving chart as image or vector file
Overview
AnyChart Allows to save flash charts as PNG Images. This feature requires a small script to be placed on your server and chart xml should be configured to set your own page to be used.
By default AnyChart uses a script that resides on http://www.anychart.com/
How it works?
When AnyChart finishes rendering a chart it can create a PNG image and send it to server or application, PNG image data is sent in base64 encoding and server should decode it and output to response stream decoded.
For user it will look like that: user clicks on a chart with a right-mouse button and chooses "Save as Image" (then AnyChart sends image to server and server sends image back to user AnyChart.) AnyChart launches browser default "Save As" dialog an user can choose where to store an image of chart.
To set your own Save Image Script Path set the following in chart XML File:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
04 |
<image_export url="http://localhost/saveasimage/AnyChartPNGSaver.php" /> |
We've created such scripts for PHP, J2EE, ASP (VBScript), VB.Net and C#, you can find them in export_image_scripts folder
File Name
You can set custom save as file name using file_name and use_title_as_file_name attributes,
the last overrides file_name, if title is empty - file_name is used:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
04 |
<image_export url="http://localhost/saveasimage/AnyChartPNGSaver.php" file_name="weekly_report" use_title_as_file_name="true" /> |
Image Size
You can set the size of an exported image - this is not scaling, but actual
chart resizing (as if you set width and height in JS), if these attributes are not set -
image is exported exactly as chart is.
01 |
<?xml version="1.0" encoding="UTF-8"?> |
04 |
<image_export url="http://localhost/saveasimage/AnyChartPNGSaver.php" width="1024" height="800" /> |
Getting Image: getPNG() function
getPng function of AnyChart returns base64 encoded string with png image of a chart. You can use it to get image and pass it to some script.
<script type="text/javascript" language="javascript">
//<![CDATA[
AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;
var chart = new AnyChart('./swf/AnyChart.swf');
chart.width = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();
function getPNGImage()
{
pngImage=chart.getPNG();
}
//]]>
</script>
NOTE: getPNG function has two optional parameters: width and height, if you want to get image of a certain size different from the one, that is currently displayed - set these parameters.
Getting Vector: getSVG() function
getSVG function of AnyChart returns a string with svg file. You can use it to get a snapshot of a chart in vector format and pass it to some script.
<script type="text/javascript" language="javascript">
//<![CDATA[
AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;
var chart = new AnyChart();
chart.width = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();
function getPlainSVG()
{
return chart.getSVG(false);
}
function getSVGAsBase64EncodedString()
{
pngImage=chart.getSVG(true);
}
//]]>
</script>
getSVG function has one boolean argument: if you set this parameter to true - it returns a string that contains plain SVG of a chart, if you set parameter to false - the string returned is base64 encoded.
NOTE: This method works only for HTML5 version of AnyChart.
Auto Saving Chart
You can save a chart in an automatic mode - chart can be saved to picture as soon as it is displayed - without any need of clicking a chart or button. Do do that you have to create an event handler for draw event and call some SaveAsImage Function that will get PNG or JPEG image and pass it a server.
Sample event handler will look like that:
<script type="text/javascript" language="javascript">
AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;
var chart = new AnyChart();
chart.setXMLFile("data.xml");
chart.addEventListener("draw", function() {
saveChartAsImage(chart);
});
chart.write("chart_container");
</script>
Look at a Sample of Auto-Saving script here: Chart Auto-Saving Sample.
Note:this sample uses php server side script and should be placed on PHP enabled server to be tested in full. If you have problems with installing this script to you server or need help with creation auto-saving script for some other platform - do not hesitate to contact AnyChart Support Team at contact@anychart.com
Saving and Decoding Server Scripts
PHP Save As Script
Place AnyChartPNGSaver.php into the root folder of your web site and set in XML the following:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
04 |
<image_export url="http://localhost/AnyChartPNGSaver.php" /> |
ASP Save As Script
Place AnyChartPNGSaver.asp into the root folder of your web site and set in XML the following:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
04 |
<image_export url="http://localhost/AnyChartPNGSaver.asp" /> |
VB.NET Save As Script
Place AnyChartPNGSaver.aspx into the root folder of your web site and set in XML the following:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
04 |
<image_export url="http://localhost/AnyChartPNGSaver.aspx" /> |
C# Save As Script
Place AnyChartPNGSaver.aspx into the root folder of your web site and set in XML the following:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
04 |
<image_export url="http://localhost/AnyChartPNGSaver.aspx" /> |
JSP Save As Script
Place AnyChartPNGSaver.jsp into the root folder of your web site and set in XML the following:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
04 |
<image_export url="http://localhost/AnyChartPNGSaver.jsp" /> |
