How to update the chart using button?

I am going to update the data on the chart using the button. I tried to find and solve various cases, but it was not successful.

This is XAML Code

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="12*"/>
    </Grid.RowDefinitions>
    <Button Click="StartChart">
        Start
    </Button>
    <lvc:CartesianChart Series="{Binding Series}"
                        Grid.Row="1">
        <lvc:CartesianChart.AxisX>
            <lvc:Axis LabelFormatter="{Binding Formatter}"></lvc:Axis>
        </lvc:CartesianChart.AxisX>
    </lvc:CartesianChart>
</Grid>

This is Behind Code

public void StartChart(object sender, RoutedEventArgs e)
    {
        var dayConfig = Mappers.Xy<DateModel>()
            .X(dayModel => (double)dayModel.DateTime.Ticks / TimeSpan.FromHours(1).Ticks)
            .Y(dayModel => dayModel.Value);
        Series = new SeriesCollection(dayConfig)
        {
            new LineSeries
            {
                Values = new ChartValues<DateModel>
                {
                    new DateModel
                    {
                        DateTime = DateTime.Now,
                        Value = value1
                    },
                    new DateModel
                    {
                        DateTime = DateTime.Now.AddMinutes(30),
                        Value = value2
                    },
                    new DateModel
                    {
                        DateTime = DateTime.Now.AddHours(1),
                        Value = value3
                    },
                    new DateModel
                    {
                        DateTime = DateTime.Now.AddHours(2),
                        Value = value4
                    }
                },
                Fill = Brushes.Transparent
            }
        };

        Formatter = value => new DateTime((long)(value * TimeSpan.FromHours(4).Ticks)).ToString("t");
        value1++;
        value2--;
        value3++;
        value4--;
        DataContext = this;
    }
    public Func<double, string> Formatter { get; set; }
    public SeriesCollection Series { get; set; }

Each time you click a button, you want the values of the chart to change. Please, give me a solution.

You want to use

public static readonly DependencyProperty FormatterProperty = DependencyProperty.Register(
    nameof(Formatter), typeof(Func<double, string>), typeof(MainWindow), new PropertyMetadata(default(Func<double, string>)));

and change public Func<double, string> Formatter { get; set; } to

public Func<double, string> Formatter
{
    get => (Func<double, string>)GetValue(FormatterProperty);
    set => SetValue(FormatterProperty, value);
}

And the same to all other Binding-intended variables.

This is called databinding to dependency properties. When the DependecyProperty value changes, so will the bindings. And in this way you will not need to continually re-assign DataContext = this;. Only set DataContext once. DependencyPropertys do the rest.

Also you might want to look into MVVM pattern in which you will learn about a class you will name ViewModel and set that as the DataContext; and, instead of using DependencyProperties use INotifyPropertyChange to achieve the same effect.

How to update the chart using button?

Related

Recent Posts