Exploring the ASP.NET 3.5 Chart Controls

Exploring the ASP.NET 3.5 Chart Controls

The new Chart Controls for .NET Framework 3.5 enables ASP.NET and Windows Forms developers to easily create rich and professional-looking data visualization solutions. The Chart Controls currently contains 25 different chart types with 3-D support for most of them, and all of these, available for FREE. Amongst the other features found in 3^rd party charting controls, the Chart Controls for .NET framework provides feature like DataBinding, Data Export, support for Financial and Statistical data, State Management, Streaming, Serialization and much more.

To get started, download and install the following in the order given below:

Microsoft Chart Controls for Microsoft .NET Framework 3.5 – assemblies containing the Chart Controls (ASP.NET and Windows Forms)

Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008 – Add as a control in the Visual Studio toolbox and provides IntelliSense for Chart controls.

Once you have downloaded and installed these components, open Visual Studio 2008. In the Data tab on the Toolbox, observe the new ‘Chart’ control.

To get started, let us create a sample application using the Chart control:

Step 1: Drag and drop the Chart control from the Toolbox to the Design surface of Default.aspx. You will see a ‘Column chart’ which looks similar to the following:

If you click on the ‘Source’ view of the page, you find the following mark up added to the page:

<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

        <asp:Chart ID="Chart1" runat="server">

            <Series>

                <asp:Series Name="Series1">

                </asp:Series>

            </Series>

            <ChartAreas>

                <asp:ChartArea Name="ChartArea1">

                </asp:ChartArea>

            </ChartAreas>

        </asp:Chart>

By default the ChartType is ‘Column’. In order to change the Chart Type to either Line, Bar, Pie or any of these 25 chart types; with the Chart control selected, go to the Properties window > go to ‘Series’ > Click on the ellipse button(…) > in the ‘Series Collection Editor’, click on the ‘ChartType’ to view and select a different chart type as shown below:

For this demonstration, we will keep the ChartType to the default ‘Column’.

We will be binding the chart to some data. For this purpose, we will be using the SqlDataSource.

Step 2: Click on the smart tag or right click Chart > Show Smart Tag > Choose a DataSource > New Data Source… > Select Database. We will keep the default ID for SqlDataSource, SqlDataSource1 and click OK.

Step 3: On clicking OK, you will be presented with a ‘Configure Data Source’ wizard. Click on ‘New Connection’ to open the ‘Add Connection’. Type your ‘Server Name’ and ‘Select a database Name’ to connect to. Over here, I have typed (local) as the ServerName and the database I am connecting to is ‘Northwind’. Click on ‘Test Connection’ to make sure that there are no errors connecting to the server. Click Ok.

Step 4: In your ‘Configure Data Source’, click Next. An option will be displayed for saving the connection string to the configuration file. Select the checkbox ‘Yes, save this connection as:’ , type a name for the connectionstring ‘NorthwindConnectionString’ and click Next.

Step 5: In the ‘Configure Select Statement’ > select ‘Specify a Custom SQL Statement or stored procedure’ > click Next

Type the SQL query to ‘list the count of products in a category’ as shown below:

SELECT CategoryName, COUNT(*) AS ProductCount FROM Products JOIN Categories ON Products.CategoryID = Categories.CategoryID GROUP BY CategoryName

Click Next > Finish.

Step 6: Select the Chart control > Go to the Properties window > ChartAreas property and click the ellipse (…) button to open the ChartArea collection editor. Go to the ‘Axes’ property in the ChartArea Collection Editor and click the ellipse (…) button to open the Axis collection editor as shown below:

Set the ‘Title’ of the X axis to ‘Categories’ and the ‘Title’ of the Y axis to ‘Product Count’. Click OK to close the Axis Collection Editor and an OK again to close the ChartArea Collection Editor.

With the Chart control selected, go to the Series property in the Properties window and click the ellipse (…) button to open the Series collection editor. Go to the Data Source section and add the XValueMember as ‘CategoryName’ and YValueMembers to ‘ProductCount’. Also set the ‘IsValueShownAsLabel’ to True to display the value of ProductCount on the columns. Click OK.

Step 7: With the properties set, run the application. You will see a chart as displayed below:

I am sure all we developers who have used 3rd party Charting solutions in the past, are going to welcome this awesome control from Microsoft. The best part is that it is available for FREE. For the ASP.NET MVC developers, here’s an article that would interest you Combining ASP.NET MVC and ASP.NET Charting Controls.

I hope you liked the article and I thank you for viewing it.  

How to Rotate Ads without Refreshing the Page using AdRotator and ASP.NET AJAX

