How to: Create a Chart with Data from a Report Data Provider Class

Article
11/07/2012

Applies To: Microsoft Dynamics AX 2012 R2

You can create your own Chart Controls for use on Enterprise Portal pages. A Chart Control allows many different ways of populating data in a chart. The Visual Studio tools for Microsoft Dynamics AX provides specific support to display data from a Report Data Provider (RDP) class or from an analysis cube.

This topic provides the summary steps about how to use the features in Microsoft Dynamics AX and Visual Studio to create and deploy a Chart Control that displays data from an RDP class. Chart Controls are created by using an EP Web Application project in Visual Studio. For more information about how to create an EP Web Application project, see How to: Create an EP Web Application Project. For information about Chart Controls that display Analysis Services cube data, see How to: Create a Chart with Data from an Analysis Services Cube.

Most RDP classes have parameters. Parameters provide ways to choose data, connect related charts together, and vary the chart presentation. They are used when generating the chart data set. The parameters that an RDP class will reference are defined in a data contract class. The following two classes are required to be able to set ReportDataProvider as your data source type on a chart with parameters.

Data Contract Class – defines the parameters in the report.
Report Data Provider Class – processes business logic based on a query and parameters defined in the data contract class, and then returns the tables as a dataset for the report.

For information about how to define RDP classes and data contract classes, see How to: Use a Report Data Provider Class in a Report.

Adding a New Chart Control

To add a new Chart Control

Start Visual Studio. If User Account Control (UAC) is active, make sure that you start Visual Studio with administrative privileges.
Open the EP Web Application project for which you are creating a Chart Control.
Select the project in Solution Explorer.
In the Project menu, click Add New Item.
In the Add New Item window, expand the Visual C# group of installed templates.
Click Microsoft Dynamics AX.
Select EP Chart Control.
Name the new Chart Control. The name entered identifies the chart in SharePoint.
Click Add. The new Chart Control is added to the project and in the AOT.

Designing a New Chart Control

To design a Chart Control, use editors and tools that make it possible for you to create and modify chart components. There are two editing views:

Design view Use this view to edit charts graphically, make changes in the properties window and see the results instantly.
Source view Use this view to edit charts directly, insert asp tags and validate your markup.

To design a new Chart Control

In Solution Explorer, right-click the [ChartControlName].ascx.
Click View Designer to view the graphical layout for the Chart Control.

The following components are included in the layout for the chart:
- AxChartDataSource - [ChartControlName]DataSource
- Chart - [ChartControlName]Chart
  
  The DataSourceID property of the chart has been set to [ChartControlName]DataSource.
- AxChartBehavior - [ChartControlName]Behavior
  
  The ChartID property of the AxChartBehavior component has been set to [ChartControlName]Chart.
Right-click the AxChartDataSource – [ChartControlName]DataSource component in the layout, and then click Properties.
Set the DataType property to ReportDataProvider.
In the CommandText property, click the ellipsis (…) button. The DataSource picker opens and the Select a Microsoft Dynamics AX Report Data Provider tab is displayed.
Select the RDP class that accesses the data that you want on your chart.
Click Next. The Select Fields tab displays the fields available to display in the chart.
Select the fields that you want available to display on the report.

Note

Note the names of the fields that you select. From that list, you must provide the XValueMember value and YValueMembers value to update the Series property in the next step.
Click OK.
In the Design, right-click the [ChartControlName]Chart component in the layout, and then click Properties.
In the Series property, click the ellipsis (…) button to open the Series Collection Editor.
In the Series Collection Editor, set the XValueMember and the YValueMembers property from the names of the fields you selected when you selected the RDP class.
You can also change the type of chart to display. Click the ChartType dropdown to see the chart types that are supported.
Click OK to save the changes to the series collection.
Use the Properties window to change the appearance and behavior of the chart. For example, you can add text to the Titles property that will be displayed as a title on the chart.
In Solution Explorer, right-click [ChartControlName].ascx and then click View Markup. The command text and series values contain the values that you entered in the CommandText property and Series property.
Save the Chart Control by making the .ascx file for the control active in Visual Studio, and then clicking Save in the File menu. The control will be saved. It will also be updated in the AOT.

Adding a Parameter

You must set the required parameter values before the data set will be constructed. The data contract of the RDP class specifies the parameters available in the data source. The following procedure describes how to add a parameter.

To add a parameter

In Solution Explorer, right-click the [ChartName].ascx file and then click View Markup.
In the <dynamics:AxChartDataSource> tag, add the parameters defined in the data contract of the RDP class that you are using to access data for the chart. The following example provides the parameter values for two parameters called OutputSorting and OutputQty. Add this tag between the <dynamics:AxChartDataSource> tag and the </dynamics:AxChartDataSource> tag.
```
<Parameters>
    <dynamics:ChartParameter Name="OutputSorting" Value="0" />
    <dynamics:ChartParameter Name="OutputQty" Value="5" />
</Parameters>
```
Press Ctrl+S to Save.

Compiling a New Chart Control in the AOT

To have security work correctly for the new Chart Control, you must compile it in the AOT. Be sure that the new Chart Control has been saved in Visual Studio, which will add the Chart Control to the AOT.

To compile a new Chart Control in the AOT

In the AOT, expand the Web node, and then expand the Web Files node.
Expand the Web Controls node and locate the new Chart Control that you created.
Right-click the new Chart Control and then click Compile.
Verify that there are no compiling errors. If there are, correct them in Visual Studio and then compile again.

Next you can add the User Control web part to an existing page, such as a Role Center page. For information about how to display a chart in an existing page, see How to: Add Web Parts.