The XRChart control is a powerful component that includes visual graphs in reports.
Its many view types and options provide great flexibility.
The following demo includes two different scenarios, where a chart is generated as a data summary on a high level of the report
and a second on a detail level to provide an in-depth overview of nested information.
I begin the demo with a project that includes a JSON file called orders.json.
I create a new report, using the table template and I assign the JSON file as a datasource.
The Report Wizard displays the structure of the data.
I will only choose a small subset of the fields on the next page, so that the initial report is limited to the master level.
I will utilize some of the nested data in this demo to display graphical charts within the report.
The top-level objects are "orders", and each order has a collection of "order lines".
An order line refers to a product, and the product has a collection of associated price ranges which contain historical data.
I proceed to the next page and select the fields customer and date from the right-hand list.
The other fields and levels are available in the schema
but the wizard will ignore them when it creates the initial report.
No further changes to the default setup are required, so I click Finish now.
The report is generated and I switch to the Preview for a moment so you can see the sample data
and the wizard-generated structure.
I make a few visual changes to the report layout now.
I remove the Group Header band that displays the column titles.
Then I add a row to the table in the detail band
change the left-hand columns to work as titles
and the right-hand ones to bind to the two order fields.
This leaves me space on the right side of the report, so that I can add a chart to appear side by side with the data.
The chart control in the toolbox is called XRChart.
Once I add it to the report, the Chart Designer dialog opens immediately.
This is where you design a chart with all its embedded elements.
On the left side of the dialog you see the hierarchy of these elements
the preview is in the middle, and property panels are on the right.
For this demo, I use the little plus button to add a series to the chart.
In the popup you can see the wide selection of series types available to the chart
bars, points, lines, areas, and many others, some of them in two- and three-dimensional variants.
I choose a Pie series and the preview displays the default configuration.
I switch to the Data page and the structure of the JSON data is displayed in the selection panel.
At the bottom you can see some fields that can be data-bound, most importantly the Argument and Value fields.
In a Pie chart, the value defines the size of a slice of the pie, while the argument defines the label for that slice.
I use lines.count for the value
and lines.product.name for the argument.
This means that the pie will display one slice for each order line associated with an order
and the size of the slice reflects the count for that order line.
Since space in the report will be limited, I choose the Legend item from the chart element selector
and I hide the legend by deactivating the Visibility checkbox in the Options panel.
As another example of the great flexibility of the chart control
I expand the item for the Pie series and choose Label underneath.
I click the ellipsis button for the Text Pattern property.
The placeholders for the pattern are listed on the left
and when I double-click the Argument item, you can see the placeholder inserted into the pattern using curly braces.
I add some extra text to complete the pattern.
The value placeholder will display the total count of the product in parens
and the VP placeholder will insert the percentage of the total order, with a defined format string.
Now I confirm and leave the Chart Designer.
I switch to the report preview and the chart appears correctly to the right of the two top-level data fields.
You may notice that for some orders, the chart displays more than one line item for the same product.
The sample data actually contains such line items, so this result is technically correct.
However, for a chart it may be more useful to summarize such values
so that one slice of the pie is displayed for each unique product.
I bring up the Chart Designer again and select the Pie series.
I choose the Properties page this time, and you can see in the Data group that the current configuration uses a value data member.
Right above this, there is a setting called QualitativeSummaryOptions, and it includes a SummaryFunction.
This is where you can configure a calculation function that will be applied to each set of values associated with one unique argument.
I remove the assignment for the value data member and then bring up the Summary Function dialog instead.
I select SUM as the function, and lines.count as the data field.
I confirm and close all the dialogs, then bring up the preview again.
Now there are no duplicate product names per order anymore
and this simplifies some of the charts that previously had many slices to display.
There's one more change I want to demonstrate on this level.
At this time, I'm using the count field directly to indicate the proportions of items in an order.
This is a bit misleading however, since the sample data includes such very different items as "shirts", "pizza" and "car".
Each line item also has a "price" assigned
so it is possible to calculate the total value of an order line and use this for comparison in the Pie chart.
Please note that the prices used in the sample data are made-up and unrealistic
but the logic makes more sense if I include the prices.
In order to perform this calculation, I right-click the lines item in the hierarchy in the Field List tool window
and I select Add Calculated Field from the context menu.
I change the name of the new field to lineValue and I set its FieldType to Decimal.
Then I configure the Expression to multiply the count with the price.
With this new field in place, I configure the Pie series in the chart one more time.
The Summary Function dialog now offers the field lineValue and I select it instead of the count.
A quick check in the preview and the values have changed
we can't double-check the values yet, because the report doesn't have a detail level.
For now, this completes the first part of the chart demonstration.
For the second sample chart, I add a detail level to the report now.
I right-click the detail band and choose Insert Detail Report from the context menu. I select the level lines.
I add a report header band for the detail report and activate the Field List tool window.
I expand the levels lines and product, and select the four fields product.name, count, price and lineValue.
I drag the fields into the new detail report and a table is generated automatically.
Now I drag the same fields one more time while holding the Shift key, and I drop them in the detail report header this time.
A second table is created, but instead of field bindings it only contains static text.
I modify the cells of this table to use them as captions
Product Name, Count, Price and Line Value.
I add an extra cell to the right
For the extra cell, I use the caption Price History.
and I reduce the widths of the number columns.
I add the same extra column to the data table and change the column widths to reflect the layout of the captions.
I apply header and data styles to all cells.
A quick look at the preview confirms that the detail report works as expected
and it is also possible now to double-check the values against the pie chart.
I add a new XRChart control to the report and position it on top of the extra cell in the detail table.
I'll adjust the location in a moment, after I've configured the chart.
The chart has a much larger size now than the cell it should appear in
so I right-click and choose Fit Bounds to Container from the context menu.
The setup will be very specific this time because I want the chart to be very compact and appear entirely within the table cell.
I begin by adding a Line series.
I deactivate both labels and markers for the series, and I select a red color.
On the Properties page, I expand the nested properties View and LineStyle and set Thickness to 1.
I hide the axes and the legend
and for the Y axis I deactivate the grid lines.
I select the XY-Diagram and use the Properties page to set all its margins to zero
In the configuration of the default pane, I hide the border.
For the primary X Axis, I switch to the Properties page and expand the WholeRange property.
AutoSideMargins is True by default, which would display a margin that depends on the number of series points in the datasource.
I change SideMarginSizeUnit to AxisRangePercentage and SideMarginsValue to 5
so that the margins are consistent for each rendering of the chart.
For the primary Y Axis, I find the same WholeRange settings.
In this case I change AlwaysShowZeroLevel to False
so that the values in the small charts have the maximum possible vertical space available.
With most of the visual changes out of the way, I select the series again.
On the Data page, I expand the datasource hierarchy completely.
I drag the nested field validFrom to define it as the argument for the chart, and I use the price for the value.
Note that these fields are part of a nested collection called prices.
This data does not have a direct relationship to the order lines on the level above.
The collection of prices for each product is available indepedently
and the chart will display that data as a trend graph with each order line in the report.
I switch back to the Properties page of the series.
I check the types configured for the argument and value scales of the series.
The ArgumentScaleType is set to Auto
which defaults to a DateTime scale type for the demo to accommodate the data type of the validFrom field.
I change the property to DateTime to make sure the scale type doesn't change accidentally.
The ValueScaleType is Numerical, which is correct for the demo.
I make a final change to the X Axis, which now includes DateTimeScaleOptions on the top level.
I set SkipRangesWithoutPoints to True.
This will result in a better distribution of the values for this chart setup, since there is very little space within the report layout.
The final detail to configure is the filtering of the nested collection.
The set of demo data I'm using contains order information going back to the start of 2021, as it could be in a real application.
However, the historical price information in the nested collection is not filtered
again to simulate a dataset you may encounter in a real application.
To limit the number of items in that collection, and to provide for consistency between the data rows
I can filter the datasource using the FilterString property on the series object.
I click the ellipsis button for the property and the Filter String Editor appears.
I use the visual editor to set up a filter that includes price data with validFrom greater or equal to 1/1/2021.
This is an example - the filter does not need to correspond to the timeframe used for the top-level report data.
I confirm all the changes and leave the chart configuration dialog.
Then I switch to the report preview.
The carefully configured chart appears in the table cell as expected and displays the history of product prices for each order line.
And that's it for this video, if you liked it, please give us a thumbs up. Or you can leave questions or comments below.
And don't forget to subscribe and ring the bell to get notified whenever we release new content.
Thanks for watching, and Thank you for choosing DevExpress.