Skip to content

Commit e1326f1

Browse files
erossinierossini
committed
Add Combo Line/Bar and Scatter Multi Axes
1 parent 72f1352 commit e1326f1

10 files changed

Lines changed: 373 additions & 8 deletions

File tree

‎ChartjsDemo/Data/ScatterDataExamples.cs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,12 @@ public static class ScatterDataExamples
1111
new ScatterXYValue() { X = 10, Y = 5 },
1212
new ScatterXYValue() { X = 0.5M, Y = 5.5M }
1313
};
14+
public static string ScatterMultiAxes = "Scatter Multi Axes";
15+
public static List<ScatterXYValue> ScatterMultiAxesDatasets = new List<ScatterXYValue>() {
16+
new ScatterXYValue() { X = -8, Y = 2 },
17+
new ScatterXYValue() { X = 5, Y = 6 },
18+
new ScatterXYValue() { X = 4, Y = 7 },
19+
new ScatterXYValue() { X = 3.5M, Y = 3.5M }
20+
};
1421
}
1522
}

‎ChartjsDemo/Pages/LineBar.razor‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
@page "/linebar"
2+
3+
<h3>Combo Bar/Line</h3>
4+
5+
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
6+
7+
<hr />
8+
9+
<h3>Code</h3>
10+
11+
<p>
12+
This is the component to add in your page.
13+
</p>
14+
15+
<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
16+
&ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
17+
</CodeSnippet>
18+
19+
<p>
20+
Then, in the code section, add the following code:
21+
</p>
22+
23+
<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
24+
private LineChartConfig? _config1;
25+
private Chart? _chart1;
26+
27+
protected override async Task OnInitializedAsync()
28+
{
29+
_config1 = new BarChartConfig()
30+
{
31+
Options = new Options()
32+
{
33+
Responsive = true,
34+
MaintainAspectRatio = false,
35+
Plugins = new Plugins()
36+
{
37+
Legend = new Legend()
38+
{
39+
Align = LegendAlign.Center,
40+
Display = false,
41+
Position = LegendPosition.Right
42+
}
43+
},
44+
Scales = new Dictionary&lt;string, Axis&gt;()
45+
{
46+
{
47+
Scales.XAxisId, new Axis()
48+
{
49+
Stacked = true,
50+
Ticks = new Ticks()
51+
{
52+
MaxRotation = 0,
53+
MinRotation = 0
54+
}
55+
}
56+
},
57+
{
58+
Scales.YAxisId, new Axis()
59+
{
60+
Stacked = true
61+
}
62+
}
63+
}
64+
}
65+
};
66+
67+
_config1.Data.Labels = BarDataExamples.SimpleBarText;
68+
_config1.Data.Datasets.Add(new BarDataset()
69+
{
70+
Label = "Value",
71+
Data = BarDataExamples.SimpleBar.Select(l => l.Value).ToList(),
72+
BackgroundColor = Colors.Palette1,
73+
BorderColor = Colors.PaletteBorder1,
74+
BorderWidth = 1
75+
});
76+
_config1.Data.Datasets.Add(new BarDataset()
77+
{
78+
Label = "Bar Dataset",
79+
Data = LineDataExamples.SimpleLine.ToList(),
80+
BorderColor = Colors.PaletteBorder1,
81+
Order = 1,
82+
Type = "line"
83+
});
84+
}
85+
</CodeSnippet>
86+
87+
@code {
88+
private BarChartConfig? _config1;
89+
private Chart? _chart1;
90+
91+
protected override async Task OnInitializedAsync()
92+
{
93+
_config1 = new BarChartConfig()
94+
{
95+
Options = new Options()
96+
{
97+
Responsive = true,
98+
MaintainAspectRatio = false,
99+
Plugins = new Plugins()
100+
{
101+
Legend = new Legend()
102+
{
103+
Align = LegendAlign.Center,
104+
Display = false,
105+
Position = LegendPosition.Right
106+
}
107+
},
108+
Scales = new Dictionary<string, Axis>()
109+
{
110+
{
111+
Scales.XAxisId, new Axis()
112+
{
113+
Stacked = true,
114+
Ticks = new Ticks()
115+
{
116+
MaxRotation = 0,
117+
MinRotation = 0
118+
}
119+
}
120+
},
121+
{
122+
Scales.YAxisId, new Axis()
123+
{
124+
Stacked = true
125+
}
126+
}
127+
}
128+
}
129+
};
130+
131+
_config1.Data.Labels = BarDataExamples.SimpleBarText;
132+
_config1.Data.Datasets.Add(new BarDataset()
133+
{
134+
Label = "Value",
135+
Data = BarDataExamples.SimpleBar.Select(l => l.Value).ToList(),
136+
BackgroundColor = Colors.Palette1,
137+
BorderColor = Colors.PaletteBorder1,
138+
BorderWidth = 1
139+
});
140+
_config1.Data.Datasets.Add(new BarDataset()
141+
{
142+
Label = "Bar Dataset",
143+
Data = LineDataExamples.SimpleLine.ToList(),
144+
BorderColor = Colors.PaletteBorder1,
145+
Order = 1,
146+
Type = "line"
147+
});
148+
}
149+
}

