How to configure smoothly scrolling chart with fixed time duration?

[Richard]

Hi,

I want to display data that changes over time in a line chart.

The X-axis needs to display a time interval that is always as follows:

 Minimum="DateTime.UtcNow.AddMinutes(-1)"

 Maximum="DateTime.UtcNow.AddSeconds(10)"

These settings worked in version 18.3.x.x but they don't work in version 18.4.0.33 - the whole UI freezes.

I also want it to scroll as smoothly as possible - similar to the sample:

https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart

Please can you tell me how to do this?

Thanks and best regards,

Richard

[Srihari Muthukaruppan]

Hi Richard,   

  

Sorry for the inconvenience.  

     

We have analyzed your query. From that we would like to let you know that we have already considered this scenario as a bug and logged a bug request on this and you can keep track of it from the below feedback portal link.    

       

Feedback Link: https://www.syncfusion.com/feedback/21321/minimum-and-maximum-property-is-not-working-while-using-datetime-utcnow 

 

This fix will be available in our weekly patch release which is scheduled to be rolled out on or before 19 January 2021. We appreciate your patience until then.    

     

Regards,    

Srihari  

[Srihari Muthukaruppan]

Hi Richard, 

 

We are glad to announce that our v18.4.35 patch release is rolled out, we have added the fix for the reported scenario in .NET 5. And you can use the latest (18.4.35) Syncfusion.EJ2.Blazor NuGet package version and updated interop CDN file to get rid of the reported issue. 

 

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

 

Code snippet: 

<SfChart Title="Inflation - Consumer Price" Theme="@Theme"> 

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Minimum="@min" Maximum="@max" > 

        </ChartPrimaryXAxis> 

        <ChartSeriesCollection> 

            <ChartSeries DataSource="@ChartData" XName="xValue" Width="2" 

                         Opacity="1" YName="yValue" Type="ChartSeriesType.Line"> 

            </ChartSeries> 

        </ChartSeriesCollection> 

    </SfChart> 

 

@code{ 

    private string CurrentUri; 

              public DateTime min = DateTime.UtcNow.AddMinutes(-1), 

 max = DateTime.UtcNow.AddMinutes(25); 

    public class LineChartData 

    { 

        public DateTime xValue { get; set; } 

        public double yValue { get; set; } 

        public double yValue1 { get; set; } 

    } 

    public List<LineChartData> ChartData = new List<LineChartData> 

{ 

        new LineChartData { xValue = DateTime.UtcNow.AddMinutes(5), yValue = 21, yValue1 = 28 }, 

        new LineChartData { xValue = DateTime.UtcNow.AddMinutes(10), yValue = 24, yValue1 = 44 }, 

        new LineChartData { xValue = DateTime.UtcNow.AddMinutes(15), yValue = 36, yValue1 = 48 }, 

        new LineChartData { xValue = DateTime.UtcNow.AddMinutes(20), yValue = 38, yValue1 = 50 }, 

    }; 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari