Mastering FusionCharts in Your .NET Application

How did it feel to use FusionCharts Suite XT in your .NET application? Cool huh? We thought so too. In case you are wandering what we are talking about, please check out our earlier post on how to use FusionCharts Java script charts in Windows .NET applications. Like we promised, we’re back with a lot more that you can do with FusionCharts in your Windows .NET applications. If you thought what you achieved after reading the previous article was great, well, “You ain’t seen nothing yet”. Alright, we are getting cheesy. Straight to the point now.

Generating charts from data entered in a form

Firstly, let’s come to a basic use for our charts in .NET applications. We will enter data in a form and plot the chart according to the entered data. For this we will use the same method we used in the previous post, termed as the dataXML method. In this method, the data is provided to the chart dynamically during runtime. Let us consider a scenario. You are a guitar player in a rock and roll band and you want to buy a new guitar. You want to consider your options and then make the best buy. So what do you do? You plot the prices of each guitar on a chart and then make an educated decision. Okay, we will admit it – it does not make for an example that you would use in your day-to-day life but then you get the point, don’t you? Let us only consider 3 guitars for this demo. Of course you can choose to plot as many as you want. So here we go: 1. Remember our old form from the previous post? Let us make some changes to it, keeping the basic two elements (ChartContainer and btnLoadChart)  the same. We will add 6 textboxes and 6 labels to that form to finally get this:

We will make a note of the following things:

• The textboxes are labeled textbox1, textbox2, textbox3, textbox4, textbox5 and textbox6 one row after another.
• The button with text Load Chart is the same as the btnLoadChart from the previous post.
• The Shockwave object is also the same as the ChartContainer object from the previous post.
• For aesthetics, we have placed the fields where data will be entered in a groupbox.

2. Alright, let us write the code to actually load the chart according to the data entered. This chart will be loaded when the button btnLoadChart is clicked, just as in the previous post. So go to the btnLoadChart_Click event and insert 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 Xml here>&registerwithjs=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";
appPath = appPath.Replace("", "/");

//Creating the string which will act as the xml according to the format
//file:///xmlpath?=dataxml=<Your Xml here>&registerwithjs=1. The xml itself //will comprise of the names of each field and their respective values.
//Hence by using string concatenation, we add the string values of the textboxes
//consisting of the labels and the Integer values constitute the
//corresponding values of those labels.
string ChartXml = appPath + string.Format( @"?dataXML=<chart caption='Guitar Prices' xAxisName='Guitar Names' yAxisName='Cost' rotatelabels='1' slantlabels='1' showvalues='0' numberPrefix='$' useRoundEdges='1'><set label='{0}' value='{1}' /> <set label='{2}' value='{3}' /> <set label='{4}' value='{5}' /></chart>&registerwithjs=1", textBox1.Text, float.Parse(textBox2.Text), textBox3.Text, float.Parse(textBox4.Text), textBox5.Text, float.Parse(textBox6.Text));

3. Using you-know-what, I found out the prices of three popularly used guitars.

• Fender Stratocaster – $ 2530
• Gibson Les Paul – $ 2199
• Ibanez JEM7VWH – $ 3466.65

We make another note here: Making music is very expensive these days. Now we get to the fun part. Run the application. Enter the names and the respective prices of each of these guitars. Click on the Load Chart button. And wallah!! Your chart is loaded.

Exporting chart data as CSV

With the guitar names and values, you were able to generate the chart. But what if you want to store the guitar brands and their corresponding prices for future reference? Let us discuss a solution for that oo. You can easily get the data from the chart back in a Comma Separated Value (CSV) format. Let us see how to do that. 1. First let us get to the design aspect. We would not want to clutter our Form too much. So what we do is, we add another Form to our Application. In the Solution Explorer, right click on the application name and go to Add > Windows Form.

In the Add New Item dialog box, select Windows Form and click Add.

2. Let us customize this new form first. From the Items Toolbar add a RichTextBox to the Form. This is where the data from the chart will be displayed in the CSV format.

In the properties window, change its Modifiers to Public. We do this because we need to access this object from Form1. 3. Also add a button to the form. Change its Name to btnClose and its text to Close. This button when clicked will close the form. The final form will look like this:

4. Like we said earlier, the btnClose when clicked will close the Form2. So in the btnClose_Click event, write the code: this.close(); Now we’re done with this form. Go back to Form1. 5. Add a button to Form1, which when clicked will get the chart data, load Form2 and display the CSV data in the RichTextBox object of Form2. Change the name of this button to btnGetCSV and its text to Export chart as CSV. Also set the Enabled property of this button as False. This is because the user will only be able to export chart data after the chart is loaded. After adding this button, Form1 should look like:

6. Before we proceed any further, we need to add certain references to our project. To add the reference, in the Menu bar, go to Project > Add Reference. 7. In the Add Reference window, select System.Web and click OK.

8. Time to get our hands dirty with some code again. First, we need to define a function that will pass a parameter to the loaded chart. This parameter will in turn invoke an internal function of the chart which will return the data as CSV values. Since we are calling a Flash function, let us name this function FSCall. So add this piece of code to your class Form1 : Form.

private string FSCall(string func_Name)
{
//This function will generate an XML String which is used to CALL
//any function which is present in the FusionCharts Chart loaded on our Form
//The parameter passed to this function will define the name of
//the function that we are calling.

return "";

}

Now this function needs to be called when the button btnGetCSV is clicked. Also when this button is clicked, our new Form needs to be opened and the CSV values displayed in the RichTextBox in that form. So in the btnGetCSV_Click event, add the following code.

//To invoke any function in the chart, we have to pass
//an XML source to the chart specifying the function name being called
//This XML is created by our function FSCall
//Here we pass the XML created by FSCall to the chart
//To do this, we use the method CallFunction of the Shockwave //Object(ChartContainer).
//So an XML of the form 

//is passed to the chart which then returns
//the CSV data, which we store in string x.

string x = ChartContainer.CallFunction (FSCall ("getDataAsCSV"));

//Decode the returned chart data, which is in HTML encoded format.

x = System.Web.HttpUtility.HtmlDecode(x);

//Remove the and tag which are present
//in the returned CSV data. This is because the
//returned data is also in an xml form, between the tags

//and

x = x.Replace("", "");

x = x.Replace("", "");

//Create a new instance of Form2

Form2 f2 = new Form2() ;

//In the richtextbox object richTextBox1 of Form 2, display the CSV data.
//This step will not work if the Modifiers property of the
//richtextbox is not set to Public.

f2.richTextBox1.Text = x;

//Show the new Form f2.

f2.ShowDialog ();

Also, for the btnLoadChart_Click event, along with the existing code, add one more line to enable the button btnGetCSV when btnLoadChart is clicked. btnGetCSV.Enabled = True 9. Now lets get to the fun part. Again. Run the application and re-enter the data in the form. Click on the Load Chart button. The chart gets loaded. Note how, when you click on the load chart button, the button Export Chart as CSV gets enabled. Click on the Export Chart as CSV button and you will see that it does exactly what it is intended to. You can now copy this data and store it or do anything you want with it. Pretty amazing huh?

The show is not over

We realized that the post will get uncontrollably large if we are unable to resist our temptation to just do more and more with the charts. So keep looking at this space, as we will be back with more on how to use FusionCharts in your .NET Windows applications, including how to use remote files to load your chart and how to export your chart as an image soon.