Creating A Basic Chart.zipIntroduction To Charts In Microsoft Visual Studio 2010

In this tutorial you will learn how to add charts to your Windows Forms and Web Applications and populate them with some data, legends, and annotations. These charts are a powerful way to display your content in a structured and pleasing manner.

Creating Your First Chart

1. While in design view, open your Toolbox. Under the Data tab click and drag a Chart Control into the design view.
2. Let’s now right-click on the Chart Control and click Properties. Once In the properties window click the Categorized button. This will list out all the available options for the chart. 
3. Inside the Chart category of the Properties window, there is a ChartAreas property with a small ellipsis button (…). Click the ellipsis button. This will open our ChartArea’s Collection Editor.

Note: The ChartAreas collection is where you access all of the chart areas in that specific chart control. As you can see it creates a default chart area named “ChartArea1” to start with.

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

4. In the ChartArea dialog box click Add and then click Ok. This will create a second chart within our chart controller, hence the reason that the original has shrunk to half its size. Until we add a data series that second graph will not show up.
5. Once again in the Properties window, scroll until you see the Series collection and again click the ellipsis button, which will open our Series Collection Editor.

Note: Much like the ChartArea’s Collection Editor the Series collection contains all the data series for the chart control and creates a default series named “Series1” when a chart is created.

6. In the Series dialog box, click Add, and set the properties to these values like so.

Property	Value
ChartArea	ChartArea2
ChartType	Bar
Name	BarChart

7. Click OK. We now have 2 ChartArea’s that each have a series. Until we fill these series with data though, our charts will be blank when our page renders.

Adding Information to Your Chart

Adding Data

Now we will go ahead and add some data to our series so that when we run these applications/sites they will appear in our browser.

1. Re-open the Series Collection Editor, select Series 1 under the “Members” area.
2. Under the Data category of Series1 go to the Points collection property, and click the ellipsis button, which will open the DataPoint Collection Editor.

   Note: The Points collection will contain all the data points in that current series.

3. In the DataPoint Collection Editor, click Add 5 times and give any value to the YValues property in each new DataPoint object. Once finished click OK and repeat the previous steps for the BarChart series, and click Ok again.
4. Run Your Application!

Now you will see two different chart areas on top of one another displaying the 5 data points you just created for each.

Adding Legends

Now we will add a legend to our series.

1. In the Properties window under the Chart category, select Legends and click the ellipsis button.

Note: The Legends collection will contain all the legends in that chart control.

2. Under the Data category of Series1 go to the Points collection property. Click the ellipsis button. This will open the DataPoint Collection Editor.

Note: The Points collection will contain all the data points in that current series.

3. In the Legend Collection Editor, click Add and give the following properties these values within the Legend1 object you just created. These values are located under the Docking section.

We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.

Property	Value
DockedToChartArea	ChartArea1
Docking	Right
IsDockedInsideChartArea	False

4. Click Add a second time and set these properties to the values below for the Legend 2 object under the Docking section. Click OK.

Property	Value
DockedToChartArea	ChartArea2
Docking	Right

5. Open the Series Collection Editor again, under the “Members Area”, select BarChart. In the Legend category of the BarChart properties area, go to the Legend’s properties drop down list and choose Legend2. Click OK. If you run the application you will notice the legend in the top right of the graph.

Adding a Title to Your Chart

1. In the Chart category of the Properties window select the Titles property and click the ellipsis button.

Note: The Titles collection will contain all the titles in that current series.

2. In the Title Collection Editor click Add, under the Appearance category of the Title1 properties. Make up a chart title for the Text property and click OK. If you run the application you will now see a title at the top of the graph.

Create an Annotation to Mark A Data Point

Here we will create an annotation to help point out specific or important data on our chart.

1. In the Chart category of the Properties window, select Annotations and click the ellipsis button.

Note: The Annotations collection will contain all the annotations in the Chart Control.

2. In the Annotation Collection Editor, click the Add Arrow, from the drop down menu select ArrowAnnotation.
3. In the ArrowAnnotation’s property, under the Anchor category, click the AnchorDataPoint arrow and select the first data point in Series1. Set the following properties for the ArrowAnnotation.

Property	Value
Height	-5
Width	0
AnchorOffSetY	-2.5

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

4. Under the Misc category, click on the SmartLabelStyle property and set its IsOverlappedHidden property to False. Click OK, and run the application.

Success!

Download Assets

You have learned how to successfully implement a chart control into your ASP.NET Web Site/Application. You can use this knowledge to effectively display data in a structured and interesting way.