Categories: Tutorials

Rendering FusionCharts in ASP.NET MVC Framework Using Razor View

Razor is an ASP.NET programming syntax for developing dynamic web pages using the C# or Visual Basic.NET programming languages. The ASP.NET MVC framework is an alternative to the ASP.NET Web Forms pattern for developing web applications. In this post, we’ll go over a tutorial for using Razor View to render FusionCharts in an ASP.NET MVC framework-based application, as well as the basic requirements and steps for rendering FusionCharts. When creating Interactive Graphs and charts, you can use the ASP.NET FusionCharts plugin to help you replicate this tutorial.

Table of Contents

System Requirements

To start rendering charts in ASP.NET MVC framework using razor view, make sure that you have the following components downloaded in the local machine:

FusionCharts Suite XT [Download Link]
FusionCharts ASP.NET Wrapper [Download Link]
Visual Studio IDE (2012 or later) and .NET Framework 4.5 [Download Link]

Rendering FusionCharts in the ASP.NET MVC Framework

Rendering charts using FusionCharts in ASP.NET MVC Framework can be achieved easily with the help of the FusionCharts ASP.NET wrapper. Follow the steps given below to render charts in the ASP.NET MVC framework:

Step 1

Create a new project in ASP.NET application (click File->New->Project) and choose MVC from installed templates as shown in the image below:

A directory will be created with structure as shown below:

Step 2

Include the fusioncharts.js and fusioncharts.charts.js libraries within script folder as shown in the image below:

Step 3

Insert Index.cshtml to Home folder under Views, as shown in the image below:

Once done remove all the codes written in the file and include js files of FusionCharts in it. Include the following code in the <div> created:

<html>
<head>
    @{ ViewBag.Title = "Home Page"; }

    <script src="~/Scripts/fusioncharts.js"></script>
    <script src="~/Scripts/fusioncharts.charts.js"></script>
    <script src="~/Scripts/fusioncharts.theme.fint.js"></script>
</head>
<body>
    <center>
        <h2>Rendering Charts supported by FusionCharts in MVC5</h2>
        <div>
            @Html.Raw(ViewBag.mydata)
        </div>
    </center>
</body>
</html>

Step 4

Add FusionCharts.dll (as a reference) into the project to use FusionCharts ASP.NET wrapper. To add FusionCharts.dll as a reference:

Right-click on References->Select Add References. Refer to the image below:

Step 5

From the Reference Manager dialogue box, search for FusionCharts.dll in your local machine and add it into this box. Refer to the image below:

Step 6

Insert HomeController.cs in controllers folder and include FusionCharts namespace stated below:

using FusionCharts.Charts;

Step 7

Create a method named createChart and define the return type as string. createChart will return the string fetched after calling Render function as shown below:

public string createChart() {
    string dat = "<chart caption='Customer Satisfaction Score' subcaption='Last week' lowerlimit='0' upperlimit='100' theme='fint'><colorrange><color minvalue='0' maxvalue='50' code='#e44a00'></color><color minvalue='50' maxvalue='75' code='#f8bd19'></color><color minvalue='75' maxvalue='100' code='#6baa01'></color></colorrange><dials><dial value='67'></dial></dials></chart>";
    Chart data = new Chart("angulargauge", "myChart", "600", "350", "xml", dat);
    return data.Render();
}

Step 8

In HomeController.cs, search for index method. In that define an attribute and initialize it with the return value of the defined createChart method.

ViewBag.mydata = createChart();

Step 9

Now, you are ready to render FusionCharts in your MVC framework. Press ctrl + f5 to run and check the output of the chart as shown in the image below:

If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we have created for this tutorial.

Was There a Problem Rendering the Charts?

In case something went wrong and you can’t 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 at all, check if the fusioncharts.js and FusionCharts wrapper FusionCharts.java were loaded. Also, check if the path to fusioncharts.js and FusionCharts.java files is correct and whether the file exists in that location.

Dishank Tiwari and Soumya Dutta

Next Create Charts using FusionCharts and Jetty Server »

Previous « Rendering FusionCharts in an Android Application

View Comments

Marcus says:

June 21, 2017 at 10:27 am

I need an example for using database. Well good article
- Soumya sankar Dutta says:
  
  June 22, 2017 at 4:12 pm
  
  Thanks for your suggestion.
  We have created a sample showcasing FusionCharts in ASP.NET MVC Framework where data is getting fetched from database.
  
  Please download the sample from the below given Dropbox link.
  https://www.dropbox.com/s/5fhxarz4n4ytnc6/FusionCharts%20MVC%20demo%20with%20database.zip?dl=0
Bhupinder Singh says:

November 27, 2017 at 10:06 pm

How do we specify the chart type ? I couldn't find that in your code where it tells to render pie chart ?
- Soumya Dutta says:
  
  November 28, 2017 at 4:22 pm
  
  Thanks for your query.
  
  In this tutorial, FusionCharts supported Angular Gauge has been showcased.
  Please check the step 7 where we have implemented FusionCharts ASP.NET wrapper and within the Chart constructor the chart type(angulargauge) has been mentioned as the first parameter. For further reference regarding FusionCharts official ASP.NET wrapper please visit https://www.fusioncharts.com/dev/using-with-server-side-languages/asp-net/introduction.html