Binary Realm

I spent some time last night playing with the new ASP .NET charting control.  So far I like the new control. It has a very rich feature set and it sounds like they will be enhancing the features over time to allow for some richer client side interactions.

To get started with the new control you must first:

•     Download and install the Microsoft Chart Controls  and
•     Download and install the Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008
  

Both require the .NET Framework 3.5 SP1.

Now you are all set to use the new Chart control in the toolbox under the Data section.



To create a new chart, simply drag the control on to the page using design or source view. This should add the following to the web.config:

<httpHandlers>
    <add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />
</httpHandlers>

<handlers>
    <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</handlers>

Note: Adding the chart from the toolbox did not add the appropriate handlers to the web.config for me so you may have to edit this yourself. I’m not sure why it didn’t work.

Now the code, in this example I created a pie chart showing a breakdown of referring URLs to my blog.
I made some simple changes to the control markup setting the height, width, and different properties to affect its appearance.

<asp:Chart ID="chartDemo" runat="server"
            Width="600px"
            Height="500px"
            Palette="BrightPastel"
            BackColor="#D3DFF0"
            BorderDashStyle="Solid"
            BackGradientStyle="TopBottom"
            BorderWidth="2"
            BorderColor="26, 59, 105"
            IsSoftShadows="False"
            ImageLocation="~\ChartPic_#SEQ(300,3)">
            <Series>
                <asp:Series Name="Default">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>

On the page load of the code behind I created a list list of URLs and hit counts using a smiple LINQ to SQL query. I then took the list of referral URLs and bound the list to the chart control. The databinding method takes any IEnumerable data type, in this case I used a List object.

BinaryRealmDataContext db = new BinaryRealmDataContext();

            var referals = (from x in db.subtext_Referrals
                           orderby x.Count descending
                           select new ReferralUrl
                           {
                              Url = db.subtext_URLs.SingleOrDefault(d => x.UrlID == d.UrlID).URL.ToString(),
                              Count = x.Count
                           }).Take(10).ToList();
           
            chartDemo.Series["Default"].Points.DataBindXY(referals, "Url", referals, "Count");

            // Set the Chart Type
            chartDemo.Series["Default"].ChartType = SeriesChartType.Pie;

            // Set labels style
            chartDemo.Series["Default"]["PieLabelStyle"] = "Outside";

            // Explode or offset a piece of the pie
            chartDemo.Series["Default"].Points[9]["Exploded"] = "true";

            // Enable 3D mode
            chartDemo.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

chartDemo.DataBind();

The rest of the code is pretty much self explanatory. There is a wide array of properties available to change the look and feel of the charts. I recommend downloading the sample project to take a deeper look at the options available.


See the demo

Print | posted on Wednesday, November 26, 2008 8:00 PM