ASP.NET Plugin for FusionCharts

Easy to use server-side ASP.NET wrapper to create charts using FusionCharts

Write FusionCharts implementation in ASP.NET without bothering about JavaScript. Yes, you heard it right! No JavaScript. From rendering a chart to defining attributes, write your code in ASP.NET and we will take care of the rest.

Features

  • Enjoy support for all key FusionCharts features like annotations, macros, themes, image-export, and more.
  • Execute projects without writing separate API for your JavaScript application.
  • Let it be SQL or NoSQL, connect your chart directly to database of your choice.
  • Add data in a number of ways, like JSON or XML.

Quick Demo

Simple chart
Quick demo

Quick Start

Step 1 : Install the FusionCharts ASP.NET Plugin

  • Download FusionCharts library
  • Unzip the archive and move to integrations > asp.net-cs > fusioncharts-wrapper-source to get the FusionCharts.cs file.
  • Copy FusionCharts.cs to App_Code folder inside your project.

Step 2 : Include FusionCharts JavaScript library in your page

<script type="text/javascript" src="/path/to/fusioncharts.js"></script>

Step 3 : Include the plugin source file (FusionCharts.cs) in your project

Add the reference of the file to the page where you want to display FusionCharts. To do so write the following code before the class description begins of your page.

using FusionCharts.charts;

Step 4 : Add an ASP literal to the aspx page where FusionCharts will be displayed

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

Step 5 : Render your chart

Create a chart object that consists of the information required to render the chart. check Constructor Parameters Also set the information needed for a chart

Chart sales = new Chart();

        // Setting chart id
        sales.SetChartParameter(Chart.ChartParameter.chartId, "myChart");

        // Setting chart type to Column 3D chart
        sales.SetChartParameter(Chart.ChartParameter.chartType, "column3d");

        // Setting chart width to 600px
        sales.SetChartParameter(Chart.ChartParameter.chartWidth, "600");

        // Setting chart height to 350px
        sales.SetChartParameter(Chart.ChartParameter.chartHeight, "350");

        // Setting chart data as JSON String (Uncomment below line  
        sales.SetData("{\"chart\":{\"caption\":\"Monthly\",\"xaxisname\":\"Month\",\"yaxisname\":\"Revenue\",\"numberprefix\":\"$\",\"showvalues\":\"1\",\"animation\":\"0\"},\"data\":[{\"label\":\"Jan\",\"value\":\"420000\"},{\"label\":\"Feb\",\"value\":\"910000\"},{\"label\":\"Mar\",\"value\":\"720000\"},{\"label\":\"Apr\",\"value\":\"550000\"},{\"label\":\"May\",\"value\":\"810000\"},{\"label\":\"Jun\",\"value\":\"510000\"},{\"label\":\"Jul\",\"value\":\"680000\"},{\"label\":\"Aug\",\"value\":\"620000\"},{\"label\":\"Sep\",\"value\":\"610000\"},{\"label\":\"Oct\",\"value\":\"490000\"},{\"label\":\"Nov\",\"value\":\"530000\"},{\"label\":\"Dec\",\"value\":\"330000\"}],\"trendlines\":[{\"line\":[{\"startvalue\":\"700000\",\"istrendzone\":\"1\",\"valueonright\":\"1\",\"tooltext\":\"AYAN\",\"endvalue\":\"900000\",\"color\":\"009933\",\"displayvalue\":\"Target\",\"showontop\":\"1\",\"thickness\":\"5\"}]}],\"styles\":{\"definition\":[{\"name\":\"CanvasAnim\",\"type\":\"animation\",\"param\":\"_xScale\",\"start\":\"0\",\"duration\":\"1\"}],\"application\":[{\"toobject\":\"Canvas\",\"styles\":\"CanvasAnim\"}]}}", Chart.DataFormat.json);

Render the chart

Literal1.Text = sales.Render();

Licensing

FusionCharts ASP.NET plugin is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can download a free evaluation version. However, You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).