March 1, 2021
Hot Topics:

Reporting - Combining ReportViewer and MS Charts

  • By Matt Goebel and Rachel Baker
  • Send Email »
  • More Articles »

Build and run the application. You will see a simple bar chart, graphically displaying the sales data.

Click here for larger image

Figure 1.1 Sample application with a chart control

Now that we have a working chart viewer, you can see how displaying charts and graphs within an application can add a tremendous amount of value. It helps convey data to the end user without the need for that user to crunch through large amounts of complex data. This is helpful, but it would be more powerful if the user has the ability to take the charts and graphs out of the application in the form of a print report or PDF.

For this, we are going to use the ReportViewer control that comes with Visual Studio. We could use the PrintForm control that is part of the Visual Basic PowerPack (included in VS2008 SP1) to print the chart as well. The drawback to this method is that you end up with a screen print and not a true report.

Before creating the new report form and report, we need to modify the ReportData class. This modification will allow us to store an image of the chart we created and then bind it to the report with the rest of the data. Add the following line to the ReportData class:

  public byte[] SalesChart { get; set; }

Next, create the data sources from the two classes using the Add New Data Source wizard for Objects. Once the data sources are created, we are ready to create our report and set bindings. Add a new Report item that will be displayed using the ReportViewer control. To do so, right-click on the project in Solution Explorer and select Add, New Item. Select the Report template, and name it "reportSales.rdlc." On the report, add two Table elements and one Image element from the Toolbox. In the first table, bind the columns to the SalespersonData data source properties "Name" and "SalesAmount".

In the second table, set the DataSetName property to the ReportData data source. Then place the Image element in the details row of the table. By placing the Image element inside the Table element and setting the DataSetName property we can control which DataSet is associated with the Image element since it does not directly expose this property.

Then, bind the Image item to the "SalesChart" property of the ReportData data source. Be sure to check and configure the data properties of the Image item after binding to the data source. The following properties should be set on the Image item:

  • MIMEType = "image/jpeg"
  • Source = "Database"
  • Value = "=Fields!SalesChart.Value"

Page 2 of 3

This article was originally published on May 20, 2009

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date