Site icon FusionBrew – The FusionCharts Blog

JavaScript charts with ASP.NET (C#) using FusionCharts XT – Part 1

  • rishi
    • FusionCharts XT with ASP.NET is a new series in which we walk you through the fundamentals of creating a Javascript Interactive Graph with your.NET skills. FusionCharts is the industry’s most popular enterprise-grade JavaScript charting solution. Our enterprise customers have endorsed our products and services, and we are constantly adding newer products and features to our solution. FusionCharts Suite meets all of your charting needs, whether they are simple column or pie charts, gauges, advanced zoom and scroll charts, or specialized financial charts. All of the charts include interactive features such as tooltips, drill-downs, and exporting as an image, PDF, or CSV. We’re also iPhone and iPad ready! With FusionCharts XT, you can leverage your .NET skills to create JavaScript charts. We provide a .NET library that generates all the HTML and JavaScript required to create charts. If you’re looking for a ASP.NET plugin that comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. Try the ASP.NET Plugin for FusionCharts and download it for free!

    FusionCharts XT with ASP.NET

    What we are going to visualize

    The chart below shows data of Top 5 Employees of a fictitious company. In this tutorial, we will create the same chart using the .NET library.

    .NET library bundled with FusionCharts XT

    FusionCharts XT is essentially a JavaScript library. In order to render a chart, certain amount of HTML and JavaScript is required, along with the chart data in XML or JSON. In order to automate this, we provide a .NET library with FusionCharts XT, which generates the HTML and JavaScript required. You can find this library in FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll. By referencing this library, rendering charts is just one line of code! Let us see how..

    What we will need

    Preparing the project

    We will be using Visual Studio 2010 for this series. Visual Studio 2008 or Visual Web Developer will suit fine too. The above steps are necessary whenever you want to use FusionCharts XT in a .NET project. Next, there are 2 ways by which you can supply data to your charts – the Data URL method and the Data String method. Let us try each one of them.

    Creating a JavaScript chart using Data URL method

    In the Data URL method, you tell FusionCharts XT to load data from an XML or JSON file URL. This URL could also point to a virtual data provider, e.g., /path_to/data_provider.aspx, which will execute queries on the database, construct the XML data and output it to the stream, with content type set to text/xml. For this example, we will point FusionCharts XT to an XML file’s URL. Create a Literal tag in Default.aspx, and give it a unique ID. We will write the code required to generate a chart to this literal. Then, FusionCharts.js would process this code and show a chart instead. In Default.aspx.cs, within the Page_Load method, write the following code: 
    // Set the rendering mode to "javascript". (Default is "flash")
FusionCharts.SetRenderer("javascript");

literal_1.Text = FusionCharts.RenderChart("FusionChartsXT/Column2D.swf", "Data/Data.xml", "", "browser_share", "640", "340", false, true);
    Save. Run the project (F5). This is the chart that you should see: You were able to render a chart in your .NET app with just one single line!

    Understanding the RenderChart() method

    The RenderChart() method does all the heavy lifting of generating HTML and JavaScript required to render a chart in the browser. It takes parameters in the following order:

    Creating a JavaScript chart using Data String method

    In the Data String method, the XML or JSON data is embedded within the web page, along with the chart’s HTML and JavaScript code. This method doesn’t require a static data file or a virtual data provider. Moreover, once the chart has finished loading, the data is present locally within the page. Let us create a chart using the Data String method below the first chart. Create another Literal tag with ID as literal_2. In the code-behind, comment the line of the RenderChart() method, and write the following code after it: 
    // xmlStr contains the XML data required for the chart
String xmlStr = "";

// Set rendering mode to "javascript".        
FusionCharts.SetRenderer("javascript");
       
literal_2.Text = FusionCharts.RenderChart("FusionChartsXT/Column2D.swf", "", xmlStr, "browser_share_2", "640", "340", false, true);


Save. Run the project (F5). You should see the following chart:

    Providing chart data in JSON

    JSON is another format that FusionCharts XT supports. If you want to provide data in JSON, simply write the following line before the RenderChart() method: 
    FusionCharts.SetDataFormat("json");
    We provide a tool to convert XML to JSON. You can find it in FusionCharts XT Download Package > Tools > FCDataConverter. The JSON data for the above chart is: 
    {
  "chart": {
    "caption": "Top 5 Employees for 2011",
    "palette": "3",
    "showvalues": "0",
    "numberprefix": "$",
    "useroundedges": "1"
  },
  "data": [
    {
      "label": "Leverling",
      "value": "100524"
    },
    {
      "label": "Fuller",
      "value": "87790"
    },
    {
      "label": "Davolio",
      "value": "81898"
    },
    {
      "label": "Peacock",
      "value": "76438"
    },
    {
      "label": "Callahan",
      "value": "55091"
    }
  ]
}

    Download the project source

    Next article in this series: Create a chart using data from SQL Server

    In the next article, we will create a chart using data from a database. You can head over to our documentation and read on how to use FusionCharts XT to create charts using data from SQL Server. Stay tuned.
    Exit mobile version