11/10/2019 Admin

Adding Charts To Server Side Blazor Using ChartJs.Blazor


image

You can easily add charts to a Blazor application using ChartJs.Blazor.

To demonstrate this, we will add a chart to the https://github.com/ADefWebserver/FatSecretDataExporter project.

Using ChartJs.Blazor

image

We open the Fat Secret Data Exporter project in Visual Studio and right-click on the project node, and select Manage NuGet Packages…

image

We search for and install the ChartJs.Blazor NuGet package.

image

We open the Pages/_Host.cshtml file and add the following code in the HTML body tag:

								<script src="_content/ChartJs.Blazor/moment-with-locales.min.js"              type="text/javascript" language="javascript"></script>     <!-- Reference the included ChartJs javascript file. -->     <script src="_content/ChartJs.Blazor/Chart.min.js"              type="text/javascript" language="javascript"></script>     <!-- This is the glue between the C# code and the ChartJs charts -->     <script src="_content/ChartJs.Blazor/ChartJsInterop.js"              type="text/javascript" language="javascript"></script>     <!-- Some styling -->     <link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />
							

image

Next, we open the GetData.razor page and add the following using statements:

@using ChartJs.Blazor.Charts @using ChartJs.Blazor.ChartJS @using ChartJs.Blazor.ChartJS.Common.Properties @using ChartJs.Blazor.ChartJS.Common.Enums @using ChartJs.Blazor.ChartJS.Common.Legends @using ChartJs.Blazor.ChartJS.Common.Axes @using ChartJs.Blazor.ChartJS.Common.Axes.Ticks @using ChartJs.Blazor.ChartJS.Common.Time @using ChartJs.Blazor.ChartJS.LineChart @using ChartJs.Blazor.Util
							

We add the following properties:

								LineConfig _lineConfig;     ChartJsLineChart _lineChartJs;     private LineDataset<TimeTuple<int>> _WeightDataSet;
							

To configure the chart, we add the following to the OnInitializedAsync() method:

								_lineConfig = new LineConfig         {             Options = new LineOptions             {                 Responsive = true,                 Title = new OptionsTitle                 {                     Display = true,                     Text = "Weight Chart"                 },                 Legend = new Legend                 {                     Display = false                 },                 Tooltips = new Tooltips                 {                     Mode = InteractionMode.Nearest,                     Intersect = false                 },                 Scales = new Scales                 {                     yAxes = new List<CartesianAxis>                     {                         new LinearCartesianAxis                         {                             ScaleLabel = new ScaleLabel                             {                                 LabelString = "Weight"                             }                         }                     },                     xAxes = new List<CartesianAxis>                     {                         new TimeAxis                         {                             Distribution = TimeDistribution.Linear,                             Ticks = new TimeTicks                             {                                 Source = TickSource.Data                             },                             Time = new TimeOptions                             {                                 Unit = TimeMeasurement.Day,                                 Round = TimeMeasurement.Day,                                 TooltipFormat = "MM.DD.YYYY",                                 DisplayFormats = TimeDisplayFormats.DE_CH                             },                             ScaleLabel = new ScaleLabel                             {                                 LabelString = "Date"                             }                         }                     }                 },                 Hover = new LineOptionsHover                 {                     Intersect = true,                     Mode = InteractionMode.Y                 }             }         };
							

In the same method we define the dataset (_WeightDataSet) that will be used for the chart:

								_WeightDataSet = new LineDataset<TimeTuple<int>>         {             BackgroundColor = ColorUtil.FromDrawingColor(System.Drawing.Color.White),             BorderColor = ColorUtil.FromDrawingColor(System.Drawing.Color.Red),             Label = "Weight per Day",             Fill = false,             BorderWidth = 2,             PointRadius = 2,             PointBorderWidth = 2,             SteppedLine = SteppedLine.False,             Hidden = false         };
							

In the method that retrieves the data (into the colFatSecretWeightOutput collection), we use the following code to populate the _WeightDataSet:

								_WeightDataSet.AddRange(colFatSecretWeightOutput         .Select(p => new TimeTuple<int>(new Moment(p.Date), Convert.ToInt32(p.Weight))));     _lineConfig.Data.Datasets.Add(_WeightDataSet);     _lineChartJs.Update();
							

Finally, we use the following code, in the page markup, to display the chart:

								<ChartJsLineChart              @ref="_lineChartJs"              Config="@_lineConfig"              Width="100"              Height="50" />
							

You can see all the changes required to add the chart to the project in the GitHub changeset at this link.

Links

ChartJs.Blazor

https://www.nuget.org/packages/ChartJs.Blazor/

https://github.com/ADefWebserver/FatSecretDataExporter

An error has occurred. This application may no longer respond until reloaded. Reload 🗙