diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Horizontal.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Horizontal.razor new file mode 100644 index 00000000..c8f58df9 --- /dev/null +++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Horizontal.razor @@ -0,0 +1,137 @@ +@page "/charts/bar/horizontal" +@using ChartJS.BarChart +@using System.Drawing +@layout SampleLayout + + + + + + + + + +@code { + private const int InitalCount = 7; + private BarConfig _config; + private Random _rng = new Random(); + private Chart _chart; + + protected override void OnInitialized() + { + _config = new BarConfig(ChartType.HorizontalBar) + { + Options = new BarOptions + { + Responsive = true, + Legend = new Legend + { + Position = Position.Right + }, + Title = new OptionsTitle + { + Display = true, + Text = "ChartJs.Blazor Horizontal Bar Chart" + } + } + }; + + IDataset dataset1 = new BarDataset(RandomScalingFactor(InitalCount), horizontal: true) + { + Label = "My first dataset", + BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, ChartColors.Red)), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red), + BorderWidth = 1 + }; + + IDataset dataset2 = new BarDataset(RandomScalingFactor(InitalCount), horizontal: true) + { + Label = "My second dataset", + BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, ChartColors.Blue)), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue), + BorderWidth = 1 + }; + + _config.Data.Labels.AddRange(Months.Take(InitalCount)); + _config.Data.Datasets.Add(dataset1); + _config.Data.Datasets.Add(dataset2); + } + + private void RandomizeData() + { + foreach (IDataset dataset in _config.Data.Datasets) + { + int count = dataset.Count; + dataset.Clear(); + for (int i = 0; i < count; i++) + { + if (_rng.NextDouble() < 0.2) + { + dataset.Add(0); + } + else + { + dataset.Add(RandomScalingFactor()); + } + } + } + + _chart.Update(); + } + + private void AddDataset() + { + Color color = ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count]; + IDataset dataset = new BarDataset(RandomScalingFactor(_config.Data.Labels.Count), horizontal: true) + { + Label = $"Dataset {_config.Data.Datasets.Count}", + BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, color)), + BorderColor = ColorUtil.FromDrawingColor(color), + BorderWidth = 1 + }; + + _config.Data.Datasets.Add(dataset); + _chart.Update(); + } + + private void RemoveDataset() + { + IList datasets = _config.Data.Datasets; + if (datasets.Count == 0) + return; + + datasets.RemoveAt(datasets.Count - 1); + _chart.Update(); + } + + private void AddData() + { + if (_config.Data.Datasets.Count == 0) + return; + + string month = Months[_config.Data.Labels.Count % Months.Count]; + _config.Data.Labels.Add(month); + + foreach (IDataset dataset in _config.Data.Datasets) + { + dataset.Add(RandomScalingFactor()); + } + + _chart.Update(); + } + + private void RemoveData() + { + if (_config.Data.Datasets.Count == 0) + return; + + _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1); + + foreach (IDataset dataset in _config.Data.Datasets) + { + dataset.RemoveAt(dataset.Count - 1); + } + + _chart.Update(); + } +} diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor new file mode 100644 index 00000000..28e53407 --- /dev/null +++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Bar/Vertical.razor @@ -0,0 +1,137 @@ +@page "/charts/bar/vertical" +@using ChartJS.BarChart +@using System.Drawing +@layout SampleLayout + + + + + + + + + +@code { + private const int InitalCount = 7; + private BarConfig _config; + private Random _rng = new Random(); + private Chart _chart; + + protected override void OnInitialized() + { + _config = new BarConfig + { + Options = new BarOptions + { + Responsive = true, + Legend = new Legend + { + Position = Position.Top + }, + Title = new OptionsTitle + { + Display = true, + Text = "ChartJs.Blazor Bar Chart" + } + } + }; + + IDataset dataset1 = new BarDataset(RandomScalingFactor(InitalCount)) + { + Label = "My first dataset", + BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, ChartColors.Red)), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red), + BorderWidth = 1 + }; + + IDataset dataset2 = new BarDataset(RandomScalingFactor(InitalCount)) + { + Label = "My second dataset", + BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, ChartColors.Blue)), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue), + BorderWidth = 1 + }; + + _config.Data.Labels.AddRange(Months.Take(InitalCount)); + _config.Data.Datasets.Add(dataset1); + _config.Data.Datasets.Add(dataset2); + } + + private void RandomizeData() + { + foreach (IDataset dataset in _config.Data.Datasets) + { + int count = dataset.Count; + dataset.Clear(); + for (int i = 0; i < count; i++) + { + if (_rng.NextDouble() < 0.2) + { + dataset.Add(0); + } + else + { + dataset.Add(RandomScalingFactor()); + } + } + } + + _chart.Update(); + } + + private void AddDataset() + { + Color color = ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count]; + IDataset dataset = new BarDataset(RandomScalingFactor(_config.Data.Labels.Count)) + { + Label = $"Dataset {_config.Data.Datasets.Count}", + BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(128, color)), + BorderColor = ColorUtil.FromDrawingColor(color), + BorderWidth = 1 + }; + + _config.Data.Datasets.Add(dataset); + _chart.Update(); + } + + private void RemoveDataset() + { + IList datasets = _config.Data.Datasets; + if (datasets.Count == 0) + return; + + datasets.RemoveAt(datasets.Count - 1); + _chart.Update(); + } + + private void AddData() + { + if (_config.Data.Datasets.Count == 0) + return; + + string month = Months[_config.Data.Labels.Count % Months.Count]; + _config.Data.Labels.Add(month); + + foreach (IDataset dataset in _config.Data.Datasets) + { + dataset.Add(RandomScalingFactor()); + } + + _chart.Update(); + } + + private void RemoveData() + { + if (_config.Data.Datasets.Count == 0) + return; + + _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1); + + foreach (IDataset dataset in _config.Data.Datasets) + { + dataset.RemoveAt(dataset.Count - 1); + } + + _chart.Update(); + } +} diff --git a/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Basic.razor b/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Basic.razor new file mode 100644 index 00000000..9c2e524c --- /dev/null +++ b/ChartJs.Blazor.Samples/Client/Pages/Charts/Line/Basic.razor @@ -0,0 +1,155 @@ +@page "/charts/line/basic" +@using ChartJS.LineChart +@layout SampleLayout + + + + + + + + + +@code { + private const int InitalCount = 7; + private LineConfig _config; + private Random _rng = new Random(); + private Chart _chart; + + protected override void OnInitialized() + { + _config = new LineConfig + { + Options = new LineOptions + { + Responsive = true, + Title = new OptionsTitle + { + Display = true, + Text = "ChartJs.Blazor Line Chart" + }, + Tooltips = new Tooltips + { + Mode = InteractionMode.Nearest, + Intersect = true + }, + Hover = new Hover + { + Mode = InteractionMode.Nearest, + Intersect = true + }, + Scales = new Scales + { + XAxes = new List + { + new CategoryAxis + { + ScaleLabel = new ScaleLabel + { + LabelString = "Month" + } + } + }, + YAxes = new List + { + new LinearCartesianAxis + { + ScaleLabel = new ScaleLabel + { + LabelString = "Value" + } + } + } + } + } + }; + + IDataset dataset1 = new LineDataset(RandomScalingFactor(InitalCount)) + { + Label = "My first dataset", + BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Red), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Red), + Fill = FillingMode.Disabled + }; + + IDataset dataset2 = new LineDataset(RandomScalingFactor(InitalCount)) + { + Label = "My second dataset", + BackgroundColor = ColorUtil.FromDrawingColor(ChartColors.Blue), + BorderColor = ColorUtil.FromDrawingColor(ChartColors.Blue), + Fill = FillingMode.Disabled + }; + + _config.Data.Labels.AddRange(Months.Take(InitalCount)); + _config.Data.Datasets.Add(dataset1); + _config.Data.Datasets.Add(dataset2); + } + + private void RandomizeData() + { + foreach (IDataset dataset in _config.Data.Datasets) + { + int count = dataset.Count; + dataset.Clear(); + dataset.AddRange(RandomScalingFactor(count)); + } + + _chart.Update(); + } + + private void AddDataset() + { + string color = ColorUtil.FromDrawingColor(ChartColors.All[_config.Data.Datasets.Count % ChartColors.All.Count]); + IDataset dataset = new LineDataset(RandomScalingFactor(_config.Data.Labels.Count)) + { + Label = $"Dataset {_config.Data.Datasets.Count}", + BackgroundColor = color, + BorderColor = color, + Fill = FillingMode.Disabled + }; + + _config.Data.Datasets.Add(dataset); + _chart.Update(); + } + + private void RemoveDataset() + { + IList datasets = _config.Data.Datasets; + if (datasets.Count == 0) + return; + + datasets.RemoveAt(datasets.Count - 1); + _chart.Update(); + } + + private void AddData() + { + if (_config.Data.Datasets.Count == 0) + return; + + string month = Months[_config.Data.Labels.Count % Months.Count]; + _config.Data.Labels.Add(month); + + foreach (IDataset dataset in _config.Data.Datasets) + { + dataset.Add(RandomScalingFactor()); + } + + _chart.Update(); + } + + private void RemoveData() + { + if (_config.Data.Datasets.Count == 0) + return; + + _config.Data.Labels.RemoveAt(_config.Data.Labels.Count - 1); + + foreach (IDataset dataset in _config.Data.Datasets) + { + dataset.RemoveAt(dataset.Count - 1); + } + + _chart.Update(); + } +}