Part 3: Create Asp.Net Local Report with Chart Control using Visual Studio 2010


The Chart Controls are used to display the data in graphical representation. The visual appeal helps the users to understand and interpret the data, its trends and its pattern. This article explains the basic properties and methods of the Chart control, to help the programmers to understand and build the report in a fast and efficient way. The sample used to demonstrate is created using Visual Studio 2010.

Understanding the Chart Control:

To build any kind of chart control, we must first understand the three different groups in the chart such as Values, Categories and Series. To get better understanding about these groups, go through the article in MSDN site . For quick understanding, about the positions of the Values, Categories and Series, refer the below screen cap.

Let us create a report to displays a Line Chart that shows Yearly sales of 3 types Bicycles using Visual Studio 2010. The sample data will load from a table called “ChartDemo”, which contains the number sales by year for all the 3 types of bicycles. We have created this article, with simple steps to follow with screen shots captured for every step.

Step 1: Open Microsoft Visual Studio 2010 project, add a new DataSet file and let the file name as its default name as “DataSet1.xsd”.

Step 2: Open the Server Explorer, connect the database. Drag and Drop the “ChartDemo” table into the Dataset designer in order to bind the data with the Local Report.

Step 3: Next, add RLDC Report into the project.

Step 4: Open the Report Data section, which can be opened by keeping the Report as active tab, then go to “View > Report Data”. Click on the New > Dataset menu, to open the Dataset Properties Dialog box.

Step 5: In the Dataset Properties dialog box, input the Name field as “DataSet1_ChartDemo”, choose the Data Source as “DataSet1” and Available Datasets as “ChartDemo”.

NOTE: The DataSet name “DataSet1_ChartDemo” is very important, as it must be the same as the ReportDataSource name to be mentioned in the code behind.

Step 6: Next, from the toolbox, drag and drop the “Chart” control into the Report body.

Step 7: The “Select Chart Type” dialog box will be opened automatically. Choose your desired type of chart control. For demonstration purpose of this article, we have used “Line” Chart Type. Click “OK” after selecting the Chart Type.

Step 8: Now you can see the Line Chart control appears in the report body section. The Chart control in Visual Studio 2010 is designed in an efficient way and simplifies developer’s task. You can click on any section to change the values of the properties.

Step 9: Change the Axis Titles by double click on the label as “Years” in x-axis and “Sales” in y-axis.

Step 10: From the Report Data section, drag and drop the “ReadingDate” column into the Category fields section.

Step 11: To change the properties of the “ReadingDate” Chart member, that will display in the x-axis, right click on it and click “Categories Group Properties”.

Click on the "fx" button and change the expression value as shown above in the Expression dialog box. Click “Ok” to save the changes. Now the x-axis will display the Year from the ReadingDate column.

Next we need to concentrate on the y-axis changes.

Step 12: From the Report Data section, drag and drop the ReadingValue1, ReadingValue2 and ReadingValue3 into the Data Fields section of the Chart control. These 3 values are the number of sales of 3 types of bicycles.