SfChart - Add segments dynamically
Hi there,
is it possible to add ChartSegments (that come from e.g. a SQL-Server) on the fly?
When I remove these three hard-coded segments, how can I dynamically add them from a function call (e.g. a button click event)?
When I remove these three hard-coded segments, how can I dynamically add them from a function call (e.g. a button click event)?
Any idea?
Cheers,
Volker
Volker
SIGN IN To post a reply.
3 Replies
Hi Volker,
Based on your request we have prepared a sample for your reference. In which we have dynamically added the segments for MultiColoredArea on button click as requested. Please find the sample, code snippet and screenshot below.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiColorSegements-169130816.zip
Code Snippet:
|
//add your additional code here
<SfButton @onclick="Click">Add Segments</SfButton>
<SfChart @ref="chartInstance" Title="Particulate Levels in Rainfall">
//add your additional code here
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartPoints" SegmentAxis="Segment.Y" Name="Rainfall" XName="Period" YName="RainfallInfo" Width="2" Type="ChartSeriesType.MultiColoredArea">
<ChartEmptyPointSettings Mode="EmptyPointMode.Average"></ChartEmptyPointSettings>
<ChartSegments>
@foreach (SegmentData segment in SegmentCollection)
{
<ChartSegment [email protected] [email protected]></ChartSegment>
}
</ChartSegments>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code {
SfChart chartInstance;
public class SegmentData
{
public double Value { get; set; }
public string Color { get; set; }
}
List<SegmentData> SegmentCollection = new List<SegmentData>();
void Click()
{
SegmentCollection.Add(new SegmentData
{
Value = 410,
Color = "red"
});
SegmentCollection.Add(new SegmentData
{
Value = 420,
Color = "blue"
});
SegmentCollection.Add(new SegmentData
{
Value = 430,
Color = "green"
});
chartInstance.Refresh();
}
//add your additional code here |
Screenshot:
Before Click:
AfterClick:
Let us know if you have any concerns.
Regards,
Srihari M
SIGN IN To post a reply.
