Skip to content

Commit de311f7

Browse files
Joelius300mmuffins
Joelius300
and
mmuffins
committed
Add time scale line sample
Closes #165 Co-Authored-By: Michael Kellner <16214627+mmuffins@users.noreply.github.com>
1 parent 0fdde98 commit de311f7

4 files changed

Lines changed: 228 additions & 5 deletions

File tree

‎ChartJs.Blazor.Samples/Client/Pages/Scales/Time/Line.razor‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
@page "/scales/time/line"
2+
@using ChartJs.Blazor.LineChart
3+
@layout SampleLayout
4+
5+
<Chart Config="_config" @ref="_chart"></Chart>
6+
7+
<button @onclick="RandomizeData">Randomize Data</button>
8+
<button @onclick="AddDataset">Add Dataset</button>
9+
<button @onclick="RemoveDataset">Remove Dataset</button>
10+
<button @onclick="AddData">Add Data</button>
11+
<button @onclick="RemoveData">Remove Data</button>
12+
13+
@code {
14+
private const int InitalCount = 7;
15+
private LineConfig _config;
16+
private Chart _chart;
17+
18+
protected override void OnInitialized()
19+
{
20+
_config = new LineConfig
21+
{
22+
Options = new LineOptions
23+
{
24+
Responsive = true,
25+
Title = new OptionsTitle
26+
{
27+
Display = true,
28+
Text = "ChartJs.Blazor Time Scale Chart"
29+
},
30+
Tooltips = new Tooltips
31+
{
32+
Mode = InteractionMode.Nearest,
33+
Intersect = true
34+
},
35+
Hover = new Hover
36+
{
37+
Mode = InteractionMode.Nearest,
38+
Intersect = true
39+
},
40+
Scales = new Scales
41+
{
42+
XAxes = new List<CartesianAxis>
43+
{
44+
new TimeAxis
45+
{
46+
ScaleLabel = new ScaleLabel
47+
{
48+
LabelString = "Date"
49+
},
50+
Time = new TimeOptions
51+
{
52+
TooltipFormat = "ll HH:mm"
53+
},
54+
}
55+
},
56+
YAxes = new List<CartesianAxis>
57+
{
58+
new LinearCartesianAxis
59+
{
60+
ScaleLabel = new ScaleLabel
61+
{
62+
LabelString = "Value"
63+
}
64+
}
65+
}
66+
}
67+
}
68+
};
69+
70+
_config.Data.Labels.AddRange(GetNextDays(InitalCount).Select(d => d.ToString("o")));
71+
72+
IDataset<int> dataset1 = new LineDataset<int>(RandomScalingFactor(InitalCount))
73+
{
74+
Label = "My first dataset",
75+
BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Red),
76+
BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red),
77+
Fill = FillingMode.Disabled
78+
};
79+
80+
IDataset<int> dataset2 = new LineDataset<int>(RandomScalingFactor(InitalCount))
81+
{
82+
Label = "My second dataset",
83+
BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Blue),
84+
BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue),
85+
Fill = FillingMode.Disabled
86+
};
87+
88+
IDataset<TimePoint> dataset3 = new LineDataset<TimePoint>()
89+
{
90+
Label = "Dataset with point data",
91+
BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Green),
92+
BorderColor = ColorUtil.FromDrawingColor(ChartColors.Green),
93+
Fill = FillingMode.Disabled
94+
};
95+
96+
DateTime now = DateTime.Now;
97+
dataset3.Add(new TimePoint(now, RandomScalingFactor()));
98+
dataset3.Add(new TimePoint(now.AddDays(5), RandomScalingFactor()));
99+
dataset3.Add(new TimePoint(now.AddDays(7), RandomScalingFactor()));
100+
dataset3.Add(new TimePoint(now.AddDays(15), RandomScalingFactor()));
101+
102+
_config.Data.Datasets.Add(dataset1);
103+
_config.Data.Datasets.Add(dataset2);
104+
_config.Data.Datasets.Add(dataset3);
105+
}
106+
107+
private void RandomizeData()
108+
{
109+
foreach (IDataset dataset in _config.Data.Datasets)
110+
{
111+
if (dataset is IDataset<TimePoint> pointDataset)
112+
{
113+
for (int i = 0; i < pointDataset.Count; i++)
114+
{
115+
pointDataset[i] = new TimePoint(pointDataset[i].Time, RandomScalingFactor());
116+
}
117+
}
118+
else if (dataset is IDataset<int> intDataset)
119+
{
120+
int count = intDataset.Count;
121+
intDataset.Clear();
122+
intDataset.AddRange(RandomScalingFactor(count));
123+
}
124+
}
125+
126+
_chart.Update();
127+
}
128+
129+
private void AddDataset()
130+
{
131+
string color = ColorUtil.FromDrawingColor(ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count]);
132+
IDataset<int> dataset = new LineDataset<int>(RandomScalingFactor(_config.Data.Labels.Count))
133+
{
134+
Label = $"Dataset {_config.Data.Datasets.Count}",
135+
BackgroundColor = color,
136+
BorderColor = color,
137+
Fill = FillingMode.Disabled
138+
};
139+
140+
_config.Data.Datasets.Add(dataset);
141+
_chart.Update();
142+
}
143+
144+
private void RemoveDataset()
145+
{
146+
IList<IDataset> datasets = _config.Data.Datasets;
147+
if (datasets.Count == 0)
148+
return;
149+
150+
datasets.RemoveAt(datasets.Count - 1);
151+
_chart.Update();
152+
}
153+
154+
private void AddData()
155+
{
156+
if (_config.Data.Datasets.Count == 0)
157+
return;
158+
159+
DateTime now = DateTime.Now;
160+
_config.Data.Labels.Add(now.AddDays(_config.Data.Labels.Count).ToString("o"));
161+
162+
foreach (IDataset dataset in _config.Data.Datasets)
163+
{
164+
if (dataset is IDataset<TimePoint> pointDataset)
165+
{
166+
pointDataset.Add(new TimePoint(now.AddDays(pointDataset.Count), RandomScalingFactor()));
167+
}
168+
else if (dataset is IDataset<int> intDataset)
169+
{
170+
intDataset.Add(RandomScalingFactor());
171+
}
172+
}
173+
174+
_chart.Update();
175+
}
176+
177+
private void RemoveData()
178+
{
179+
if (_config.Data.Datasets.Count == 0)
180+
return;
181+
182+
IList<string> labels = _config.Data.Labels;
183+
if (labels.Count > 0)
184+
labels.RemoveAt(labels.Count - 1);
185+
186+
foreach (IDataset dataset in _config.Data.Datasets)
187+
{
188+
if (dataset is IDataset<TimePoint> pointDataset &&
189+
pointDataset.Count > 0)
190+
{
191+
pointDataset.RemoveAt(pointDataset.Count - 1);
192+
}
193+
else if (dataset is IDataset<int> intDataset &&
194+
intDataset.Count > 0)
195+
{
196+
intDataset.RemoveAt(intDataset.Count - 1);
197+
}
198+
}
199+
200+
_chart.Update();
201+
}
202+
}

