Infragistics Charts - How to create charts in ASP.Net using Infragistics controls

Its been couple of years since I did some extreme charting using Infragistics Charts controls. Well I am back into it again. Last time I used it, it was V 2008 or something. Anyways, since I have started to look into this technology again, so I thought I will put together some posts to show some cool things that you could do with Infragistics Chart control.

In this post I will just discuss how to get started with using Infragistics Charts for ASP.Net. In subsequent posts I will discuss more details and more customization of Infrgistics Charts. Since I am using V10.3, so I am going to keep my discussions focused around that version only.

Install Infragistics

Well this is something you have to do to get started. If you have access to just the assemblies, you can just copy them to some central location on your development machine and then add reference form there.

Set up ASP.Net Toolbox with Infragistics Control

If you want to drag and drop IG controls, then it is easier to set up ToolBox with a tool bar for Infragistics controls. I am not going to describe how to set up custom toolbox bar. Here is screen show of how tool box looks like on my development machine.

Add Markup on your page

Drag UltraChart control from toolbox onto page. Or you can manually type it on the page or user control. Here is what mark up will look like.

<igchart:ultrachart id="WeeklyEarningsByRaceChart" runat="server" />

If you have dragged control from toolbox then it has already taken care of adding appropriate register tags at the top of your page. If you do not see them, then here is what you will need to add to get started.

<%@ Register assembly="Infragistics4.WebUI.UltraWebChart.v10.3, Version=10.3.20103.1013, 
 Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
 namespace="Infragistics.WebUI.UltraWebChart" tagprefix="igchart" %>\>

<%@ Register assembly="Infragistics4.WebUI.UltraWebChart.v10.3, Version=10.3.20103.1013, 
Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" 
namespace="Infragistics.UltraChart.Resources.Appearance" tagprefix="igchartprop" %>

<%@ Register assembly="Infragistics4.WebUI.UltraWebChart.v10.3, Version=10.3.20103.1013, 
Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" 
namespace="Infragistics.UltraChart.Data" tagprefix="igchartdata" %>

Without these register tags you will get errors on the page telling you that tag prefix is not known. One of the things I have noticed is that when you drag the control from toolbox, it does not add any tag prefix with control name on the page. If you see it, then you will have to manually add igchart tag prefix with control definition on page.

Set up chart properties

Make sure that you bring up design view of the page before using Chart Wizard to customize the view. There seems to be a bug or known issue that if you have opened the page in source view and you configure the chart using wizard, it does not update mark up on the page when you save the settings. So bring up the design view of the page to be on safe side. Now use Chart Wizard to select what type of chart you want and configure other display parameters. For my simple demo, I just chose Column Chart and left other settings to default. I will discuss customization of chart in details in subsequent posts.

Connect chart to data

Now only thing left is to connect your chart to your data and you are all set. You can bind chart control to any collection or table. It is as simple as that as long as there is some numeric data column in there. If there is no numeric data to plot then chart control can not do much about it. For my demo I simple created dummy data with a class object that has two properties.

public List<ViewModel.RacialWeeklyEarningView> GetWeeklyEarningsByRace()
{
     var earnings = new List();

    earnings.Add(new ViewModel.RacialWeeklyEarningView() { RaceType = "1", Earning = 765 });
    earnings.Add(new ViewModel.RacialWeeklyEarningView() { RaceType = "2", Earning = 611 });
    earnings.Add(new ViewModel.RacialWeeklyEarningView() { RaceType = "3", Earning = 855 });
    earnings.Add(new ViewModel.RacialWeeklyEarningView() { RaceType = "4", Earning = 535 });

    return earnings;
}

In my report page, I just bind chart to this collection and I got my column chart working.

List<ViewModel.RacialWeeklyEarningView> _weeklyEarningsData;

void BindChart()
{
     WeeklyEarningsByRaceChart.DataSource = _weeklyEarningsData;
     WeeklyEarningsByRaceChart.DataBind();
 }