Save Chart as Image

This tutorial shows you how to save the chart as an Image

Using ImageSnapshot’s captureImage method we can capture any IBitmapDrawable object and it return ImageSnapshot through it we use it’s data property as byte array so we can make duplicate image object of any IBitmapDrawable object.

var image:ImageSnapshot = ImageSnapshot.captureImage(Overall, 0, new JPEGEncoder() );  //Where overall is the ID for UIComponent
private var file:FileReference = new FileReference();, “chart.jpg”);


<row Title=’Nov’ Y10=’326526′ Y09=’273832′ Y08=’313892′ />
<row Title=’Dec’ Y10=’302275′ Y09=’300582′ Y08=’281679′ />
<row Title=’Jan’ Y10=’332562′ Y09=’340447′ Y08=’275207′ />
<row Title=’Feb’ Y09=’280497′ Y08=’247873′ />
<row Title=’Mar’ Y09=’328304′ Y08=’303520′ />
<row Title=’Apr’ Y09=’366068′ Y08=’314591′ />
<row Title=’May’ Y09=’286720′ Y08=’363357′ />


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”” layout=”absolute” initialize=”initializeHandler();” height=”100%” >
private var file:FileReference = new FileReference();
private function initializeHandler():void
var XMLLoader2:URLLoader=new URLLoader(new URLRequest(“ChartData.xml”))
function xmlLoaded2(event:Event):void
var myXML:XML = XML(;
var FinalXML:XMLList=new XMLList(
private function SaveImage(e:Event):void
var image:ImageSnapshot = ImageSnapshot.captureImage(Overall, 0, new JPEGEncoder() );  //It captures the panel data [Overall] which has the ColumnChart in it., “chart.jpg”); //Image is the ImageSnapshot. has the jpeg data
<mx:Panel id=”Overall” title=”Over All Traffic” x=”10″ y=”10″ width=”500″ height=”400″>
<mx:ColumnChart x=”10″ y=”10″ showDataTips=”true” id=”BarChart” width=”100%” height=”308″>
<mx:CategoryAxis categoryField=”@Title” />
<mx:ColumnSeries displayName=”FY10″ yField=”@Y10″ showDataEffect=”seriesInterpolate”/>
<mx:ColumnSeries displayName=”FY09″ yField=”@Y09″ showDataEffect=”seriesInterpolate”/>
<mx:ColumnSeries displayName=”FY08″ yField=”@Y08″ showDataEffect=”seriesInterpolate”/>
<mx:Legend dataProvider=”{BarChart}” direction=”horizontal” />
<mx:Button x=”518″ y=”19″ label=”Save Chart” click=”SaveImage(event)” /></mx:Application>