‎ChartjsDemo/Pages/ScatterMultiAxes.razor‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
@page "/scattermultiaxes"
2+
3+
<h3>Scatter Multi Axes</h3>
4+
5+
<Chart Config="_config1" @ref="_chart1" Height="400px"></Chart>
6+
7+
<hr />
8+
9+
<h3>Code</h3>
10+
11+
<p>
12+
This is the component to add in your page.
13+
</p>
14+
15+
<CodeSnippet Language="Language.xml" Style="Style.VisualStudio">
16+
&ltChart Config="_config1" &#64;ref="_chart1">&lt;Chart>
17+
</CodeSnippet>
18+
19+
<p>
20+
Then, in the code section, add the following code:
21+
</p>
22+
23+
<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio" LoadMainScript="false">
24+
private ScatterChartConfig? _config1;
25+
private Chart? _chart1;
26+
27+
protected override async Task OnInitializedAsync()
28+
{
29+
_config1 = new ScatterChartConfig()
30+
{
31+
Options = new Options()
32+
{
33+
Responsive = true,
34+
MaintainAspectRatio = false,
35+
Scales = new Dictionary&lt;string, Axis&gt;()
36+
{
37+
{
38+
Scales.YAxisId, new Axis()
39+
{
40+
Type = "linear",
41+
Position = "left",
42+
Ticks = new Ticks()
43+
{
44+
Color = "rgb(255, 0, 0)"
45+
}
46+
}
47+
},
48+
{
49+
Scales.Y2AxisId, new Axis()
50+
{
51+
Type = "linear",
52+
Position = "right",
53+
Ticks = new Ticks()
54+
{
55+
Color = "rgb(0, 0, 255)"
56+
}
57+
}
58+
}
59+
}
60+
}
61+
};
62+
63+
_config1.Data.Datasets.Add(new ScatterDataset()
64+
{
65+
BackgroundColor = "rgb(255, 99, 132)",
66+
BorderColor = "rgb(255, 0, 0)",
67+
Label = ScatterDataExamples.ScatterSimpleText,
68+
Data = ScatterDataExamples.ScatterDatasets,
69+
YAxisId = "y"
70+
});
71+
_config1.Data.Datasets.Add(new ScatterDataset()
72+
{
73+
BackgroundColor = "rgb(0, 0, 230)",
74+
BorderColor = "rgb(0, 0, 255)",
75+
Label = ScatterDataExamples.ScatterMultiAxes,
76+
Data = ScatterDataExamples.ScatterMultiAxesDatasets,
77+
Y2AxisId = "y2"
78+
});
79+
}
80+
</CodeSnippet>
81+
82+
@code {
83+
private ScatterChartConfig? _config1;
84+
private Chart? _chart1;
85+
86+
protected override async Task OnInitializedAsync()
87+
{
88+
_config1 = new ScatterChartConfig()
89+
{
90+
Options = new Options()
91+
{
92+
Responsive = true,
93+
MaintainAspectRatio = false,
94+
Scales = new Dictionary<string, Axis>()
95+
{
96+
{
97+
Scales.YAxisId, new Axis()
98+
{
99+
Type = "linear",
100+
Position = "left",
101+
Ticks = new Ticks()
102+
{
103+
Color = "rgb(255, 0, 0)"
104+
}
105+
}
106+
},
107+
{
108+
Scales.Y2AxisId, new Axis()
109+
{
110+
Type = "linear",
111+
Position = "right",
112+
Ticks = new Ticks()
113+
{
114+
Color = "rgb(0, 0, 255)"
115+
}
116+
}
117+
}
118+
}
119+
}
120+
};
121+
122+
_config1.Data.Datasets.Add(new ScatterDataset()
123+
{
124+
BackgroundColor = "rgb(255, 99, 132)",
125+
BorderColor = "rgb(255, 0, 0)",
126+
Label = ScatterDataExamples.ScatterSimpleText,
127+
Data = ScatterDataExamples.ScatterDatasets,
128+
YAxisId = "y"
129+
});
130+
_config1.Data.Datasets.Add(new ScatterDataset()
131+
{
132+
BackgroundColor = "rgb(0, 0, 230)",
133+
BorderColor = "rgb(0, 0, 255)",
134+
Label = ScatterDataExamples.ScatterMultiAxes,
135+
Data = ScatterDataExamples.ScatterMultiAxesDatasets,
136+
Y2AxisId = "y2"
137+
});
138+
}
139+
}

