ChartJs.Blazor/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Interpolation.razor at 339c202a41c7f6a222dafd0e5f43c283e2da7e46 · mariusmuntean/ChartJs.Blazor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
@page "/charts/line/interpolation"
@using ChartJs.Blazor.LineChart
@layout SampleLayout

<Chart Config="_config" @ref="_chart"></Chart>

<button @onclick="RandomizeData">Randomize Data</button>

@code {
    private const int InitalCount = 12;
    private int?[] _datapoints;
    private Random _rng = new Random();
    private LineConfig _config;
    private Chart _chart;

    protected override void OnInitialized()
    {
        _datapoints = new int?[] { 0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170 };

        _config = new LineConfig
        {
            Options = new LineOptions
            {
                Responsive = true,
                Title = new OptionsTitle
                {
                    Display = true,
                    Text = "ChartJs.Blazor Line Chart - Cubic interpolation mode"
                },
                Tooltips = new Tooltips
                {
                    Mode = InteractionMode.Nearest,
                    Intersect = true
                },
                Hover = new Hover
                {
                    Mode = InteractionMode.Nearest,
                    Intersect = true
                },
                Scales = new Scales
                {
                    XAxes = new List<CartesianAxis>
                    {
                        new CategoryAxis
                        {
                            ScaleLabel = new ScaleLabel()
                        }
                        },
                    YAxes = new List<CartesianAxis>
                    {
                        new LinearCartesianAxis
                        {
                            ScaleLabel = new ScaleLabel
                            {
                                LabelString = "Value",
                                Display = true
                            },
                            Ticks = new LinearCartesianTicks
                            {
                                SuggestedMin = -10,
                                SuggestedMax = 200
                            }
                        }
                    }
                }
            }
        };

        IDataset<int?> dataset1 = new LineDataset<int?>(_datapoints)
        {
            Label = "Cubic interpolation (monotone)",
            BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Red),
            BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red),
            Fill = FillingMode.Disabled,
            CubicInterpolationMode = CubicInterpolationMode.Monotone,
            LineTension = 0.4
        };

        IDataset<int?> dataset2 = new LineDataset<int?>(_datapoints)
        {
            Label = "Cubic interpolation (default)",
            BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Blue),
            BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue),
            Fill = FillingMode.Disabled,
            LineTension = 0.4
        };

        IDataset<int?> dataset3 = new LineDataset<int?>(_datapoints)
        {
            Label = "Linear interpolation",
            BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Green),
            BorderColor = ColorUtil.FromDrawingColor(ChartColors.Green),
            Fill = FillingMode.Disabled,
            LineTension = 0
        };

        _config.Data.Labels.AddRange(Enumerable.Range(0, InitalCount).Select(i => i.ToString()));
        _config.Data.Datasets.Add(dataset1);
        _config.Data.Datasets.Add(dataset2);
        _config.Data.Datasets.Add(dataset3);
    }

    private void RandomizeData()
    {
        for(int i = 0; i < _datapoints.Count(); i++)
        {
            _datapoints[i] = _rng.NextDouble() < 0.05 ? null : (int?)RandomScalingFactor();
        }

        foreach (IDataset<int?> dataset in _config.Data.Datasets)
        {
            dataset.Clear();
            dataset.AddRange(_datapoints);
        }

        _chart.Update();
    }
}