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,
I have a table and a chart as shown below
The chart displays the Error line.
When I change a value in the line Delta Phi, the error is recalculated and displayed, but the chart should also update and I couldn't find how to do it. As I alraedy have a @bind in the Delta Phi input I cannot add an @onchange to trigger the update of the chart.
What is the best way to achieve that? Thank you.
Here is the related code.
<SfChart @ref=@Chart>
<ChartPrimaryXAxis Title="Alpha Rx" Minimum="0" Maximum="180" CrossesAt="-1.5" />
<ChartPrimaryYAxis Title="Error" Minimum="-1.5" Maximum="1.5"/>
<ChartSeriesCollection>
<ChartSeries DataSource="@VOR_Datas" Type="ChartSeriesType.Line"
XName="AlphaRx" YName="Error">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
<br />
<table>
<tr>
<th>Alpha Rx</th>
@foreach (var item in VOR_Datas)
{
<td>@item.AlphaRx</td>
}
</tr>
<tr>
<th>Delta Phi</th>
@foreach (var item in VOR_Datas)
{
<td>
<input type="number" min="0" max="360" step="1" @bind="@item.AlphaMesure">
</td>
}
</tr>
<tr>
<th>Error</th>
@foreach (var item in VOR_Datas)
{
<td>@Math.Round(item.Error = item.AlphaMesure - item.AlphaRx, 1)</td>
}
</tr>
<tr>
<th>TDM VAR</th>
@foreach (var item in VOR_Datas)
{
<td>@item.Tdm30Hz</td>
}
</tr>
</table>
@code {
public List<VOR_Data> VOR_Datas = new List<VOR_Data>();
public SfChart Chart;
protected override void OnInitialized()
{
VOR_Datas.Add(new VOR_Data(0.0, 0.6, 0.6, 31.7));
VOR_Datas.Add(new VOR_Data(45.0, 46.3, 1.3, 31.7));
VOR_Datas.Add(new VOR_Data(90.0, 90.4, 0.4, 30.2));
VOR_Datas.Add(new VOR_Data(135.0, 136.2, 0.4, 30.2));
}
public class VOR_Data
{
public VOR_Data(double alphaRx, double alphaMesure, double error, double tdm30Hz)
{
AlphaRx = alphaRx;
AlphaMesure = alphaMesure;
Error = error;
Tdm30Hz = tdm30Hz;
}
public double AlphaRx { get; set; }
public double AlphaMesure { get; set; }
public double Error { get; set; }
public double Tdm30Hz { get; set; }
}
Hi Bertrand,
Greetings from Syncfusion.
We have added chart data points to series datasource using input elements. Please check with the below snippet and sample.
|
private void ValueChangeHandler1(Syncfusion.Blazor.Inputs.ChangedEventArgs args) { XVal = Convert.ToInt16(args.Value); } private void ValueChangeHandler2(Syncfusion.Blazor.Inputs.ChangedEventArgs args) { YVal = Convert.ToInt16(args.Value); Data.Add(new ChartData { XValue = XVal, YValue = YVal}); } |
Before Update
After Update
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartInput1017007502.zip
Kindly revert us if you have any concerns.
Regards,
Durga Gopalakrishnan.
Dear Durga,
Thank you for your reply.
Unfortunately your example doesn't answer my request. I do not want to add a new value to the chart, but change an already existing value.
Here is a more precise illustration of want I want to achieve.
I didn’t succeed so far that the chart updates after I change a value in the X2 row.
I also made a simpler code example you can find below.
<SfChart @ref=@Chart>
<ChartPrimaryXAxis Title="X1" Minimum="0" Maximum="180" CrossesAt="-1.5" />
<ChartPrimaryYAxis Title="Y" Minimum="-1.5" Maximum="1.5" />
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartData" Type="ChartSeriesType.Line"
XName="ValX1" YName="ValY">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
<br/>
<table>
<tr>
<th>X1</th>
@foreach (var item in ChartData)
{
<td>@item.ValX1</td>
}
</tr>
<tr>
<th>X2</th>
@foreach (var item in ChartData)
{
<td><input type="number" min="0" max="360" step="1" @bind="@item.ValX2"></td>
}
</tr>
<tr>
<th>Y</th>
@foreach (var item in ChartData)
{
<td>@Math.Round(item.ValY, 1)</td>
}
</tr>
</table>
@code {
public List<LineChartData> ChartData = new List<LineChartData>();
public SfChart Chart;
protected override void OnInitialized()
{
ChartData.Add(new LineChartData(0.0, 0.6, 0.6));
ChartData.Add(new LineChartData(45.0, 46.3, 1.3));
ChartData.Add(new LineChartData(90.0, 90.4, 0.4));
ChartData.Add(new LineChartData(135.0, 136.2, 1.6));
}
public class LineChartData
{
private double x2;
public LineChartData(double x1, double x2, double y)
{
ValX1 = x1;
ValX2 = x2;
ValY = y;
}
public double ValX1 { get; set; }
public double ValX2 {
get { return x2; }
set {
x2 = value;
ValY = x2 - ValX1;
}
}
public double ValY { get; set; }
}
}
Th
Hi Bertrand,
We suggest you to call chart RefreshAsync method to update the chart series data point values based on changed input value. We have attached modified sample for your reference. Please check with below snippet and sample.
|
@code { SfChart chart; private void ValueChangeHandler1(Syncfusion.Blazor.Inputs.ChangedEventArgs args) { XVal = Convert.ToInt16(args.Value); } private void ValueChangeHandler2(Syncfusion.Blazor.Inputs.ChangedEventArgs args) { YVal = Convert.ToInt16(args.Value); Data[0].XValue = XVal; Data[0].YValue = YVal; chart.RefreshAsync(false); } } |
Before Update
After Update
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataUpd1085140319.zip
Kindly revert us if you have any concerns.
Regards,
Durga Gopalakrishnan.
