Telerik Reporting R1 2017

How to: Use Bindings to Control the Coordinate System Properties

In this how-to article we will show you how to setup the coordinate system's axes and scales at runtime using Bindings. This approach is really useful when your scenario involves nested Graph items and you need to adjust more precisely its properties. If you are unfamiliar with the nested data items subject, it is recommended to read the following article first: How to use the ReportItem.DataObject property in expressions.

The nested graph's data will show the sales of some of the most popular electric vehicles models over the last years. The data will be grouped by vehicle model, presenting the amount of sales for each model in a separate chart. The data sample used to create the charts is taken from here and you can read the whole article here.

How to: Use Bindings to Control the Graph's Coordinate System Properties.

  1. This scenario is simple enough to start from a blank report, so, depending on the designer you are using (Standalone Report Designer or Visual Studio Report Designer) create a new blank report.

    Since we won't be using the page header and footer, you can remove them as explained here: How to: Add/Remove Page Header and Footer Sections

  2. Expand the report's DataSource property and click on the Add new DataSource... link at the bottom. Select the CSV Data Source icon to add a new DataSource, and name it dsEVSalesData. This data source will contain information about the vehicles and the amount of their sales for a particular month.

    • Download the EVSalesData.csv file , save it locally and insert its path into the Select a file to import textbox.

    • Press Next until you get to the Configure the separators page. The CSV file uses a semicolon (;) as a field separator so you should check the respective checkbox and uncheck the other ones.

    • Press Next until you get to the CSV Headers page. Note that the CSV file has headers, so you should check the The CSV has headers checkbox.

    • On the Map columns to type page set the type of MonthYear field to DateTime and SalesAmount columns to Integer. Apply the "MMM-yy" format to the Date Format field.

    • When you click Parse CSV... on the next page, you should see the result of the parsed file, which should look like this:

      Graph BindingsCSVPreview Results

      Click Finish when you are ready.

  3. The easiest way to define the groupings for a data item is to use the GroupExplorer tool window. If it is not visible, you can activate it using the Telerik Reporting menu in Visual Studio or View tab in the Standalone Report Designer.

    • Select the report, right-click on the Detail group, displayed in the Group Explorer and select Add Parent Group from the context menu. This will bring the Edit Grouping dialog window.

    • Add a new group, using the field Vehicle as a grouping member.

    • Add ascending sort by the same field using the button at the end of the Grouping column in Group Explorer.

  4. According to our scenario, the group header will contain all the items used to display all the information, so you can make the details and group footer sections invisible by setting their Visible property to false.

    • Add new TextBox to the group header, set its Font.Size to 18pt and its value to =Fields.Vehicle.

    • Add a Graph item to the group header:

      This will bring up the Graph Wizard which will help you create the line series.

    • The Graph's data source will be set through Bindings, but still it is more convenient to use the wizard to setup its series, category groups and values.

      • On the first page select the previously created dsEVSalesData data source.

      • On the Arrange graph fields page you should select the fields that will be used to build the chart. Since the report will display aggregated sums of the vehicle sales by month/year, you need only two fields: MonthYear and SalesAmount. Select MonthYear field and drag it to Categories box. Select SalesAmount field and drag it to Values box. It will be shown as Sum(SalesAmount), as the Sum is the default aggregate function. Click Finish once you are ready.

      • To change the scale type, select the X-axis by clicking on it or on its labels and in the Property Browser window select DateTime Scale for the Scale property:

        Change Scale Type
      • For better layout set the X-axis LabelFormat property to ={0:MMM-yy}. You can add some additional styling to its datapoints as well - for example, you can hide the graph legend, edit its title and set the MarkerType to Circle and increase its MarkerSize to 10px.

    • Currently the Graph displays data for all the vehicle models, but according to the scenario it should display the data only for the current group. To do this, add a Binding to the Graph item, setting DataSource as a PropertyPath and =ReportItem.DataObject as an Expression. You can delete its current data source if you wish.

  5. If you now preview your report, it should display a label and a graph for each vehicle in the data source. However, looking at the second graph that shows the Cadillac ELR data, you will notice that its layout needs some improvements.

    Graph Bindings Original Layout ELR
    • The datapoint marker on August'14 is cut, because the Y axis scale maximum value is automatically calculated as 200, which is exactly the value that this datapoint represents. In this case it will be useful if we can control the minimum and maximum values of the scale according to the current data.

    • The labels on the X axis scale are too close to each other and that makes the chart unreadable. Usually for such cases the LabelStep property can be used, but it should be set dynamically for a particular set of data - otherwise it could be applied unnecessarily.

  6. The above problems can be resolved using coordinate system's Bindings. Expand the coordinate system properties in the PropertyGrid and bring the Bindings dialog up by clicking on the button on the right side of the Bindings property, as shown below:

    Graph Bindings Property Grid
    • Add a new binding and select YAxis.Scale.Maximum as a Property path. Since we want to bind the scale maximum with the current graph data, it is a good idea to raise the maximum by 10%. To do so, set the following expression on the right: =CDbl(Max(Fields.SalesAmount) + Max(Fields.SalesAmount) * 0.1)

      Important note Important

      Note that the expression result should be of the same type as the property which is applies to. In this case, the Maximum is of type double, so you need to cast the expression result to double - otherwise it won't be applied.

    • Add another binding and select XAxis.Scale.LabelStep as a Property path. Our expression will set the LabelStep to 3 if there are more than 10 data points to be displayed: =IIF(CountDistinct(Fields.MonthYear) > 10, 3, 1).

      However, the LabelStep property would not be applied if the LabelUnit is set to Auto, so we need to change it dynamically to Months with the following expression: =IIF(CountDistinct(Fields.MonthYear) > 10, 'Months', 'Auto').

      When you preview your report with the bindings applied, the graph that shows the Cadillac ELR data should look like the one below:

      Graph Bindings Fixed Layout ELR

In this article we demonstrated how to set dynamically the graph's coordinate system properties using Bindings. All the described steps are valid for both Standalone Report Designer and Visual Studio Report Designer and can be reproduced with code as well.

You can download this example report as a .trdx report definition from the following link: How to: Use Bindings to Control the Graph's Coordinate System Properties.

See Also