1. Home
  2. Forum
  3. Blazor
  4. DateTime X Axis on Scatter Chart

DateTime X Axis on Scatter Chart

Let me explain in short words what I want to achieve.
I use the azure insight rest api to retrieve availability information.
https://dev.applicationinsights.io/apiexplorer/metrics

What I finally get is a list of objects which have 
DateTime When
float? DurationAVG (average ping duration)
bool Success (failed or not).

First I gave it a try with a linechart.
Since I wanted a colored output (failed: red, green: success) I used two Y axis one bound with failed and the other with success entries.
To have two axis was also needed since DurationAVG is about a second and failed more than 20.
To avoid "empty lines" I had to add for every failed point a null value in the success list.
And also for every Success Point an entry in the Failed list.

So far this works - but the performance is very poor - and on mobile devices the chart often shows an error (due to blazor I don't see what it is just the "error reload" at the bottom) - but I learned when I first load the empty grid an later the data it works (mostly) without crashing.
With this approach (due to the needed null entries) I almost double my datapoints - also bad for performance.

Anyhow - the natural chart for data like this (also azure portal uses it) is a Scatter Plot.
But unfortunately your controls does only support numeric X axis - not DateTime (or am I missing something).

I could display the data with some "tricks". Since you control doesn't offer binding for the X-Property (else I could have used When.Ticks) I simply implemented a WhenTicks long in the data item and bind X to this.

This works so far - the chart looks good - but I have several problems.
First ToolTip - there is no dataitem in the Template - but I could do this using ToolTipMappingName and ${point.tooltip} so that the tooltip displays the DateTime of the entry.

What I am missing is X axis labeling - there I see (of course) nasty number (the ticks) instead of  the date / time of the entries.

So is there a way to bind a scatter plot with DateTime data?

Since I found no way to paste code here - I show my source in a screenshot.


5 Replies 1 reply marked as answer
DG Durga Gopalakrishnan Syncfusion Team June 17, 2021 03:52 PM UTC

Hi Manniat, 
  
We suggest you to specify ValueType as DateTime for ChartPrimaryXAxis to render chart with date time axis. By default, tooltip and data label will be formatted automatically based on specified axis format. We have prepared sample based on your requirement.  
  
Code Snippet : 
  
<SfChart> 
    <ChartPrimaryXAxis LabelFormat="dd MMM yyyy" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"> 
    </ChartPrimaryXAxis> 
</SfChart> 
  
Screenshot : 
 
  
  
  
Kindly revert us if you have any concerns. 
  
Regards,  
Durga G 


JT Joseph Tan June 23, 2021 03:45 AM UTC

Hi There

When the Chart X-Axis ValueType is "Syncfusion.Blazor.Charts.ValueType.DateTime"   and the Chart Selection Mode 

is any value except NONE, weird things happen:

  • The Chart OnPointClick Event behaves like an OnPointDoubleClick (must click twice before the event fires)
  • When zooming in / out, the chart will occasionally throw this error (and crash the page)
2021-06-23 15:34:41.522 +12:00 [WRN] Unhandled exception rendering component: Invalid cast from 'Double' to 'DateTime'.System.InvalidCastException: Invalid cast from 'Double' to 'DateTime'.   at System.Double.System.IConvertible.ToDateTime(IFormatProvider provider)   at Syncfusion.Blazor.Charts.Selection.SelectionComplete(ChartSelectedDataIndex index, SelectionMode selectionMode)   at Syncfusion.Blazor.Charts.Selection.PerformSelection(ChartSelectedDataIndex index, String elementId)   at Syncfusion.Blazor.Charts.Selection.selectDataIndex(List`1 indexes)   at Syncfusion.Blazor.Charts.Selection.RedrawSelection(SelectionMode oldMode)   at Syncfusion.Blazor.Charts.SfChart.OnAfterRenderAsync(Boolean firstRender)



The workaround is to use  SelectionMode.None

<SfChart @ref="@MyChart" SelectionMode="Syncfusion.Blazor.Charts.SelectionMode.None" >


But, this should be considered a bug!

Using 19.1.0.69 


DG Durga Gopalakrishnan Syncfusion Team June 24, 2021 02:03 PM UTC

Hi Joseph, 
 
We are validating your reported scenarios. We will check this and update the status within one business day(25th June 2021). We appreciate your patience until then. 
 
Regards, 
Durga G 


DG Durga Gopalakrishnan Syncfusion Team June 28, 2021 03:18 AM UTC

Hi Joseph, 

Thanks for being patience. We have ensured your reported scenarios. Please check with below options. 

# 1 : The Chart OnPointClick Event behaves like an OnPointDoubleClick 

Since both selection and point click are enabled, at initial click, selection is processed and at second click OnPointClick is triggered. We have considered this as a bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 6th July 2021. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 
 

# 2 : When zooming in / out, the chart will occasionally throw this error 

We are the reported console error while performing selection with datetime axis. So, we have considered this as a bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 6th July 2021. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 
 
 
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

Regards, 
Durga G 


BP Baby Palanidurai Syncfusion Team July 7, 2021 10:49 AM UTC

Hi Joseph, 

We have resolved the reported issues and generated custom nugget. We request you to ensure your application by installing this custom nugget.  

Custom NuGet:  


We have attached the document on how to add custom nugget. 


Kindly revert us if you have any concerns. 

Regards, 
Baby. 



Marked as answer
Loader.
Up arrow icon