‎ChartJs.Blazor.Samples/Server/Pages/_Host.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
document.getElementById("blazorMode").src = window.location.search.includes("mode=server") ? "_framework/blazor.server.js" : "_framework/blazor.webassembly.js";
2626
</script>
2727

28-
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
2928
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
29+
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
3030

3131
<!-- This is the glue between Blazor and Chart.js -->
3232
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js"></script>

‎ChartJs.Blazor.Samples/Server/samples.json‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,19 @@
3232
{
3333
"Title": "Other charts",
3434
"Samples": [
35-
{
36-
"Title": "Pie",
37-
"Path": "charts/pie"
38-
}
35+
{
36+
"Title": "Pie",
37+
"Path": "charts/pie"
38+
}
39+
]
40+
},
41+
{
42+
"Title": "Time scale",
43+
"Samples": [
44+
{
45+
"Title": "Line",
46+
"Path": "scales/time/line"
47+
}
3948
]
4049
},
4150
{

‎ChartJs.Blazor.Samples/Shared/SampleUtils.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,17 @@ public static IEnumerable<int> RandomScalingFactor(int count)
5757

5858
return factors;
5959
}
60+
61+
public static IEnumerable<DateTime> GetNextDays(int count)
62+
{
63+
DateTime now = DateTime.Now;
64+
DateTime[] factors = new DateTime[count];
65+
for (int i = 0; i < factors.Length; i++)
66+
{
67+
factors[i] = now.AddDays(i);
68+
}
69+
70+
return factors;
71+
}
6072
}
6173
}

0 commit comments

Comments
 (0)