The AdRotator control in ASP.NET is extremely handy when it comes to randomly displaying advertisements on your site. However the ads are rotated only when the user refreshes the page. In this article, we will explore how you can easily rotate ads at regular intervals, without the user refreshing the page. Follow these steps:

Step 1: Open VS 2008. Click File > New > Website. Choose ASP.NET Website from the list of installed template, choose target platform as .NET Framework 3.5, choose the desired language and enter the location where you would like to store the website on your FileSystem. I have created a folder called VS2008 Projects, so the location over here is C:\VS 2008 Projects\AdRotatorAJAX. After typing the location, click OK.

Step 2: Now you would need to create some banners images to test out the adrotator functionality. I have designed three 270 * 270 banners (dnc.jpg, ssc.jpg and writeforus.jpg)  that has been attached along with the code over here. Let us add them to our project. Right click the project > New Folder > Rename it to ‘images’. Now add the 3 banners images to this project.

Step 3: The AdRotator control can retrieve the list of advertisements from either a XML file or from the database. To keep things simple, I will be using an XML file. So the next step is to create the advertisement file. I prefer to create this file in the App_Data folder as it is secure. To do so, right click the App_Data folder > Add New Item > ‘XML File’ > Rename it to ads.xml and click Add. Now add the following contents to the ‘ads.xml’ file:

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements>

 <Ad>

    <ImageUrl>~/images/dnc.jpg</ImageUrl>  

    <NavigateUrl>http://www.veetech.com</NavigateUrl>

    <AlternateText>DotNetCurry Home Page</AlternateText>

    <Impressions>40</Impressions>

    <Keyword>small</Keyword>

 </Ad>

 <Ad>

    <ImageUrl>~/images/ssc.jpg</ImageUrl>

    <NavigateUrl>http://www.sqlservercurry.com</NavigateUrl>

    <AlternateText>SQL Server Curry Home Page</AlternateText>

    <Impressions>20</Impressions>

    <Keyword>small</Keyword>

 </Ad>

 <Ad>

    <ImageUrl>~/images/writeforus.jpg</ImageUrl>

    <Width>300</Width>

    <Height>50</Height>

    <NavigateUrl>http://www.revive.com/writeforus.aspx</NavigateUrl>

    <AlternateText>dotnetcurry.com Write For Us</AlternateText>

    <Impressions>40</Impressions>

    <Keyword>small</Keyword>

 </Ad> 

</Advertisements>

Step 4: Our next step is to add the AdRotator control and bind it to the advertisement file. Drag and drop an AdRotator control from the toolbox to the Default.aspx. To bind the AdRotator to our XML file, we will make use of the ‘AdvertisementFile’ property of the AdRotator control as shown below:

<asp:AdRotator

    id="AdRotator1"

    AdvertisementFile="~/App_Data/Ads.xml"

    KeywordFilter="small"

    Runat="server" />

Note: The ‘KeywordFilter’ property enables you to filter advertisement using a keyword. If your Advertisement file contains different kinds of ads (banner, leaderboard, skyscraper etc.), you can use this property to filter out different ads on different sections of the page. If you observe, the ads.xml file also contains a property called ‘Keyword’ which binds that ad with the AdRotator that contains the same KeywordFilter, in our case ‘small’.

If you run the sample now, you will have to refresh the page to display a new advertisement. In the last step, let us see how to rotate the ads without refreshing the page.

Step 5: To rotate the ads without refreshing the page, we will add some AJAX code to the page. The trick is to drop the AdRotator in an UpdatePanel and then use a Timer control to refresh the contents at regular intervals. The resultant code will be as shown below:

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Timer ID="Timer1" Interval="2000" runat="server" />

    <asp:UpdatePanel ID="up1" runat="server">

        <Triggers>

            <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

        </Triggers>

        <ContentTemplate>

            <asp:AdRotator

            id="AdRotator1"

            AdvertisementFile="~/App_Data/Ads.xml"

            KeywordFilter="small"

            Runat="server" />

        </ContentTemplate>

    </asp:UpdatePanel>   

</div>

</form>

If you observe, we have used Triggers inside an UpdatePanel. Triggers enable the UpdatePanel to refresh its content from a control outside the UpdatePanel. In our case, the Timer control is the control outside the UpdatePanel, which updates the content of the UpdatePanel. The content here is the AdRotator control.

<Triggers>

    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

</Triggers>

The Event captured is the ‘Tick’ event of the Timer control. So every time the Timer control raise a tick event, an async postback occurs and the contents of the UpdatePanel is refreshed and that is how you are able to see the AdRotator control refresh its content at regular intervals.