Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated for Blazor 0.3 release with OnAfterRender goodness.
- Loading branch information
1 parent
eeef3da
commit 12642ef
Showing
35 changed files
with
1,325 additions
and
561 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,71 @@ | ||
| @page "/LineChart" | ||
|
|
||
| @using BlazorComponents.Shared | ||
|
|
||
| <h2>Chart JS charts using Blazor</h2> | ||
| <div class="row"> | ||
| <button class="btn btn-primary" onclick="@UpdateChart">Update Chart </button> | ||
| </div> | ||
| <ChartJsLineChart ref="lineChartJs" Chart="@blazorLineChartJS" Width="600" Height="300" /> | ||
|
|
||
| <ChartJsLineChart Chart="@blazorLineChartJS" Width="600" Height="300" UpdateChart="@((chart) => { UpdateChart(chart); })" /> | ||
|
|
||
| @functions { | ||
| @functions{ | ||
|
|
||
| public ChartJSChart<ChartJsLineDataset> blazorLineChartJS { get; set; } = new ChartJSChart<ChartJsLineDataset>(); | ||
| public ChartJSChart<ChartJsLineDataset> blazorLineChartJS { get; set; } = new ChartJSChart<ChartJsLineDataset>(); | ||
| ChartJsLineChart lineChartJs; | ||
|
|
||
| protected override void OnInit() | ||
| { | ||
| blazorLineChartJS = new ChartJSChart<ChartJsLineDataset>() | ||
| protected override void OnInit() | ||
| { | ||
| ChartType = "line", | ||
| CanvasId = "myFirstLineChart", | ||
| Options = new ChartJsOptions() | ||
| { | ||
| Text = "Sample chart from Blazor", | ||
| Display = true | ||
| }, | ||
| Data = new ChartJsData<ChartJsLineDataset>() | ||
|
|
||
| blazorLineChartJS = new ChartJSChart<ChartJsLineDataset>() | ||
| { | ||
| Labels = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }, | ||
| Datasets = new List<ChartJsLineDataset>() | ||
| ChartType = "line", | ||
| CanvasId = "myFirstLineChart", | ||
| Options = new ChartJsOptions() | ||
| { | ||
| Text = "Sample chart from Blazor", | ||
| Display = true, | ||
| Responsive = false | ||
| }, | ||
| Data = new ChartJsData<ChartJsLineDataset>() | ||
| { | ||
| new ChartJsLineDataset() | ||
| { | ||
| BackgroundColor = "#ff6384", | ||
| BorderColor = "#ff6384", | ||
| Label = "# of Votes from blazor", | ||
| Data = new List<int>{ 19,12,5,3,3,2}, | ||
| Fill = true, | ||
| BorderWidth = 2, | ||
| PointRadius = 3, | ||
| PointBorderWidth=1 | ||
| } | ||
| Labels = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }, | ||
| Datasets = new List<ChartJsLineDataset>() | ||
| { | ||
| new ChartJsLineDataset() | ||
| { | ||
| BackgroundColor = "#ff6384", | ||
| BorderColor = "#ff6384", | ||
| Label = "# of Votes from blazor", | ||
| Data = new List<int>{ 19,12,5,3,3,2}, | ||
| Fill = false, | ||
| BorderWidth = 2, | ||
| PointRadius = 3, | ||
| PointBorderWidth=1 | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| public void UpdateChart() | ||
| { | ||
| //Update existing dataset | ||
| blazorLineChartJS.Data.Labels.Add($"New{DateTime.Now.Second}"); | ||
| var firstDataSet = blazorLineChartJS.Data.Datasets[0]; | ||
| firstDataSet.Data.Add(DateTime.Now.Second); | ||
|
|
||
| public void UpdateChart(ChartJSChart<ChartJsLineDataset> chartItem) | ||
| { | ||
| //Update existing dataset | ||
| chartItem.Data.Labels.Add($"New{DateTime.Now.Second}"); | ||
| var firstDataSet = chartItem.Data.Datasets[0]; | ||
| firstDataSet.Data.Add(DateTime.Now.Second); | ||
| //Add new dataset | ||
| //blazorLineChartJS.Data.Datasets.Add(new ChartJsLineDataset() | ||
| //{ | ||
| // BackgroundColor = "#cc65fe", | ||
| // BorderColor = "#cc65fe", | ||
| // Label = "# of Votes from blazor 1", | ||
| // Data = new List<int> {20,21,12,3,4,4}, | ||
| // Fill = true, | ||
| // BorderWidth = 2, | ||
| // PointRadius = 3, | ||
| // PointBorderWidth = 1 | ||
| //}); | ||
| //Add new dataset | ||
| //chartItem.Data.Datasets.Add(new ChartJsLineDataset() | ||
| //{ | ||
| // BackgroundColor = "#cc65fe", | ||
| // BorderColor = "#cc65fe", | ||
| // Label = "# of Votes from blazor 1", | ||
| // Data = new List<int> {20,21,12,3,4,4}, | ||
| // Fill = true, | ||
| // BorderWidth = 2, | ||
| // PointRadius = 3, | ||
| // PointBorderWidth = 1 | ||
| //}); | ||
| } | ||
| lineChartJs.UpdateChart(blazorLineChartJS); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| @page "/RadarChart" | ||
| @using BlazorComponents.Shared | ||
|
|
||
|
|
||
| <h2>Chart JS charts using Blazor</h2> | ||
| <div class="row"> | ||
| <button class="btn btn-primary" onclick="@UpdateChart">Update Chart </button> | ||
| </div> | ||
| <ChartJsRadarChart ref="radarChartJs" Chart="@blazorRadarChartJS" Width="600" Height="300"/> | ||
|
|
||
| @functions { | ||
|
|
||
| public ChartJSChart<ChartJSRadarDataset> blazorRadarChartJS { get; set; } = new ChartJSChart<ChartJSRadarDataset>(); | ||
| ChartJsRadarChart radarChartJs; | ||
|
|
||
| protected override void OnInit() | ||
| { | ||
|
|
||
| blazorRadarChartJS = new ChartJSChart<ChartJSRadarDataset>() | ||
| { | ||
| ChartType = "line", | ||
| CanvasId = "myFirstRadarChart", | ||
| Options = new ChartJsOptions() | ||
| { | ||
| Text = "Sample chart from Blazor", | ||
| Display = true | ||
| }, | ||
| Data = new ChartJsData<ChartJSRadarDataset>() | ||
| { | ||
| Labels = new List<string>() { "Eating", "Drinking", "Social", "Coding", "Cycling", "Running" }, | ||
| Datasets = new List<ChartJSRadarDataset>() | ||
| { | ||
| new ChartJSRadarDataset() | ||
| { | ||
| BackgroundColor = "#ff6384", | ||
| Label = "1st Dataset", | ||
| Data = new List<int>{ 19,12,5,3,3,2}, | ||
| BorderWidth = 2, | ||
| RadarChartPointStyle = RadarChartPointStyles.star, | ||
| PointBackgroundColor = "#a4cef0", | ||
| PointRadius = 5, | ||
| PointBorderWidth=1 | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| } | ||
|
|
||
|
|
||
| public void UpdateChart() | ||
| { | ||
| //Update existing dataset | ||
| blazorRadarChartJS.Data.Labels.Add($"New{DateTime.Now.Second}"); | ||
| var firstDataSet = blazorRadarChartJS.Data.Datasets[0]; | ||
| firstDataSet.Data.Add(DateTime.Now.Second); | ||
|
|
||
| //Add new dataset | ||
| blazorRadarChartJS.Data.Datasets.Add(new ChartJSRadarDataset() | ||
| { | ||
| BackgroundColor = "#cc65fe", | ||
| BorderColor = "#cc65fe", | ||
| Label = "2nd Dataset", | ||
| Data = new List<int> { 20, 21, 12, 3, 4, 4 }, | ||
| BorderWidth = 2, | ||
| PointRadius = 3, | ||
| PointBorderWidth = 1 | ||
| }); | ||
|
|
||
| radarChartJs.UpdateChart(blazorRadarChartJS); | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.