We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
HI All,
I am not able to diaplay tool tip for real time chart.
below is the code.
@using CommonLibrary
@using Newtonsoft.Json
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using System.Collections.ObjectModel
@using System.Net.WebSockets
@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.DropDowns
@using System.Text
@inject ILogger<MultipleRealTime> logger
<style>
.e-chart {
height: inherit !important;
width: inherit !important;
}
.e-accumulationchart {
height: inherit !important;
width: inherit !important;
}
test123_svg {
width: 800px !important;
}
</style>
<SfListView DataSource="@points" ShowCheckBox="true" @ref="sfListView" Width="150px">
<ListViewFieldSettings TValue="PointDataInfo" Id="PointId" Text="PointName"></ListViewFieldSettings>
</SfListView>
<SfButton @onclick="AddChartSeries">Real Time Chart</SfButton>
<div class="container" Width="100%">
<SfChart @ref="liveChart" Width="100%" ID="test123">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" LabelFormat="hh:mm:ss tt" Title="Time (s)">
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Usage" Minimum="-20" Interval="20" Maximum="120" LabelFormat="{value}">
</ChartPrimaryYAxis>@*
@*<ChartEvents SharedTooltipRender="SharedTooltipEvent"></ChartEvents>*@
<ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
<ChartSeriesCollection>
@foreach (var series in SeriesCollection)
{
<ChartSeries Type="ChartSeriesType.Line" XName=@series.XName YName=@series.YName DataSource=@series.Data Name=@series.PointName>
</ChartSeries>
}
</ChartSeriesCollection>
</SfChart>
</div>
@code {
private SfListView<PointDataInfo> sfListView;
private SfChart liveChart;
public Boolean isChartLoaded = false;
public class SeriesData
{
public string XName
{
get;
set;
}
public string YName
{
get;
set;
}
public ObservableCollection<ChartDataPoint> Data
{
get;
set;
}
public int PointId { get; set; }
public string PointName { get; set; }
}
public PointDataInfo[] points = {
new PointDataInfo { PointName ="Point 1", PointId = 123 },
new PointDataInfo { PointName = "Point 2", PointId = 456 },
new PointDataInfo { PointName = "Point 3", PointId = 789},
new PointDataInfo { PointName = "Point 4", PointId = 111},
new PointDataInfo { PointName = "Point 5", PointId = 222},
};
public class ChartDataPoint
{
public string Timestr { get; set; }
//public double metrics { get; set; }
public double metrics { get; set; }
}
ObservableCollection<SeriesData> SeriesCollection = new ObservableCollection<SeriesData>();
public async Task AddChartSeries()
{
SelectedItems<PointDataInfo> items = await sfListView.GetCheckedItemsAsync();
await Connection(items.Data);
}
protected override void OnInitialized()
{
base.OnInitialized();
}
public async Task Connection(List<PointDataInfo> reqList)
{
var timerPointChanges = new PeriodicTimer(TimeSpan.FromMilliseconds(1000));
while (await timerPointChanges.WaitForNextTickAsync())
{
foreach (var x in GenerateData(reqList))
{
var seriesData = SeriesCollection.Where(y => x.PointId == y.PointId).FirstOrDefault();
if (seriesData != null)
{
if (seriesData.Data.Count > 10)
{
seriesData.Data.RemoveAt(0);
}
seriesData.Data.Add(new ChartDataPoint
{
Timestr = x.Timestr,
metrics = x.dataValue
});
}
else
{
SeriesData SeriesData = new SeriesData();
SeriesCollection.Add(new SeriesData
{
XName = nameof(ChartDataPoint.Timestr),
YName = nameof(ChartDataPoint.metrics),
Data = new ObservableCollection<ChartDataPoint>
{
new ChartDataPoint
{
Timestr = x.Timestr,
metrics = x.dataValue
}
},
PointId = x.PointId,
PointName = x.PointName
});
StateHasChanged();
}
}
}
}
private List<PointDataInfo> GenerateData(List<PointDataInfo> reqList)
{
Random rnd = new Random();
List<PointDataInfo> pointDataInfoList = new List<PointDataInfo>();
foreach (var pointDataInfo in reqList)
{
pointDataInfoList.Add(new PointDataInfo() { PointId = pointDataInfo.PointId, Timestr = DateTime.Now.ToLongTimeString(),
dataValue = rnd.Next(1, 100) });
}
return pointDataInfoList;
}
}
Hi Pankaj,
By default, tooltip will be displayed while hovering over the data point of chart series. In live update, data point will be added dynamically, so the cursor position changes while updating, so tooltip will be hidden when cursor is not over the point.
You can display the chart tooltip values in annotation by specifying series tooltip ID for element used as annotation. We have prepared sample based on this and attached for your reference. Please check with below sample and video.
|
<SfChart ID="container"> <ChartAnnotations> <ChartAnnotation X="@xVal" Y="50%" CoordinateUnits="@Syncfusion.Blazor.Charts.Units.Pixel" Region="@Syncfusion.Blazor.Charts.Regions.Chart"> <ContentTemplate> <div id="container_tooltip"></div> </ContentTemplate> </ChartAnnotation> </ChartAnnotations> </SfChart> @code { public string xVal = "50%"; } |
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LiveTooltip-726429835.zip
Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AnnTooltip-1312467833.zip
Please let us know if you have any concerns.
Regards,
Durga Gopalakrishnan.
