Skip to content

Commit 33d2d69

Browse files
authored
Merge pull request #363 from apexcharts/add-sample
added dynamic donut sample
2 parents 65a84af + 3e3d720 commit 33d2d69

File tree

2 files changed

+72
-5
lines changed

2 files changed

+72
-5
lines changed
Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
@page "/donut-charts"
22

3-
<DocExamples Title="Donut Charts" >
3+
<DocExamples Title="Donut Charts">
44

55
<CodeSnippet Title=Basic ClassName=@typeof(Basic).ToString()>
66
<Snippet>
7-
<Basic/>
7+
<Basic />
88
</Snippet>
99
</CodeSnippet>
1010

11-
<CodeSnippet Title=Total ClassName=@typeof(Total).ToString()>
11+
<CodeSnippet Title=Total ClassName=@typeof(Total).ToString()>
1212
<Snippet>
13-
<Total/>
13+
<Total />
1414
</Snippet>
1515
</CodeSnippet>
1616

@@ -20,4 +20,10 @@
2020
</Snippet>
2121
</CodeSnippet>
2222

23-
</DocExamples>
23+
<CodeSnippet Title="Dynamic" ClassName=@typeof(Dynamic).ToString()>
24+
<Snippet>
25+
<Dynamic />
26+
</Snippet>
27+
</CodeSnippet>
28+
29+
</DocExamples>
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<DemoContainer>
2+
<Button class="mb-2" OnClick=UpdateChartSeries BackgroundColor="TablerColor.Primary">Update Series</Button>
3+
4+
@if (forecasts != null)
5+
{
6+
<ApexChart TItem="WeatherForecast"
7+
Title="Temp C"
8+
@ref="chart">
9+
10+
<ApexPointSeries TItem="WeatherForecast"
11+
Items="forecasts"
12+
Name="Temp C"
13+
XValue="@(e => e.Summary)"
14+
YValue="@(e => e.TemperatureC)"
15+
SeriesType="SeriesType.Donut" />
16+
</ApexChart>
17+
}
18+
</DemoContainer>
19+
20+
<div>
21+
<Table Items="forecasts">
22+
<Column Item="WeatherForecast" Property="e=> e.Summary" />
23+
<Column Item="WeatherForecast" Property="e=> e.TemperatureC" />
24+
</Table>
25+
</div>
26+
27+
@code {
28+
private List<WeatherForecast> forecasts { get; set; }
29+
private ApexChart<WeatherForecast> chart;
30+
31+
protected override async Task OnInitializedAsync()
32+
{
33+
await LoadDataAsync(2); // get small sample first
34+
35+
await base.OnInitializedAsync();
36+
}
37+
38+
private async Task LoadDataAsync(int? limit)
39+
{
40+
var tempForecast = await SampleData.GetForecastAsync(DateTime.Today);
41+
42+
var groupedData = tempForecast.GroupBy(x => x.Summary)
43+
.Select(x => new WeatherForecast()
44+
{
45+
Date = x.First().Date,
46+
Summary = x.First().Summary,
47+
TemperatureC = x.Sum(y => Math.Abs(y.TemperatureC)) // easier to compare with positive values
48+
})
49+
.ToList();
50+
51+
forecasts = limit.HasValue
52+
? groupedData.Take(limit.Value).ToList()
53+
: groupedData.ToList();
54+
}
55+
56+
private async Task UpdateChartSeries()
57+
{
58+
await LoadDataAsync(null); // get full sample on update
59+
await chart.UpdateOptionsAsync(true, true, false);
60+
}
61+
}

0 commit comments

Comments
 (0)