Multi-Y-line live chart applying dynamic classes

[???]

Is it possible to implement a multi-Y-line live chart using dynamic classes?

Attachment: live_chart_d50cba2e.zip

[Durga Gopalakrishnan]

Hi Zsjc,

Greetings from Syncfusion.

We have analyzed the required scenario with your attached video. We have prepared sample based on your requirement. We have used two checkboxes to show or hide each series using Visible property with checkbox selection and updated the chart series for each second using Timer. We have attached the sample and video for your reference.

<div class="row">

    <div class="col-md-2">

        <SfCheckBox @onchange="onChange1"></SfCheckBox>

        <SfCheckBox @onchange="onChange2"></SfCheckBox>

    </div>

    <div class="col-md-10" style="height:80%">

        <SfChart @ref="liveChart" Title="CPU Usage">

           <ChartSeriesCollection>

                <ChartSeries Visible="seriesVisibility1"></ChartSeries>

                <ChartSeries Visible="seriesVisibility2"></ChartSeries>

            </ChartSeriesCollection>

        </SfChart>

    </div>

</div>

@code{

   private void onChange1(Microsoft.AspNetCore.Components.ChangeEventArgs args)

    {

        isChecked1 = Convert.ToBoolean(args.Value);

        seriesVisibility1 = isChecked1;

        StateHasChanged();

    }

    private void onChange2(Microsoft.AspNetCore.Components.ChangeEventArgs args)

    {

        isChecked2 = Convert.ToBoolean(args.Value);

        seriesVisibility2 = isChecked2;

        StateHasChanged();

    }

}

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicSeries1046650653.zip

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LiveUpdate1788190099.zip

We already have an online demo for live update of chart. Please check with the below link.

Demo : https://blazor.syncfusion.com/demos/chart/live-chart?theme=fluent

If the provided suggestion doesn’t meet your requirement, please share your requirement in detail so that it will be helpful to analyze further and assist you better. Please let us know if you have any other concerns.

Regards,

Durga Gopalakrishnan.

[???]

If ChartDataPoint is flexible, how should ChartDataPoint and ChartSeries be defined?

[Durga Gopalakrishnan]

Zsjc,

You can dynamically add the series to the chart using SeriesCollection class. We have prepared sample based on that and attached for your reference.

Sample : https://blazorplayground.syncfusion.com/rjrJtdCWzkJdiBlh

UG : https://blazor.syncfusion.com/documentation/chart/how-to/add-remove

When model type is unknown, you can use DynamicObject for datasource as per your requirement. For more information about DynamicObject please check with the below documentation link.

UG : https://blazor.syncfusion.com/documentation/chart/working-with-data#dynamicobject-binding

If the provided suggestion doesn’t meet your requirement, please get back to us. Kindly revert us if you have any other concerns.