Nikolaos Kantzelis ASP.Net Blog

This blog will focus on ASP.NET Framework

Sponsors

About Me

Great Blogs

The chart web server control

In this post I am going to present a hands on example on how to use the Chart web server control.

It is built into ASP.Net 4.0 and it is available from the Toolbox in VS 2010.It is a very rich feature control that supports many chart types, had support for 3-D chart types,supports smart data labels and client side ajax support.

 Let's move on with our example.

1) Launch VS 2010. I am using the Ultimate edition but the express edition will work fine.

2) Create an empty web site from the available templates and choose c# as the development language.

3) Add a new web form to your website.

4) In the Default.aspx page drag and drop a Chart web server control onto the form.

5) I am going to manually add some data to our chart. Have a look inside the <Points></Points> tags. Inside there I am manually adding some data for our chart.

So the full markup by now should look like this.

<div>
<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1">
<Points>
<asp:DataPoint AxisLabel="June Orders" YValues="1234" Color="Cyan" />
<asp:DataPoint AxisLabel="July Orders" YValues="2134" Color="Cyan" />
<asp:DataPoint AxisLabel="August Orders" YValues="3234" Color="Cyan" />
<asp:DataPoint AxisLabel="September Orders" YValues="3354" Color="Cyan" />
<asp:DataPoint AxisLabel="October Orders" YValues="3735" Color="Cyan" />
<asp:DataPoint AxisLabel="November Orders" YValues="4234" Color="Cyan" />
                
</Points>

</asp:Series>
</Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
    </div>

 

6) Run your application and see the chart with all its data appearing on the screen.

7) In this step we will make the chart 3D and will add a legend .

The snippet for this markup will look like this

  </Series>
  <ChartAreas>
  <asp:ChartArea Name="ChartArea1" BackColor="Gray">
  <Area3DStyle Enable3D="true" Rotation="20"
  IsRightAngleAxes="true" IsClustered="true"
  />
  </asp:ChartArea>
  </ChartAreas>
<Legends>
   <asp:Legend Name="MyLegend" Title="OrdersCount" Alignment="Far" 
ForeColor="Black" BackColor="Azure" />
</Legends>
</asp:Chart>

Run your application again and see the legend appearing and the Column chart to be 3D.

If you want to change the chart type to Bar you must change this line of markup

  <Series>
     <asp:Series Name="Series1" ChartType="Bar">

Run your application again and see the results.

8) Let's use some datasource and bind its data to the Chart control. Add a new web form to your site. Drag and drop a Chart control onto the form.

Obviously for this step we will need a database. I will use the Pubs database. This is a well known database and many people are familiar with its schema.You can download the Pubs database from this link. If you need some help on how to install the database have a look here .

9) Drag and drop a SqlDataSource control onto the web form. Set the DataSourceID = SqlDataSource1

10) Now we must configure the SqlDataSource. In the smart tag of the SqlDataSource control create a new connection (if you do not have already a connection pointing to the Pubs database).

In the configuration of the Select statement choose a custom SQL statement. We will want to find how many books were sold by title_ID where the total quantity is more than 35.

So the SQL statement is this one:

SELECT     SUM(qty) AS quantity, title_id
FROM         sales
GROUP BY title_id
HAVING  SUM(qty) >35

Click Next and Finish the exit the wizard.

The markup for the SqlDataSource control is 

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:pubsConnectionString %>" 
SelectCommand="SELECT     SUM(qty) AS quantity, title_id
FROM         sales
GROUP BY title_id
HAVING  SUM(qty) &gt;35"
></asp:SqlDataSource>

Change the type of the chart to Pie.

Set the X Value members to title_id and Y Value members  to quantity.The markup should look like this.

 <asp:Series Name="Series1" XValueMember="title_id" YValueMembers="quantity" 
ChartType="Pie">

11) Run your application and see the Pie chart.

There are so many features and options that you can explore yourself and I urge you to do. The Chart control was missing from the previous versions of the framework and people at Microsoft identified that and provide us with an excellent control with lots of features.

Hope it helps.

Comments

generic viag  said:

graet site. Keep doing

# March 24, 2011 11:43 AM

generic said:

Surprisingly! It is like you understand my mind! You seem to know so much about this, just like you wrote the book in it or something. I think that you can do with some pics to drive the content home a bit, but other than that, this is informative blog post. A good read. I’ll definitely revisit again.

# March 24, 2011 7:13 PM

Goulet said:

I like what you guys tend to be up too. This type

of clever work and exposure! Keep up the fantastic works guys I've you guys to my personal blogroll.

# April 4, 2013 5:10 PM

Phan said:

You actually make it appear so easy together with your presentation however I to find this topic to be really one

thing that I believe I'd never understand. It seems too complicated and extremely broad for me. I am having a look ahead in your subsequent publish, I will try to get the cling of it!

# April 12, 2013 4:04 PM

Teal said:

I constantly spent my half an hour to read this web site's content every day along with a cup of coffee.

# April 19, 2013 10:44 AM

Dyson said:

You really make it seem really easy with your presentation however I find this matter to be really something which I believe I might by

no means understand. It sort of feels too complex

and extremely vast for me. I'm having a look forward for your subsequent put up, I'll attempt to

get the dangle of it!

# May 23, 2013 3:13 AM

Souza said:

Good post. I learn something totally new and challenging on websites I

stumbleupon on a daily basis. It will always be interesting to

read content from other authors and practice something from their sites.

# May 28, 2013 10:40 PM