- Rendering charts by generating HTML as a string and passing it to the WebBrowser control.
- Rendering charts by including FusionCharts ASP.NET server-side wrapper.
Table of Contents
System Requirements
We need the following applications installed before rendering charts in WPF application using Visual Studio:- Visual Studio IDE and .NET Framework [Download Link]
- FusionCharts Suite XT [Download Link]
- FusionCharts ASP.NET Wrapper [Download Link]
Method 1: Rendering Charts by Passing the HTML String to WebBrowser Control
Steps
1. Open Visual Studio. From the File menu, select New > Project.private void Grid_Loaded(object sender, RoutedEventArgs e) { }8. Insert the code given below to Grid_loaded event handler:
label.Content = "Rendering FusionCharts in WPF application"; StringBuilder html = new StringBuilder(); html.Append(""); html.Append(""); html.Append(""); html.AppendFormat(""); html.Append(""); html.Append(""); html.Append(""); html.Append("“); html.Append(”
"); html.Append(""); webb.NavigateToString(html.ToString());9. Run the application. The output looks like as shown in the image below:
Method 2: Render Charts Using FusionCharts ASP.NET Wrapper
To create charts using FusionCharts ASP.NET server-side wrapper, follow steps 1 to 6 of Method 1, which will create the WPF application and webBrowser control. The additional steps are stated below:Steps
1. Search for FusionCharts.dll in your local machine and add it to the project. Refer to the image below:using FusionCharts.Charts;3. In Grid_Loaded event handler, add the code given below:
label.Content = "Rendering FusionCharts in WPF application"; StringBuilder chart = new StringBuilder(); chart.Append("{'chart': {'caption': 'Sales of Liquor', 'subCaption': 'Last week', 'xAxisName': 'Day', 'yAxisName': 'Sales (In USD)', 'numberPrefix': '$', 'paletteColors': '#0075c2', 'bgColor': '#ffffff', 'showBorder': '0', 'showCanvasBorder': '0', 'plotBorderAlpha': '10', 'usePlotGradientColor': '0', 'plotFillAlpha': '50', 'showXAxisLine': '1', 'axisLineAlpha': '25', 'divLineAlpha': '10', 'showValues': '1', 'showAlternateHGridColor': '0', 'captionFontSize': '14', 'subcaptionFontSize': '14', 'subcaptionFontBold': '0', 'toolTipColor': '#ffffff', 'toolTipBorderThickness': '0', 'toolTipBgColor': '#000000', 'toolTipBgAlpha': '80', 'toolTipBorderRadius': '2', 'toolTipPadding': '5'}, 'data': [{'label': 'Mon', 'value': '4123'}, {'label': 'Tue', 'value': '4633'}, {'label': 'Wed', 'value': '5507'}, {'label': 'Thu', 'value': '4910'}, {'label': 'Fri', 'value': '5529'}, {'label': 'Sat', 'value': '5803'}, {'label': 'Sun', 'value': '6202'} ] }"); Chart revenueChart = new Chart("column2d", "ch1", "400", "400", "json", chart.ToString()); StringBuilder Total = new StringBuilder(); Total.Append(""); Total.Append(""); Total.Append(""); Total.AppendFormat(""); Total.Append(""); string chartdata = revenueChart.Render(); Total.Append(chartdata); Total.Append(""); Total.Append(""); webb.NavigateToString(Total.ToString());4. Run the application. The output looks like as shown in the image below:
Was There a Problem Rendering the Charts?
In case something went wrong, and you are unable to see the chart, check for the following:- The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
- If the chart does not show up, check if the fusioncharts.js and FusionCharts wrapper FusionCharts.java were loaded. Also, check if the path to the fusioncharts.js and the FusionCharts.java files is correct and whether the files exist in that location.