When you buy this book you support this site! - Thank You for your support!

Nov 10

Written by: Michael Washington
11/10/2019 1:36 PM  RssIcon

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

Tags: Blazor
Categories:

1 comment(s) so far...


Gravatar

Re: Adding Charts To Server Side Blazor Using ChartJs.Blazor

Hi Michael, thank you for your articles and samples.

It may be very useful if you can write article how to use SandDance framework on Blazor.
Regards,
Oleg.

By Win32nipuh on   1/3/2020 4:42 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation