It's been some time since we last talked about
using FusionCharts in your .NET applications. Hopefully now you know how to generate charts from data entered in forms, and how to get back the data from the chart in CSV format. In this post, we'll see how to generate a chart using data from a remote XML file and save that chart in PNG format.
Making a chart using a remotely located XML file
It may not always be the case that you have the XML data inline in your application. You might have a remote server where your chart data is located. In that case you have to use what we call the dataURL method. Let's take this step by step.
1. So let us create that external XML file first. We will use the same guitar example from last time:
<chart caption='Guitar Prices' xAxisName='Guitar Names' yAxisName='Cost' rotateLabels='1' slantLabels='1' showValues='0' numberPrefix='$' useRoundEdges='1' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' exportFormats='PNG=Save as PNG' > <set label='Fender Stratocaster' value='2530' /> <set label='Gibson Les Paul' value='2199' /> <set label='Ibanez JEM7VWH' value='3466.65' /></chart> In the above XML file we have added certain extra chart attributes like
exportEnabled, exportHandler and
exportFormats. All of these will be required later when we export the chart as an image.
Open an empty notepad file, copy and paste the above text and save it as
data.xml in your application startup path. Generally in C#, this would be the
bin\Debug folder under your application folder. Also copy the
Column2d.swf file which comes with the FusionCharts Pack to the same folder.
2. Now create a new Windows Application (C#). As in the previous post, add a
Shockwave Flash Object to your form. The form would now look like:
Notice how small we have kept the size of the form. In this project, we will play around with the size of the form a wee bit as well.
3. Now in the
Form1_Load Event, add the following code
////Specify the format, path and name of the swf file which will render the chart.//if "file:///" is added before the path and the XML after the path in the format//file:///XMLpath?=dataXML=<Your remote Xml path here>®isterwithjs=1//then the chart will be loaded directly with no chance of any error.//For a different chart, change the name from column2d to the required chart,
//add the chart swf to the application startuppath and modify the XML as required.
string appPath = "file:///" + Application.StartupPath + "\\Column2D.swf"; //Replace all "\\" in the .swf path with "/"appPath = appPath.Replace("\\", "/");//Similarly, set the path of the remote XML file as the startup path
//because that is where the file is locatedstring XMLpath = Application.StartupPath + "\\Data.XML";//Replace all "\\" in the XML path with "/"XMLpath = XMLpath.Replace("\\", "/");//finally generate the chartXML string which is in the form //file:///XMLpath?=dataXML=<remote Xml path >®isterwithjs=1//This is the string which will be passed to the ShockWave Object
//to load the chart.string ChartXml = appPath + @"?dataURL=" + XMLpath + "®isterwithjs=1";//passing the string ChartXml to the shockwave flash player.axShockwaveFlash1.Movie = ChartXml;4. Now if you run the application, you will see that as the form is loaded your chart is rendered as good as new. Great fun isn't it?
Get the picture?
Next, like we've been promising for some time now, you will see how to save your chart as an image file. This is where things get
real interesting. For this example, you will be saving the chart image in PNG format. You can save the image in any format you like by tweaking the code just a little bit. We will see how to do that as well.
Before we move on to see how to save your chart image, please remember that unless the chart element in your XML contains the following attributes, exporting will not be enabled in your chart:
<chart … exportenabled='1' exportAtClient='1' exportHandler='fcExporter1'> Ok, let's get right to it.
1. First you need to configure the form. Like we said, in this example you will have to play around with the Form size a little bit as well. The form, as it stands now, is of size (692,318) pixels. Drag the Form vertically downwards and make its size (692, 605) pixels. The form will now not only contain the chart, but also an image of it in the PictureBox object. Considering the chart dimensions and the image dimensions, this would be the optimum size for the form. You can also change the size by changing it in the Properties window.
2. Next, add a
PictureBox to the form. This is where the chart image will be displayed.
In the Properties window, change the SizeMode property of the PictureBox to AutoSize as shown below.
3. Also add a button to the form. From the Properties window, change its text to Save Chart As Image. The final form would look like:
4. Next, add a SaveFileDialog to our application. This will be used to save the chart image on your hard disk when you click the Save Chart As Image button.
5. Now that the form design is done, reduce the form dimensions to the original one. The user need not see the extra form elements (the PictureBox and the button) until he wants to export the image. So make the Form size (692,318) pixels either by dragging it or by changing the Size property in the Properties window. Also make sure in the Properties window, the AutoSize property of the Form is set to False.
6. Before coding, you need to have a brief overview of how the exporting is done. We here at FusionCharts have created a .NET Class for you termed as ExportComponent.cs under the namespace FusionCharts. This class has a function that you can use to export your chart as an image. The Class can be downloaded from here.
The FusionCharts chart raises certain events in its lifetime. These events are termed as
FlashCalls because they are raised by the flash movie. The
Shockwave Flash object in our form actually has an event called
axShockwaveFlash1_FlashCall which is raised every time our chart raises an event. Whenever a user right clicks on the chart and selects
Export As Image (or any analogous option), the raw bitmap data of the chart is created and the event
FC_ExportDataReady is fired.
The raw bitmap data is returned in the form of an XML file. The class we have created takes this XML file and draws a bitmap image for you. This bitmap image will be stored in the
PictureBox in the Form. So you need to download our class and add it to your application. Right click on your application in the
Solutions Explorer and select
Add > Existing Item.
Then browse to the location where you have saved the downloaded class and add it.
Before we begin with the actual coding process, we need to use the namespace of this class in our application. So in the namespace declaration section add the line
using FusionCharts;7. Next we need to write the code to display the chart image in the PictureBox after the raw bitmap data has been gathered. Whenever the
FlashCall event of the Shockwave object is fired, we will see if the particular event fired is called
FC_ExportDataReady or not. If this particular event is fired, it means that the chart image data is ready and so we can use this data to build the bitmap and display it in the pictureBox. So in the
axShockwaveFlash1_FlashCall event insert the following code
//If the event requested by the chart contains the string FC_ExportDataReady if (e.request.Contains("FC_ExportDataReady")) { //Initiate a new instance (EC) of exportcomponent class FusionCharts.ExportComponent EC = new FusionCharts.ExportComponent(); //Set the Autosize property of the form to true so that all the Form elements //are displayed when the image is exported. If this is not done
//the PictureBox and the button will not be visible. this.AutoSize = true; //Pass the parameter of the event FC_ExportDataReady to the function //EC.GetExportedImage in the class pictureBox1.Image = EC.GetExportedImage(e.request); }Notice how we are setting the
AutoSize property of the Form to true here. This is because we need the
PictureBox (containing the image of the chart) and the button (to save this image) to be visible now that the chart image is generated and needs to be displayed. Setting this property to true will mean that the form will automatically re-size to display all the elements present in it.
8. Now that the bitmap image is generated and displayed, the image needs to be saved. The object
button1 (which says 'Save Chart As Image' ) when clicked will enable the user to save it. In this example the image will be saved in the .png format, but like we said earlier, just a little bit of tweaking will enable you to save it in any format you like. The
SaveFileDialog will be used to set the location for the saved image. So in the
button1_click event, write the following code:
try { //Specify a filename and extension for the file in the savefiledialogbox saveFileDialog1.FileName = "My Exported Chart.png"; //Show the savefiledialogbox saveFileDialog1.ShowDialog(); //Initiate a new instance of System.IO.Filestream saves the image via a filestream System.IO.FileStream SaveImg = (System.IO.FileStream)saveFileDialog1.OpenFile(); //save the image in the Png format. If any other System.Drawing.Imaging.ImageFormat Format is specified //the image will be saved in that format instead of the PNG format. pictureBox1. Image.Save(SaveImg, System.Drawing.Imaging.ImageFormat.Png); }catch (Exception) { //In case of error, i.e if the cancel button on the savedialogbox is clicked, show a messagebox. MessageBox.Show("OOPS!!!"); }There you have it. Simple yet effective. To save the image in any other format, instead of specifying the
System.Drawing.Imaging.ImageFormat as
Png, select the format of your choice.
9. Now we come to the fun part. Run your application. The chart will be loaded. Right-click on the chart and select
Save as PNG.
You will see a progress bar that shows the chart image data being gathered.
After the chart data is completely gathered, the form is automatically resized to include the
PictureBox and the button. The
PictureBox now contains the chart image. So the application now looks like:
On top, you have the actual chart, and right below it is the exported image. Now to save the image, click on
Save Chart As Image. A save file dialog box appears - the one that we had included but never seen till now.
Select the location where you want to save the image and click save. Guess what? The chart that was once a flash object is now a PNG image in your local disk.
Last Words
Hopefully this three part tutorial has meant that now you are much more comfortable using FusionCharts in your Windows .NET applications than when you started off. So go out and try all that you have learnt. Impress both your boss and clients with the cool things that you can now do. And keep visiting this space for more tips and tricks on using FusionCharts, and charting in general. Happy charting till then.
