Creating Charts with the Telerik Chart Component for Blazor

It’s not just that the Telerik Chart component for Blazor makes it easy to create charts – it’s that the Chart component makes it easy for you to pick and choose the data that you want to display.

The Telerik UI for Blazor Chart component provides two ways to bind data. One method is appropriate when each point on the chart is represented by a single object that holds both the “data to be graphed” (the vertical/Y-axis) and the data’s category (the horizontal/X-axis labels). In this scenario, you just need to have one collection of objects that you pass to the Chart (the Telerik team calls this “Attach Series Items to Their Categories” binding).

And that’s great if the data you retrieve from your database is in the format that the user wanted for their graph. The reality is that, usually, the data won’t match your chart’s format. Fortunately, the Telerik Chart’s most flexible databinding option (“Independent Series”) gives you the ability to massage your incoming data into the data your chart needs.

In Independent Series binding, you pass two collections to the Chart: One collection of “data to be graphed” and another collection of “category labels.” With this binding style, you can massage your incoming data into the two collections to get the chart your user wants.

There are, initially, only two requirements for Independent Series binding: Each collection must have the same number of items, and the order of each collection must correspond (i.e. the first label in the categories collection must be for the first item in the “data to be graphed” collection).

Extracting Data

In my case, I’m retrieving a collection of Data Transfer Objects (DTOs) that don’t correspond to points on the chart – I have to manipulate my DTOs to extract the data I want. Specifically, I’m retrieving a collection of SalesDTO objects, with each SalesDTO object having several useful properties: CustomerId, Year, Month, QuantitySold, ValueSold, etc. Sadly, I only want to graph some of those DTOs, so I need to extract just the data and labels I want.

In a Blazor component, the code to retrieve the initial SalesDTOs for a single customer whose Id is passed to my component in as a parameter might be as simple as this:

[Parameter]
public int custId {get; set;}

@code {
   private IEnumerable<SalesDTO> graphSales;

   protected async override Task OnInitializedAsync()
    {
       graphSales = await SalesRepository.GetSalesByCustomerIdAsync(custId);
       await base.OnInitializedAsync();
    }

My first step in graphing this data is to create the two collections I need from this collection of SalesDTO objects: The sales numbers (the “data to be graphed,” the vertical or Y-axis data) and the categories for each of those sales numbers (the labels, the horizontal or X-axis data). For this chart, I’m just going to extract the QuantitySold for each month (the data for the Y-axis) and the names of months (the category labels for the X-axis). My first step is to declare two fields to hold the data to be graphed (a field I’ll call quantitiesSold) and the categories for the X-axis (I’ll call that field months).

To be able to work with the Telerik Chart, those fields have to look like this:

private IEnumerable<object> quantitiesSold;
private string[] months;

I say “have to” because there are some restrictions here, also. The data to be charted must be a collection of IEnumerable, and the collection of category names must be an array of either object or string (I’ve gone with string in my example).

While my GetSalesByCustomerIdAsync method has returned all the sales for the customer for every year, I only want to graph the sales for the current year. I also only want to show on the chart those months where the customer actually bought something. The code to fill my fields from my SalesDTO objects with just the data I want looks something like this (for now, this code also goes in my component’s OnInitializedAsync method):

quantitiesSold = (from s in graphSales
                                where s.Year == "2018"
                               orderby s.MonthOrder
                             select (object) s.QuantitySold);
months = (from s in graphSales
                   where s.Year == "2018"
                  orderby s.MonthOrder
                  select s.Month).Distinct().ToArray();        

Displaying the Data

Having prepared the two required collections (data and labels), configuring the Chart to display the data is easy. First, I add the chart to my component using the TelerikChart element. The default width for a Chart is almost always too narrow, so in this example I’ve also set the width of the Chart to the full width of whatever container the Chart is inside of:

<TelerikChart Width="100%">
</TelerikChart >

The next step is to add the data to be graphed (my Y-axis). I do that with a ChartSeries element inside the ChartSeriesItems element. On a ChartSeries element, I must use the Data attribute to tie the series to my quantities Sold field of “data to be graphed.” In this example I’ve also used the Type attribute to specify what kind of chart I want (a line graph in this case). I don’t have to do specify the type, but, if I don’t, I’ll get a Columns-type chart (a bar chart with the bars rising vertically from the X-axis), which is not what I want. Here’s the ChartSeries element configured to show my quantitiesSold as a line graph:

<TelerikChart Width="100%">
   <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Data="@quantitiesSold" >   
   </ChartSeriesItems>

My next step is to specify the data source for the categories for the X-axis (which are held in my months field). I do that with a ChartCategoryAxis element inside a ChartCategoryAxes element. I use the ChartCategoryAxis’s Categories attribute to tie the X-axis to my field containing the month names. Here’s that markup:

  </ChartSeriesItems>
  <ChartCategoryAxes>
    <ChartCategoryAxis Categories="@months"></ChartCategoryAxis>
  </ChartCategoryAxes>
</TelerikChart>

This gives the user the display in figure 1 below.

And that’s the beauty of Independent Series binding: No matter what the format of your incoming data is, you can still give your users the graph they want.

Try it Today

To learn more about Telerik UI for Blazor components and what they can do, check out the Blazor demo page or download a trial to start developing right away.