‎ChartjsDemo/Shared/NavMenu.razor‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,13 @@
6060
</NavLink>
6161
</div>
6262
<div class="nav-item px-3">
63-
<NavLink class="nav-link" href="customCode1">
64-
<span class="oi oi-plus" aria-hidden="true"></span> Line OnAnimationComplete
63+
<NavLink class="nav-link" href="scattermultiaxes">
64+
<span class="oi oi-graph" aria-hidden="true"></span> Scatter multi axes
65+
</NavLink>
66+
</div>
67+
<div class="nav-item px-3">
68+
<NavLink class="nav-link" href="linebar">
69+
<span class="oi oi-graph" aria-hidden="true"></span> Combo Line/Bar
6570
</NavLink>
6671
</div>
6772
<div class="nav-item px-3">

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ Fist, you have to add the component from [NuGet](https://www.nuget.org/packages/
1414
<script src="_content/PSC.Blazor.Components.Chartjs/Chart.js"></script>
1515
```
1616

17-
The first script is the [Chart.js](https://www.chartjs.org/) library version [3.9.1](https://github.com/chartjs/Chart.js/releases/tag/v3.9.1) because I'm using this version to create the components. You can use other sources for it but maybe you can face issues in other versions.
17+
The first script is the Chart.js library version 3.7.1 because I'm using this version to create the components. You can use other sources for it but maybe you can face issues in other versions.
1818

1919
Then, open your `_Imports.razor` and add the following:
2020

@@ -105,22 +105,22 @@ _config1.Data.Datasets.Add(new Dataset()
105105

106106
The result of the code above is this chart
107107

108-
![image](https://user-images.githubusercontent.com/9497415/196674629-baaa69d2-24ab-484c-b35e-597cdd2b961c.png)
108+
![image](https://user-images.githubusercontent.com/9497415/145194274-63997957-82ab-4b38-a2bf-bdd748c2b005.png)
109109

110110
## Implemented charts
111111
- [x] Bar chart
112112
- [x] Line chart
113113
- [x] Area
114114
- [ ] Other charts
115115
- [x] Scatter
116-
- [ ] Scatter - Multi axis
116+
- [x] Scatter - Multi axis
117117
- [x] Doughnut
118118
- [x] Pie
119119
- [ ] Multi Series Pie
120120
- [x] Polar area
121121
- [x] Radar
122122
- [x] Radar skip points
123-
- [ ] Combo bar/line
123+
- [x] Combo bar/line
124124
- [x] Stacked bar/line
125125

126126
---
@@ -153,4 +153,4 @@ The result of the code above is this chart
153153
* [Use LocalStorage with Blazor WebAssembly](https://www.puresourcecode.com/dotnet/blazor/use-localstorage-with-blazor-webassembly/)
154154
* [Modal Dialog component for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/)
155155
* [Create Tooltip component for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-tooltip-component-for-blazor/)
156-
* [Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/class-libraries?view=aspnetcore-5.0&tabs=visual-studio)
156+
* [Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/class-libraries?view=aspnetcore-5.0&tabs=visual-studio)

‎src/Models/Common/Dataset.cs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,25 @@ public class Dataset
2424
[JsonPropertyName("label")]
2525
[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
2626
public string Label { get; set; }
27+
28+
/// <summary>
29+
/// Gets or sets the order.
30+
/// </summary>
31+
/// <value>
32+
/// The order.
33+
/// </value>
34+
[JsonPropertyName("order")]
35+
[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
36+
public int? Order { get; set; } = null;
37+
38+
/// <summary>
39+
/// Gets or sets the type.
40+
/// </summary>
41+
/// <value>
42+
/// The type.
43+
/// </value>
44+
[JsonPropertyName("type")]
45+
[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
46+
public string? Type { get; set; } = null;
2747
}
2848
}

0 commit comments

Comments
 (0)