Blazor-logo

BlazorBlazor Tutorial For Creating Data Visualization Applications

TutorialA performance-oriented JS framework with mobile and desktop compatiblity

What is Blazor?

In this article, we’ll do an exercise with Blazor and LightningChart JS. Blazor is a framework developed by Microsoft’s .NET team. The purpose of Blazor is to carry out single-page applications (SPA), making it much faster and easier to develop a web application.

In my experience, while developing this example, I can say that, unlike an MVC project, you can work with C# code embedded in the same Blazor page. So, you don’t necessarily need a separate controller to run C# on such a page.

The advantage of Blazor is that we can use some programming techniques such as dependency injection where one object supplies the dependencies of another object.

The use of JavaScript changes slightly since we need to make use of the interoperability technique. This technique allows us to call JavaScript methods from C# and vice versa. This Blazor framework can be a bit confusing, so I’ll try to explain the project in simple terms.

Project Overview

This Blazor tutorial will be a great exercise to get started developing Blazor applications that feature advanced charting components. These will be SPAs and I’ll walk you through, step-by-step, to learn how to implement this new framework. So, please download the project template to follow this tutorial. Note that the Blazor charting application will use the LightningChart JS library.

In this exercise, you’ll learn how to create:

  • Line Chart
  • World Map Chart
  • Heatmap Chart

zip icon
Download the project to follow the tutorial

Creating Blazor Project

To create a Blazor project, is necessary to have one of the following requirements:

  • NET Core SDK 3.1. 8 requires Visual Studio 2019 16.7 or later.
  • NET 5.0 requires Visual Studio 2019 16.8 or later.
  • NET 6.0 requires Visual Studio 2022 17.0 Preview 4.1 or later.
  • NET 7.0 requires Visual Studio 2022 17.4. 3 or later.

If you have Visual Studio installed, you’ll see a similar option in the new project window:

Blazor-Create-New-Project

Select “Blazor Server Application” and specify a path and name for the project:

Blazor-tutorial-project-name

To finalize this setup, specify the framework to be used. I recommend choosing .NET 6.0:

Blazor-Specify-Framework

Once the project is created, the file tree will look like this:

Blazor-Project-File-Tree

Adding Work Files

There are certain folders and files you’ll have to work with during this Blazor tutorial. Pay special attention to file naming and case-sensitive files.

Root folder

In the root folder, we need to create three new folders as follows:

blazor-root-folder

iifes folder

  • This folder will contain the iifes files for the LC JS and XY JS libraries lcjs.iife.js and xydata.iife.js.

JS folder

  • This folder will contain our interop.js file. This file will contain the functions to create the JS charts.

Resources

  • This folder will contain the Maps.countries_world.json file. This file contains the geometry data for all countries in the map chart. The map chart waits for this specific path, so I recommend keeping the same names.

Pages folder

In the Pages folder, we need to create the razor pages for the charts (HeatmapChart, LineChart, WorldMapChart). The rest of the files are created by default, so we don’t need to worry about them. You need to keep the same names in upper case because Blazor is case-sensitive.

Blazor-pages-folder

Importing JS Files

Now, we need to import the JSON files and libraries to use in our JavaScript functions. Open the _Layout.cshtml file and write the following imports:

Blazor-Importing-JS-Files
<a href="js/countries_world.json"></a>
    <script src="js/Interop.js"></script>   
    <script src="/iifes/lcjs.iife.js"></script>
    <script src="/iifes/xydata.iife.js"></script>
    <script src="_framework/blazor.server.js"></script>

The blazor.server.js is added automatically by the project.

Configuring Razor Pages

Open a chart razor page, and replicate the following code:

@inject IJSRuntime jsRuntime
@page "/HeatmapChart"

<h1>Sweeping Heatmap Chart</h1>
<!--Container div that holds the rendered chart-->
<div id="chart-element" style="width:auto;height:800px"></div>

@code
{
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            ShowChart();
        }
    }

    async void ShowChart()
    {
        // JS Interop call to the wrapper over LCJS.
        await jsRuntime.InvokeVoidAsync("LCBlazor.heatmapChart");
        StateHasChanged();
    }
}

Let’s review the code

“IJSRuntime” is registered by the Blazor framework and it helps call JavaSscript from .NET. To do this, we need to inject the IJSRuntime abstraction and call one of the following methods:

  • InvokeAsync
  • InvokeAsync
  • InvokeVoidAsync

For this case, we used InvokeAsync that invokes the specified JavaScript function asynchronously. @page is the reference that we need to use in the menu option and note that the names must be the same for this to work.

As you can see, the razor structure is similar to the cshtml file, but the main difference is the ability to use more complex C# code embedded in the HTML body.

  • The onAfterRender lifecycle will execute the code once the component is rendered.
  • The firstRender bool is set to true the first time that the component instance is rendered and it can be used to ensure that the initialization work is only performed once.
  • The showChart function will call the JavaScript function heatmapChart.
  • StateHasChanged notifies the component that its state has changed. When applicable, calling StateHasChanged causes the component to be re-rendered.

The rest of the razor chart files will be similar but with their corresponding chart names. If you want to get the code, you can download the full template.

The DIV chart-element will work as the container for the chart objects. Is necessary to create this HTML element to render the chart.

Configuring Interop JS

The Interop JS file will contain the 3 JavaScript functions to create the 3 charts. Most of the time, we will need to create an assembly for the window module. LCBlazor would be our assembly that will contain our functions for the charts.

window.LCBlazor = {

If you remember, in the HeatmapChart.razor file when calling a specific chart function, we would first declare the LCBlazor module.

// JS Interop call to the wrapper over LCJS.
        await jsRuntime.InvokeVoidAsync("LCBlazor.heatmapChart");

The syntax for creating a function, changes a bit from traditional JavaScript:

// line chart syntax
lineChart: () => {
	const { lightningChart, Themes} = lcjs
}

// World Map chart syntax
worldMapChart: () => {}

// Heatmap syntax
heatmapChart: () => {}

This is more similar to typescript. If you need to add parameters, you just need to declare them inside the parentheses. The code for each chart can be taken from the following examples:

The code is the same, you just have to remove the “require” function, since the libraries are already imported in the layout. Line charts and Heatmap charts have their dedicated articles, explaining the implementation process in more detail. I recommend you review the articles of each one. In the same way, you can download their templates and work with typescript.

Conclusion

Microsoft continues to strive to make web and mobile app development quick and easy. Blazor is a framework that further simplifies the implementation of C# and JavaScript. When trying to implement LightningChart JS, I ran into some hiccups on how to create functions and call them through Interop, which took me a short learning curve.

It was a great surprise to see that the classes and methods of the LC JS and XYData libraries worked normally and without compatibility problems. The performance was not affected and the visual style is still spectacular. If you were thinking of working with Blazor, you can be sure that LightningChart JS will be able to help you in any study and data analysis, through the use of advanced charts.

Blazor-Final-Application
Omar Urbano, Software Engineer

Omar Urbano

Software Engineer

LinkedIn icon
divider-light

Continue learning with LightningChart