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:

Form for entering data

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.

Chart generated from the data entered in the form

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.

Adding a form to the application

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

Adding Windows Form

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.

Adding a RichTextBox to the form

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:

Form2 with the Close button

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:

Form1 with Export Chart as CSV button

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.

To add references to the project

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 = True9. 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?

Chart with exported data

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.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

15 responses on “How to use FusionCharts in Windows .NET Applications (WinForms) – Part 2

  1. Great post! I followed your code example pretty closely, but I am unable to load the chart. The chart space is completely blank and right clicking shows that the movie is not loaded. I’ve checked the location of the chart swf file and it appears to be valid. Any tips or tricks would be greatly appreciated.

  2. Hi Scott,
    This problem occurs only if the swf file (the chart) is not getting loaded in the Flash Player. It might be that the path for the SWF that you have built using your code is not the actualy path where you have stored the SWF file(s). May I suggest you try keeping the swf file in the binDebug folder of your application and try running it again. This should work. If this does not work please compare the path built using your code with the actual path. Hope this helps.
    Subhayu
    FusionCharts Team.

  3. I love the function to return CSV as I’d spent the best part of a week writing functions to parse all of the xml, but…..
    When calling the function to return data from a
    Custom Multi series stacked column chart It does not return the displayvalue?
    Any Ideas on this Thanks

  4. Gary: The CSV data that is returned by the getDataAsCSV function is of the form :
    x-axis label : Y-axis label
    set 1 label: set 1 value
    set 2 label: set 2 value
    set 3 label: set 3 value
    ……
    So as you notice, the chart attributes like Caption, Sub-Caption, display value for each set etc are not returned by the getDataAsCSV function. This is true for any chart, not just the Custom Multi series stacked column chart. So, unfortunately you cannot use this function to retrieve the displayvalue of a set element.
    Hope this helps 🙂

  5. Thanks for getting back to me Subhayu,
    I will just Parse the data directly from the XML. and will bare this in mind for further projects.
    Gary

  6. hi
    how can i resize my chart on the fly?
    thanks.

  7. Marco: You cannot re-size the charts on the fly.

  8. ok, thanks
    but i can not define the size of my chart in the begin of my application?

  9. Hi Marco,
    There is one possible workaround to your problem. Generally in winforms, the size of your chart, when it’s loaded is equal to the size of the shockwave flash control. If you want to resize your chart during runtime, you could try resizing the size of your shockwave control and then setting the height of the chart accordingly.
    Below is a piece of code which resizes the chart created in the article above to a width of 500 px and a height of 200 px.
    //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=&registerwithjs=1@Height=&Width=
    //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=&registerwithjs=1&Height=&Width=. 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=
    &registerwithjs=1&Height=200&Width=500″, textBox1.Text, float.Parse(textBox2.Text), textBox3.Text, float.Parse(textBox4.Text), textBox5.Text, float.Parse(textBox6.Text));
    //resize the height and width of the shockwave control ChartContainer
    ChartContainer.Height = 200;
    ChartContainer.Width = 500;
    //clear the cache of the shockwave player
    ChartContainer.FrameNum = 0;
    ChartContainer.Playing = true;
    //reload the chart
    ChartContainer.Movie = ChartXml;
    Hope this helps 🙂

  10. hi, thanks
    that works fine, only one correction, where says Height and Width may write chartHeight and chartWidth and this only works with the format url file://xmlpath?=dataxml=&registerwithjs=1&chartHeight=&chartWidth
    because with the folowing formats
    axShockwaveFlash.Movie =’pathMovie’
    axShockwaveFlash.SetVariable(‘chartHeight’,’200′)
    axShockwaveFlash.SetVariable(‘chartWidth’,’200′)
    or with the property EmbedMovie=True
    its doest not work
    so
    now I find a better solution to my problem,
    write axShockwaveFlash.ScaleMode = 0
    to set that automatically resized
    Thanks Subhayu Mukherjee

  11. Hi, is there any way to capture the link when clicking at a value in the chart? I cannot find the how

  12. Error HRESULT E_FAIL has been returned from a call to a COM component.
    this is error i am getting while getting CSV data.
    on this code line
    Dim x As String = ChartContainer.CallFunction(FSCall(“getDataAsCSV”))

  13. I have been trying the code and it says (I have Visual C# 2008 Professional):
    “excepcion del tipo ‘System.FormatException’ en mscorlib.dll” –> Spanish.
    “exception of type ‘System.FormatException’ in mscorlib.dll” –> English.

    I don’t know what am i doing wrong, the part 1 worked perfectly.

    • @Francisco:

      We can help you quickly if you could tell us at which statement exactly does the exception occur.

      What we can say right now is that this exception occurs when you’re trying to parse one data type to another. For example, parsing an Integer to a String would give you that exception.

      One more reason we can think of is that you should try setting the Regional Settings to some other language and then back to Spanish. You can have a look at this page for more info about the Regional Settings issue: http://support.microsoft.com/kb/942460

  14. Hi,

    Packt Publishing is looking for Technical Reviewers on “FusionCharts: Beginner’s Guide”.

    If interested in reviewing it, contact [email protected]

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS