Adding a Syncfusion Blazor Chart and Pivot Table to a Radzen Project

Following my Angular post

Syncfusion provides a Community version of their controls for small business with less than a $1 million USD in annual gross revenue and 5 or fewer developers and individual developers Community License or Trial Version

To get started create a Blazor Application.

I called the my project SyncfusionChart How to create a project

My sample MSSQL is the Northwind database How to get it

Infer the MSSQL database call it Northwind How to infer Schema

Make sure all the Views are selected
image

Create a page for the Chart Control

Create an empty Page and call it Home
Tick “Start page”, “Include in navigation” and then save the form

image

In the page load event

Type : Invoke data source method

Name : getSummary_of_Sales_by_Years

Parameters: Add

Name : $top

Value: 100

image

Then: add

Type: Set property

Name: Summary

Value: ${result}

Property type : IEnumerable

image

Go to the toolbox and drag the html5 control onto the form.

image

Add the following to the HTML content

    </ChartSeriesCollection>
</EjsChart>

Create a page for the Pivot View

Create a page call it Pivot View
In the page load event
Type : Invoke data source method
Name : getProductSalesFor1997

Then: add
Type: Set property
Name: Orders
Value: ${result}
Property type : IEnumerable

Add the html control and add the following

              <PivotViewRows>
                  <PivotViewRow Name="CategoryName"></PivotViewRow>
                  <PivotViewRow Name="ProductName"></PivotViewRow>
              </PivotViewRows>
              <PivotViewValues>
                  <PivotViewValue Name="ProductSales" Caption="Units Sold"></PivotViewValue>
                   
              </PivotViewValues>
          </PivotViewDataSourceSettings>
      </EjsPivotView>

Now ran the Application you will get errors in the Output Window
Stop the Application then go to Settings and add the following pages to Code Generation ignore List

These are files we will be modifying and so not want Radzen to overwrite them.

_Imports.razor
_Host.cshtml

image

Next we open VS 2019 or VS Code to do the rest of the modifying How to

We need to add the following Nuget packages to your project How to

Syncfusion.Licensing
System.Text.Json
Syncfusion.EJ2.Blazor

image

Next we will need to create a Startup partial class

I called It SyncfusionStartup.cs

Copy the following code

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Syncfusion.EJ2.Blazor;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SyncfusionChart
{
public partial class Startup
{
partial void OnConfigureServices(IServiceCollection services)
{
services.AddSyncfusionBlazor();
}
partial void OnConfigure(IApplicationBuilder app, IWebHostEnvironment env)
{
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("My License");

    }


}

}

Next you will need to get a Syncfusion Licence for blazor so you can replace “My License” with your license, you may need need to replace the namespace with your project name as well. How to

Then add the following using statements to _Imports.razor

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Charts
@using Syncfusion.EJ2.Blazor.PivotView

image

Add the Following to Pages_Host.cshtml under the body tag

<link href="https://cdn.syncfusion.com/ej2/17.4.54/material.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/17.4.54/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/17.4.54/dist/ejs.interop.min.js"></script>
<link href="https://cdn.syncfusion.com/blazor/18.1.36-beta/styles/bootstrap4.css" rel="stylesheet" />

image

Now go back to radzen and run the project.

Chart

Pivot View

2 Likes

Great post Al! Thanks for sharing!

Amazing, thank you so much! This post should be made sticky or put into the documentation or something...

Stephen B

I just went through the post. Good stuff. I see a lot potential for Syncfusion components in RadZen apps.

Changes made in the latest Syncfusion Blazor version (From 18.1.0.36 version)
Changes
Nuget Package

Syncfusion.EJ2.Blazor to Syncfusion.Blazor

Components

<EjsChart></EjsChart>  to  <SfChart></SfChart>
<EjsPivotView></EjsPivotView>	 to <SfPivotView></SfPivotView>

Scripts
In Previous versions, you would load scripts ej2.min.js and ejs-interop.min.js manually in the application, but now this is not required .

References

@using Syncfusion.EJ2.Blazor to @using Syncfusion.Blazor
@using Syncfusion.EJ2.Blazor.Charts to @using Syncfusion.Blazor.Charts
@using Syncfusion.EJ2.Blazor.PivotView to @using Syncfusion.Blazor.PivotView

1 Like