Skip to content

Commit 9a0b9a3

Browse files
BackiarajBackiaraj
committed
Prepared ug sample for Blazor Chart
1 parent ca45dd6 commit 9a0b9a3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1582
-11
lines changed

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/Candles/BoxAndWhisker.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/ChartTypes/Candles/BoxWhisker"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<Type1Route></Type1Route>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@ExpenseDetails" XName="XValue" YName="YValue" Type="ChartSeriesType.BoxAndWhisker">
13+
</ChartSeries>
14+
</ChartSeriesCollection>
15+
</SfChart>
16+
17+
@code {
18+
public class ChartData
19+
{
20+
public string XValue { get; set; }
21+
public double[] YValue { get; set; }
22+
}
23+
24+
public List<ChartData> ExpenseDetails = new List<ChartData>
25+
{
26+
new ChartData { XValue = "Development", YValue = new double[]{ 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 } },
27+
new ChartData { XValue = "Testing", YValue = new double[] { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 }},
28+
new ChartData { XValue = "HR", YValue = new double[] { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 } },
29+
new ChartData { XValue = "Finance", YValue = new double[] { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 } },
30+
new ChartData { XValue = "R&D", YValue = new double[] { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 } },
31+
new ChartData { XValue = "Sales", YValue = new double[] { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 } },
32+
new ChartData { XValue = "Inventory", YValue = new double[] { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 } },
33+
new ChartData { XValue = "Graphics", YValue = new double[] { 26, 28, 29, 30, 32, 33, 35, 36, 52 } },
34+
new ChartData { XValue = "Training", YValue = new double[] { 28, 29, 30, 31, 32, 34, 35, 36 } }
35+
};
36+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/Candles/BoxPlot.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/ChartTypes/Candles/BoxPlot"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<Type1Route></Type1Route>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@ExpenseDetails" XName="XValue" YName="YValue" Type="ChartSeriesType.BoxAndWhisker">
13+
</ChartSeries>
14+
</ChartSeriesCollection>
15+
</SfChart>
16+
17+
@code {
18+
public class ChartData
19+
{
20+
public string XValue { get; set; }
21+
public double[] YValue { get; set; }
22+
}
23+
24+
public List<ChartData> ExpenseDetails = new List<ChartData>
25+
{
26+
new ChartData { XValue = "Development", YValue = new double[]{ 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 } },
27+
new ChartData { XValue = "Testing", YValue = new double[] { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 }},
28+
new ChartData { XValue = "HR", YValue = new double[] { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 } },
29+
new ChartData { XValue = "Finance", YValue = new double[] { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 } },
30+
new ChartData { XValue = "R&D", YValue = new double[] { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 } },
31+
new ChartData { XValue = "Sales", YValue = new double[] { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 } },
32+
new ChartData { XValue = "Inventory", YValue = new double[] { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 } },
33+
new ChartData { XValue = "Graphics", YValue = new double[] { 26, 28, 29, 30, 32, 33, 35, 36, 52 } },
34+
new ChartData { XValue = "Training", YValue = new double[] { 28, 29, 30, 31, 32, 34, 35, 36 } }
35+
};
36+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/Candles/HollowCandle.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/ChartTypes/Candles/Hollow"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<Type1Route></Type1Route>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@StockDetails" XName="X" High="High" Low="Low" Type="ChartSeriesType.Candle" Open="Open" Close="Close">
13+
</ChartSeries>
14+
</ChartSeriesCollection>
15+
</SfChart>
16+
17+
@code {
18+
public class Data
19+
{
20+
public string X { get; set; }
21+
public double Y { get; set; }
22+
public double High { get; set; }
23+
public double Low { get; set; }
24+
public double Open { get; set; }
25+
public double Close { get; set; }
26+
}
27+
28+
public List<Data> StockDetails = new List<Data>
29+
{
30+
new Data{ X= "Jan", Open= 120, High= 160, Low= 100, Close= 140 },
31+
new Data{ X= "Feb", Open= 150, High= 190, Low= 130, Close= 170 },
32+
new Data{ X= "Mar", Open= 130, High= 170, Low= 110, Close= 150 },
33+
new Data{ X= "Apr", Open= 160, High= 180, Low= 120, Close= 140 },
34+
new Data{ X= "May", Open= 150, High= 170, Low= 110, Close= 130 }
35+
};
36+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/Candles/Showmean.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/ChartTypes/Candles/Showmean"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<Type1Route></Type1Route>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@ExpenseDetails" XName="XValue" YName="YValue" Type="ChartSeriesType.BoxAndWhisker" ShowMean="false">
13+
</ChartSeries>
14+
</ChartSeriesCollection>
15+
</SfChart>
16+
17+
@code {
18+
public class ChartData
19+
{
20+
public string XValue { get; set; }
21+
public double[] YValue { get; set; }
22+
}
23+
24+
public List<ChartData> ExpenseDetails = new List<ChartData>
25+
{
26+
new ChartData { XValue = "Development", YValue = new double[]{ 22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38 } },
27+
new ChartData { XValue = "Testing", YValue = new double[] { 22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50 }},
28+
new ChartData { XValue = "HR", YValue = new double[] { 22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56 } },
29+
new ChartData { XValue = "Finance", YValue = new double[] { 26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45 } },
30+
new ChartData { XValue = "R&D", YValue = new double[] { 26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58 } },
31+
new ChartData { XValue = "Sales", YValue = new double[] { 27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53 } },
32+
new ChartData { XValue = "Inventory", YValue = new double[] { 21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38 } },
33+
new ChartData { XValue = "Graphics", YValue = new double[] { 26, 28, 29, 30, 32, 33, 35, 36, 52 } },
34+
new ChartData { XValue = "Training", YValue = new double[] { 28, 29, 30, 31, 32, 34, 35, 36 } }
35+
};
36+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/Candles/SolidCandle.razor‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@page "/ChartTypes/Candles/Solid"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<Type1Route></Type1Route>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@StockDetails" XName="X" High="High" BearFillColor="#e56590" BullFillColor="#f8b883" EnableSolidCandles="true"
13+
Low="Low" Type="ChartSeriesType.Candle" Open="Open" Close="Close">
14+
</ChartSeries>
15+
</ChartSeriesCollection>
16+
</SfChart>
17+
18+
@code {
19+
public class Data
20+
{
21+
public string X { get; set; }
22+
public double Y { get; set; }
23+
public double High { get; set; }
24+
public double Low { get; set; }
25+
public double Open { get; set; }
26+
public double Close { get; set; }
27+
}
28+
29+
public List<Data> StockDetails = new List<Data>
30+
{
31+
new Data{ X= "Jan", Open= 120, High= 160, Low= 100, Close= 140 },
32+
new Data{ X= "Feb", Open= 150, High= 190, Low= 130, Close= 170 },
33+
new Data{ X= "Mar", Open= 130, High= 170, Low= 110, Close= 150 },
34+
new Data{ X= "Apr", Open= 160, High= 180, Low= 120, Close= 140 },
35+
new Data{ X= "May", Open= 150, High= 170, Low= 110, Close= 130 }
36+
};
37+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/ErrorBar/BarDirection.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/ChartTypes/ErrorBar/BarDirection"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<TypeRoute></TypeRoute>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
13+
<ChartErrorBarSettings Visible="true" Mode="ErrorBarMode.Both" Direction="ErrorBarDirection.Minus">
14+
</ChartErrorBarSettings>
15+
</ChartSeries>
16+
</ChartSeriesCollection>
17+
</SfChart>
18+
19+
@code {
20+
public class ChartData
21+
{
22+
public double X { get; set; }
23+
public double Y { get; set; }
24+
}
25+
26+
public List<ChartData> SalesReports = new List<ChartData>
27+
{
28+
new ChartData{ X= 2005, Y= 28 },
29+
new ChartData{ X= 2006, Y= 25 },
30+
new ChartData{ X= 2007, Y= 26 },
31+
new ChartData{ X= 2008, Y= 27 },
32+
new ChartData{ X= 2009, Y= 32 },
33+
new ChartData{ X= 2010, Y= 35 },
34+
new ChartData{ X= 2011, Y= 30 }
35+
};
36+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/ErrorBar/BarMode.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/ChartTypes/ErrorBar/BarMode"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<TypeRoute></TypeRoute>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
13+
<ChartErrorBarSettings Visible="true" Mode="ErrorBarMode.Horizontal">
14+
</ChartErrorBarSettings>
15+
</ChartSeries>
16+
</ChartSeriesCollection>
17+
</SfChart>
18+
19+
@code {
20+
public class ChartData
21+
{
22+
public double X { get; set; }
23+
public double Y { get; set; }
24+
}
25+
26+
public List<ChartData> SalesReports = new List<ChartData>
27+
{
28+
new ChartData{ X= 2005, Y= 28 },
29+
new ChartData{ X= 2006, Y= 25 },
30+
new ChartData{ X= 2007, Y= 26 },
31+
new ChartData{ X= 2008, Y= 27 },
32+
new ChartData{ X= 2009, Y= 32 },
33+
new ChartData{ X= 2010, Y= 35 },
34+
new ChartData{ X= 2011, Y= 30 }
35+
};
36+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/ErrorBar/BarType.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/ChartTypes/ErrorBar/BarType"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<TypeRoute></TypeRoute>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
13+
<ChartErrorBarSettings Visible="true" Type="ErrorBarType.Percentage" VerticalError="4">
14+
</ChartErrorBarSettings>
15+
</ChartSeries>
16+
</ChartSeriesCollection>
17+
</SfChart>
18+
19+
@code {
20+
public class ChartData
21+
{
22+
public double X { get; set; }
23+
public double Y { get; set; }
24+
}
25+
26+
public List<ChartData> SalesReports = new List<ChartData>
27+
{
28+
new ChartData{ X= 2005, Y= 28 },
29+
new ChartData{ X= 2006, Y= 25 },
30+
new ChartData{ X= 2007, Y= 26 },
31+
new ChartData{ X= 2008, Y= 27 },
32+
new ChartData{ X= 2009, Y= 32 },
33+
new ChartData{ X= 2010, Y= 35 },
34+
new ChartData{ X= 2011, Y= 30 }
35+
};
36+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/ErrorBar/CustomBarType.razor‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@page "/ChartTypes/ErrorBar/CustomBarType"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<TypeRoute></TypeRoute>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
13+
<ChartErrorBarSettings Visible="true" Type="ErrorBarType.Custom" Mode="ErrorBarMode.Both"
14+
VerticalPositiveError="2" HorizontalPositiveError="1" VerticalNegativeError="2" HorizontalNegativeError="1">
15+
</ChartErrorBarSettings>
16+
</ChartSeries>
17+
</ChartSeriesCollection>
18+
</SfChart>
19+
20+
@code {
21+
public class ChartData
22+
{
23+
public double X { get; set; }
24+
public double Y { get; set; }
25+
}
26+
27+
public List<ChartData> SalesReports = new List<ChartData>
28+
{
29+
new ChartData{ X= 2005, Y= 28 },
30+
new ChartData{ X= 2006, Y= 25 },
31+
new ChartData{ X= 2007, Y= 26 },
32+
new ChartData{ X= 2008, Y= 27 },
33+
new ChartData{ X= 2009, Y= 32 },
34+
new ChartData{ X= 2010, Y= 35 },
35+
new ChartData{ X= 2011, Y= 30 }
36+
};
37+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/ChartTypes/ErrorBar/CustomErrorBarCap.razor‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@page "/ChartTypes/ErrorBar/CustomErrorBarCap"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<TypeRoute></TypeRoute>
6+
<br/>
7+
<SfChart>
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartSeriesCollection>
12+
<ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
13+
<ChartErrorBarSettings Visible="true">
14+
<ChartErrorBarCapSettings Length="10" Width="10" Color="#0000ff"></ChartErrorBarCapSettings>
15+
</ChartErrorBarSettings>
16+
</ChartSeries>
17+
</ChartSeriesCollection>
18+
</SfChart>
19+
20+
@code {
21+
public class ChartData
22+
{
23+
public double X { get; set; }
24+
public double Y { get; set; }
25+
}
26+
27+
public List<ChartData> SalesReports = new List<ChartData>
28+
{
29+
new ChartData{ X= 2005, Y= 28 },
30+
new ChartData{ X= 2006, Y= 25 },
31+
new ChartData{ X= 2007, Y= 26 },
32+
new ChartData{ X= 2008, Y= 27 },
33+
new ChartData{ X= 2009, Y= 32 },
34+
new ChartData{ X= 2010, Y= 35 },
35+
new ChartData{ X= 2011, Y= 30 }
36+
};
37+
}

0 commit comments

Comments
 (0)