Sparklines are small charts with limited layout options.
They are perfect for inline graphs, since they display only the data itself, with few adornments.
View styles are limited, and developers must supply the sparkline control with dedicated data sources
which contain precisely the set of data that will be displayed
advanced data shaping functionality is not included.
The following demo is based on the scenario previously used to demonstrate the XRChart control
and it includes two techniques to deal with a custom data source setup.
In a previous video, you saw me configure a chart control for a detail cell in a report.
I have opened this demo and you can see the report on screen now.
The per-row chart control in the detail region demonstrates perfectly what a sparkline usually looks like.
Using the chart for this setup was rather complicated.
The XRChart is a very flexible control and it provides many options
but the preconfigured defaults are not optimal for a very compact display with few visual elements.
The XRSparkline on the other hand is made for precisely this purpose.
I remove the chart from the table now and add the sparkline in its place.
I use the context menu command Fit Bounds to Container so that the control utilizes the space in the table cell completely.
As you can see, the visual appearance of the sparkline is similar to that of the chart I used previously.
However, the sparkline only supports a small subset of the view styles offered by the chart.
You can see the selection in the combo box for the View property in the Smart Tag menu.
I set the Data Member to lines.product.prices and the Value Member to price - the same setup as the chart that was used before.
I switch to the preview and the sparkline works
only the line looks completely different from the previous result.
The reason is that the sparkline uses one standard setup for its argument scale, and this is not configurable.
A qualitative scale is configured, so all values are displayed in their natural order within the datasource collection.
The sparkline does not have a filtering feature like the chart
so that all the historic price information in the sample datasource is included at once.
I will demonstrate two techniques to change the sparkline appearance to be the same as the chart.
Both approaches require me to use a different type of datasource.
The JsonDataSource that was added by the report wizard is very convenient
because it automates the process of loading JSON data and making it available to the report as a schema.
However, to support the sparkline it is necessary to process the data after it's loaded, and in C# this requires static types.
I have now added a file to the project that declares four classes.
These represent the types of the JSON data that you've seen before in the chart demo.
The top of the structure is the Order type, which includes a list of OrderLines.
Each OrderLine refers to a Product, which includes a list of ProductPrices.
Back in the report designer, I use the top-level Smart Tag menu to create and assign a new datasource.
I choose Object in the wizard
and then I select the type Order from the list of types found in the demo assembly.
This datasource will only be used to provide a design-time schema to the report designer, not to load the actual data.
I activate the Field List tool window.
You can see that the new ObjectDataSource is included in addition to the JsonDataSource.
The structure it represents is the same, distinguishable only by the capitalization of the property names in the usual C# style.
One note: the lineValue calculated field is now displayed as part of the new ObjectDataSource
calculated fields are automatically associated with the datasource that is assigned to the report.
This is the best place to supply a datasource from code, if necessary.
Since the required NuGet package has been added to the project already, the code to load the JSON file is simple.
The resulting collection is assigned directly to the DataSource property.
To display the report with its new runtime datasource, I run the included WPF application.
It is set up with a previewer, and the report comes up as expected.
This change to a typed datasource was easy
and of course, depending on the type of data binding you use, you may already have static data types in your project.
Of course nothing has improved so far about the sparkline data display.
But this is the point where I have a choice.
There is now a defined place in the application code where the data is loaded, and one option I have is to process the data after it's loaded,
but before binding it to the report.
The other choice is to specifically supply the data for each sparkline instance when it's needed
but I'll show you the first option first.
I add a block of code to the event handler.
This code processes the entire data structure, and on the nested level of the product prices
it filters the list to include only prices within a certain date range.
Then it sorts the prices by the date field.
You may think that the code is rather complex for the task at hand, and you're probably correct!
However, this example demonstrates how data loaded from any source can be processed and reshaped entirely
to any custom requirements, before binding it to the report.
I run the application and the result is obvious
the sparkline now displays only a small number of values
and the shapes of the curves are the same that were displayed previously when I used the chart control.
Back in Visual Studio
I revert the last changes by commenting the code I inserted and reactivating the simple direct assignment of the loaded data.
In the designer, I select the sparkline control and add a handler for the BeforePrint event.
The code for the handler retrieves the current OrderLine object using a helper method on the report
and then sets the datasource for the sparkline by filtering and sorting the nested price details as before.
A final important step is necessary now
I reset the DataMember property on the sparkline control.
This is important because the dynamically constructed datasource lists
do not have the nested structures of the top-level report datasource.
I run the application one more time and you see the same result for the sparkline as before.
This concludes the demo
you have seen that the sparkline requires a datasource with the correct content
and that there are several methods to create that content.
And that's it for this video. If you liked it, please give us a thumbs up.
Or you can leave us 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 thankyou for choosing DevExpress.