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 working with the multiple y-axis and it is working fine except for couple of changes I need to do.
Below chart has two Y axis clear sky Energy(blue) and clear sky power(black). I requirement is with tooltip. we need that blue circle must be not visible before EndTime and need blue circle before clear sky energy and black circle before clear sky power same color as shown in legend.
Code:
@using CommonLibrary
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Buttons
@using System.Text
<SfListView DataSource="@points" ShowCheckBox="true" @ref="sfListView" Width="150px">
<ListViewFieldSettings TValue="PointDataInfo" Id="PointId" Text="PointName"></ListViewFieldSettings>
</SfListView>
<SfButton @onclick="AddChartSeries">Multiple Axis Chart</SfButton>
@if (mutipleAxisData.Count > 0)
{
<SfChart Title="Device Metrix" @ref="Chartobj">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="hh:mm tt" Title="Time (s)"
Interval="3" IntervalType="IntervalType.Hours">
</ChartPrimaryXAxis>
<ChartEvents SharedTooltipRender="SharedTooltipEvent"></ChartEvents>
<ChartAxes>
@foreach (var item in mutipleAxisData)
{
<ChartAxis Name=@item.Uom OpposedPosition="false" Title=@item.Uom />
}
</ChartAxes>
<ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
<ChartSeriesCollection>
@foreach (var item in mutipleAxisData)
{
<ChartSeries Type="ChartSeriesType.Line" DataSource=@item.chartDataPointList XName="Timestr" YName="metrics" YAxisName=@item.Uom Name=@item.PointName />
}
</ChartSeriesCollection>
</SfChart>
}
@code {
public SfChart Chartobj;
public class PointInfo
{
public string PointName { get; set; }
public string PointId { get; set; }
public List<ChartDataPoint> chartDataPointList { get; set; }
public string Uom { get; set; }
}
private SfListView<PointDataInfo> sfListView;
private SelectedItems<PointDataInfo> items;
List<PointInfo> mutipleAxisData = new List<PointInfo>();
public PointDataInfo[] points = {
new PointDataInfo { PointName = "Clear sky Energy", PointId = 123,Uom="KW" },
new PointDataInfo { PointName = "Clear sky Power", PointId = 456,Uom="KWH" },
new PointDataInfo { PointName = "Clear sky House", PointId = 789,Uom="W"},
};
public async Task AddChartSeries()
{
mutipleAxisData = new List<PointInfo>();
items = await sfListView.GetCheckedItemsAsync();
foreach (var item in items.Data)
{
PointInfo pointInfo = new PointInfo();
pointInfo.PointId = item.PointId.ToString();
pointInfo.PointName = item.PointName;
pointInfo.Uom = item.Uom;
pointInfo.chartDataPointList = GenerateData();
mutipleAxisData.Add(pointInfo);
}
}
//public List<ChartDataPoint> chartDataPointListKW = new List<ChartDataPoint>();
//public List<ChartDataPoint> chartDataPointListKWH = new List<ChartDataPoint>();
public class ChartDataPoint
{
public DateTime Timestr { get; set; }
//public double metrics { get; set; }
public double metrics { get; set; }
}
protected override void OnInitialized()
{
base.OnInitialized();
}
private List<ChartDataPoint> GenerateData()
{
List<ChartDataPoint> chartDataPointList = new List<ChartDataPoint>();
Random rnd = new Random();
DateTime startTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 00, 00, 00);
for (int i = 0; i < 96; i++)
{
startTime = startTime.AddMinutes(15);
if (i < 10)
{
chartDataPointList.Add(
new ChartDataPoint
{
Timestr = startTime,
metrics = 0
}
);
}
else
{
chartDataPointList.Add(
new ChartDataPoint
{
Timestr = startTime,
metrics = rnd.Next(0, 100)
}
);
}
}
return chartDataPointList;
}
public void SharedTooltipEvent(SharedTooltipRenderEventArgs args)
{
string chartSeries = Chartobj.Description;
string endTime = args.Data[0].PointX.ToString();
args.Text.Clear();
StringBuilder builder = new StringBuilder();
builder.Append("End Time : " + endTime);
foreach (var data in args.Data)
{
builder.Append("<br>" + data.SeriesName + " : " + data.PointY);
//args.Text.Add("End Time : " + endTime + "<br>"+data.PointText+" : " + args.Data[0].PointY + "<br>point2 : " + args.Data[1].PointY);
}
args.Text.Add(builder.ToString());
}
}
Thanks
Pankaj
Hi Pankaj,
Greetings from Syncfusion.
When we analyzed the provided code Snippet, we came to know that you have used the sharedTooltip event and changed the content of the tooltip. So, the marker is not placed based on your requirement in tooltip. We have created a simple blazor application using the provided code Snippet and the same can be downloaded from the below link.
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartTooltip-522701534
Code Snippet:
|
<SfChart Title="Device Metrix" @ref="Chartobj">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="hh:mm tt" Title="Time (s)"
Interval="3" IntervalType="IntervalType.Hours">
</ChartPrimaryXAxis> <ChartAxes>
@foreach (var item in mutipleAxisData)
{
<ChartAxis Name=@item.Uom OpposedPosition="false" Title=@item.Uom />
}
</ChartAxes>
<ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings> <ChartSeriesCollection>
@foreach (var item in mutipleAxisData)
{
<ChartSeries Type="ChartSeriesType.Line" DataSource=@item.chartDataPointList XName="Timestr" YName="metrics" YAxisName=@item.Uom Name=@item.PointName />
}
</ChartSeriesCollection> </SfChart> |
Screenshot:
Kindly, revert us if you have any concerns. If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.
Regards,
Swetha
