TeeChart in a MudBlazor web

Introduction

Taking a quick look at the MudBlazor environment https://mudblazor.com/, we thought it would be interesting to put a TeeChart in there.

What we’ll look at in this article:

• the use of a basic MudBlazor template
• the use of TeeChart’s HTML5 component on the web page
• the mix of native C# code and javascript code that can be used to enhance the output

Reference project source code: TeeChart On MudBlazor example project

Setup

MudBlazor

I started by installing the MudBlazor components following the steps on this page:

https://mudblazor.com/getting-started/installation

I called the solution “MudBlazorTeeChart” which gave me a solution that looks like this:

Once run that gave me this webpage:

The Weather page has data, so is the best candidate for an easy implementation of TeeChart.

TeeChart

We’ll add TeeChart to the weather data page.

There are three principal format options:

• static image.
• svg, partially active chart.
• html5 canvas/javascript. fully active chart.

In this article we’ll concentrate on the last option, the html5-javascript formatted chart.

Setting up the client project

The key elements to look at are:

• Reviewing the WeatherForecast data structure
• Adding the TeeChart Blazor assembly to the NET project (see https://www.nuget.org/packages/Steema.TeeChart.NET.Blazor)
• Adding the HTML5 Canvas (see https://www.w3schools.com/html/html5_canvas.asp)
• Adding the TeeChart code, both native C# and javascript for enhancements.

Steps:

Add the TeeChart dependency to the MudBlazorTeeChart.Client project. Using the Nuget.org server via the Visual Studio Nuget Manager:

Note, here we have used the Steema.TeeChart.NET.Blazor Nuget but we could also have used the Steema.TeeChart.NET Nuget that contains the same required assembly.

Once the assembly is in the project we’ll add the Razor page that creates the Chart and loads it with the data.

Retouches to the date format

Before adding TeeChart I took a look at the source data structure, “WeatherForecast”, currently housed in Weather.Razor unit and decided to move it to a new unit called WeatherForecast.razor. The intention being to make it’s independent nature more obvious when referencing from the Weather table and the Weather “Tee”Chart that we’ll house in a new Razor unit.

I changed the data format of the WeatherForecast data to use DateTime. That required an adjustment to the method calls that handle the date.

WeatherForecast.razor looks like this:

In Weather.razor, the Date initialiser will now look like this:

var startDate = DateTime.Now;

and we’ll format the date in this way in the table:

<MudTd DataLabel="Date">@context.Date.ToString("MMMM dd, yyyy")</MudTd>

The solution should now compile and run as before. You’ll see a different date format for the first column of the table.

Creating the Chart in a Razor component

The unit that runs the chart code is called WethChartGen.Razor.

It includes using references to TeeChart and System.IO:

@using Steema.TeeChart;
@using System.IO;
@using System.Drawing;

and the method to set the Javascript Chart:

GetJSChart(WeatherForecast[] forecasts, int width, int height)

The method creates the C# TeeChart and Series

Steema.TeeChart.TChart mChart = new TChart();
Steema.TeeChart.Styles.Bar mBar = new Steema.TeeChart.Styles.Bar();

and loads the Weather data:

foreach (WeatherForecast forecast in forecasts)
{
int aDate = (int)Math.Truncate(forecast.Date.ToOADate()); //day stamp
mBar.Add(aDate, forecast.TemperatureC);
}

Using a memorystream for transport, the Chart is exported:

MemoryStream ms = new MemoryStream();
mChart.Export.Image.JScript.Width = width;
mChart.Export.Image.JScript.Height = height;
mChart.Export.Image.JScript.DoFullPage = false; //inline, no page header tags
mChart.Export.Image.JScript.CustomCode = getCustomCode(mChart);
mChart.Export.Image.JScript.Save(ms);

The Chart is using some clientside javascript enhancements from the getCustomCode method.

The chart is then returned as a set of Javascript instructions, to act on an HTML5 Canvas:

string result = "<script> var "+chartName+"; " + reader.ReadToEnd() + "</script>";

Placing the Chart on the page

We’ll place the chart just under the data data table on the Weather.Razor page. The existing page already has the definition for the MudTable on the page. We’ll add a new tag for the HTML5 Chart Canvas just below the end table tag ():

<canvas id="canvas1" width="1400" height="300" style="border: 1px solid #808080;">
This browser does not seem to support HTML5 Canvas.
</canvas>

Note the two code tags below the Canvas:

@((MarkupString)chartJS)
@((MarkupString)(chartResize))

These call two variables, chartJS and chartResize, that are defined as two string variables in the code block below. They will contain script tags to run inline on the page. The chartJSvariable is populated by the GetJSChartmethod, that we have discussed earlier in this document, that is called in the WeatherRazor page’s OnInitializedAsyncmethod.

The second variable, chartResize, introduces a complementary technique, the use of a javascript unit, called utils.js, placed bewlow the wwwroot/js folder. This unit can be used to place an complementary javascript code required. In this case it controls the chart resizing when a page is resized.