Skip to content

Commit ca45dd6

Browse files
BackiarajBackiaraj
committed
Prepared sample for Chart
1 parent 5af0545 commit ca45dd6

File tree

231 files changed

+10137
-0
lines changed

Some content is hidden

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

231 files changed

+10137
-0
lines changed

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/ChartUGSample.Client.csproj‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net8.0</TargetFramework>
5+
<ImplicitUsings>enable</ImplicitUsings>
6+
<Nullable>enable</Nullable>
7+
<NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
8+
<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
9+
</PropertyGroup>
10+
11+
<ItemGroup>
12+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
13+
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
14+
<PackageReference Include="Syncfusion.Blazor.Buttons" Version="23.2.7" />
15+
<PackageReference Include="Syncfusion.Blazor.Charts" Version="23.2.7" />
16+
<PackageReference Include="Syncfusion.Blazor.Grid" Version="23.2.7" />
17+
<PackageReference Include="Syncfusion.Blazor.Themes" Version="23.2.7" />
18+
</ItemGroup>
19+
20+
</Project>

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/Animation.razor‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@page "/Annotation/Animation"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<AnnotationsRoute></AnnotationsRoute>
6+
<br/>
7+
<SfChart Title="Olympic Medals">
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
9+
10+
<ChartSeriesCollection>
11+
<ChartSeries DataSource="@MedalDetails" Name="Gold" XName="Country" Width="2" Opacity="1" YName="Gold" Type="ChartSeriesType.Column">
12+
<ChartSeriesAnimation Enable="true" Duration="2000" Delay="200"></ChartSeriesAnimation>
13+
<ChartSeriesBorder Width="3" Color="red"></ChartSeriesBorder>
14+
</ChartSeries>
15+
</ChartSeriesCollection>
16+
</SfChart>
17+
18+
@code {
19+
public class ChartData
20+
{
21+
public string Country { get; set; }
22+
public double Gold { get; set; }
23+
public double Silver { get; set; }
24+
public double Bronze { get; set; }
25+
}
26+
27+
public List<ChartData> MedalDetails = new List<ChartData>
28+
{
29+
new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
30+
new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
31+
new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
32+
new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
33+
new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
34+
new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
35+
new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
36+
new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
37+
};
38+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/AnnotationsRoute.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<table>
2+
<tr>
3+
<td><b>Annotation:</b></td>
4+
<td><a href="Annotation/ChartAnnotation">ChartAnnotation</a></td>
5+
<td><a href="Annotation/Region">Region</a></td>
6+
<td><a href="Annotation/CoOrdinateUnit">CoOrdinateUnits</a></td>
7+
</tr>
8+
<tr>
9+
<td><b>Appearance:</b></td>
10+
<td><a href="Annotation/CustomColorPalette">CustomColorPalette</a></td>
11+
<td><a href="Annotation/BackgroundAndBorder">BackgroundAndBorder</a></td>
12+
<td><a href="Annotation/ChartMargin">ChartMargin</a></td>
13+
</tr>
14+
<tr>
15+
<td></td>
16+
<td><a href="Annotation/CustomChartArea">ChartAreaCustomization</a></td>
17+
<td><a href="Annotation/Animation">Animation</a></td>
18+
<td><a href="Annotation/ChartTitle">ChartTitle</a></td>
19+
<td><a href="Annotation/ChartSubTitle">ChartSubTitle</a></td>
20+
</tr>
21+
<tr>
22+
<td><b>Legend:</b></td>
23+
<td><a href="Annotation/EnableLegend">EnableLegend</a></td>
24+
<td><a href="Annotation/Position">Position</a></td>
25+
<td><a href="Annotation/Reverse">Reverse</a></td>
26+
<td><a href="Annotation/Alignment">Alignment</a></td>
27+
<td><a href="Annotation/Shape">Shape</a></td>
28+
<td><a href="Annotation/Size">Size</a></td>
29+
</tr>
30+
<tr>
31+
<td></td>
32+
<td><a href="Annotation/ShapeSize">ShapeSize</a></td>
33+
<td><a href="Annotation/ItemPadding">LegendItemPadding</a></td>
34+
<td><a href="Annotation/Page">Paging</a></td>
35+
<td><a href="Annotation/TextWrap">TextWrap</a></td>
36+
<td><a href="Annotation/SeriesSelection">SeriesSelection</a></td>
37+
<td><a href="Annotation/HideLegendItem">HideLegendItem</a></td>
38+
</tr>
39+
</table>

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/BackgroundAndBorder.razor‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@page "/Annotation/BackgroundAndBorder"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<AnnotationsRoute></AnnotationsRoute>
6+
<br/>
7+
<SfChart Title="Olympic Medals" Background="skyblue">
8+
<ChartBorder Color="#FF0000" Width="2"></ChartBorder>
9+
10+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
11+
12+
<ChartSeriesCollection>
13+
<ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
14+
</ChartSeries>
15+
</ChartSeriesCollection>
16+
</SfChart>
17+
18+
@code {
19+
public class ChartData
20+
{
21+
public string Country { get; set; }
22+
public double Gold { get; set; }
23+
}
24+
25+
public List<ChartData> MedalDetails = new List<ChartData>
26+
{
27+
new ChartData{ Country= "USA", Gold=50 },
28+
new ChartData{ Country="China", Gold=40 },
29+
new ChartData{ Country= "Japan", Gold=70 },
30+
new ChartData{ Country= "Australia", Gold=60},
31+
new ChartData{ Country= "France", Gold=50 },
32+
new ChartData{ Country= "Germany", Gold=40 },
33+
new ChartData{ Country= "Italy", Gold=40 },
34+
new ChartData{ Country= "Sweden", Gold=30 }
35+
};
36+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/ChartAnnotation1.razor‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@page "/Annotation/ChartAnnotation"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<AnnotationsRoute></AnnotationsRoute>
6+
<br/>
7+
<SfChart Title="Olympic Medals">
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartAnnotations>
12+
<ChartAnnotation X="@data" Y="65" CoordinateUnits="Units.Point">
13+
<ContentTemplate>
14+
<div style="color: firebrick; font-size: medium; font-style: italic">Highest Medal Count</div>
15+
</ContentTemplate>
16+
</ChartAnnotation>
17+
</ChartAnnotations>
18+
19+
<ChartSeriesCollection>
20+
<ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
21+
</ChartSeries>
22+
</ChartSeriesCollection>
23+
</SfChart>
24+
25+
@code {
26+
string data = "France";
27+
28+
public class ChartData
29+
{
30+
public string Country { get; set; }
31+
public double Gold { get; set; }
32+
}
33+
34+
public List<ChartData> MedalDetails = new List<ChartData>
35+
{
36+
new ChartData{ Country= "USA", Gold=50 },
37+
new ChartData{ Country= "China", Gold=40 },
38+
new ChartData{ Country= "Japan", Gold=70 },
39+
new ChartData{ Country= "Australia", Gold=60},
40+
new ChartData{ Country= "France", Gold=50 },
41+
new ChartData{ Country= "Germany", Gold=40 },
42+
new ChartData{ Country= "Italy", Gold=40 },
43+
new ChartData{ Country= "Sweden", Gold=30 }
44+
};
45+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/ChartMargins.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@page "/Annotation/ChartMargin"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<AnnotationsRoute></AnnotationsRoute>
6+
<br/>
7+
<SfChart Title="Olympic Medals" Background="skyblue">
8+
<ChartBorder Color="#FF0000" Width="2"></ChartBorder>
9+
10+
<ChartMargin Left="60" Right="60" Top="60" Bottom="60"></ChartMargin>
11+
12+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
13+
</ChartPrimaryXAxis>
14+
15+
<ChartSeriesCollection>
16+
<ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
17+
</ChartSeries>
18+
</ChartSeriesCollection>
19+
</SfChart>
20+
21+
@code {
22+
public class ChartData
23+
{
24+
public string Country { get; set; }
25+
public double Gold { get; set; }
26+
}
27+
28+
public List<ChartData> MedalDetails = new List<ChartData>
29+
{
30+
new ChartData{ Country= "USA", Gold=50 },
31+
new ChartData{ Country="China", Gold=40 },
32+
new ChartData{ Country= "Japan", Gold=70 },
33+
new ChartData{ Country= "Australia", Gold=60},
34+
new ChartData{ Country= "France", Gold=50 },
35+
new ChartData{ Country= "Germany", Gold=40 },
36+
new ChartData{ Country= "Italy", Gold=40 },
37+
new ChartData{ Country= "Sweden", Gold=30 }
38+
};
39+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/ChartSubTitle.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@page "/Annotation/ChartSubTitle"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<AnnotationsRoute></AnnotationsRoute>
6+
<br/>
7+
<SfChart Title="Olympic Medals" SubTitle="Medals">
8+
<ChartSubTitleStyle FontFamily="Arial" FontStyle="italic" FontWeight="regular" Size="18px" Color="red"></ChartSubTitleStyle>
9+
10+
<ChartTitleStyle FontFamily="Arial" FontStyle="italic" FontWeight="regular" Size="23px" Color="red"></ChartTitleStyle>
11+
12+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
13+
</ChartPrimaryXAxis>
14+
15+
<ChartSeriesCollection>
16+
<ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
17+
</ChartSeries>
18+
</ChartSeriesCollection>
19+
</SfChart>
20+
21+
@code {
22+
public class ChartData
23+
{
24+
public string Country { get; set; }
25+
public double Gold { get; set; }
26+
}
27+
28+
public List<ChartData> MedalDetails = new List<ChartData>
29+
{
30+
new ChartData{ Country= "USA", Gold=50 },
31+
new ChartData{ Country="China", Gold=40 },
32+
new ChartData{ Country= "Japan", Gold=70 },
33+
new ChartData{ Country= "Australia", Gold=60},
34+
new ChartData{ Country= "France", Gold=50 },
35+
new ChartData{ Country= "Germany", Gold=40 },
36+
new ChartData{ Country= "Italy", Gold=40 },
37+
new ChartData{ Country= "Sweden", Gold=30 }
38+
};
39+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/ChartTitle.razor‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@page "/Annotation/ChartTitle"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<AnnotationsRoute></AnnotationsRoute>
6+
<br/>
7+
<SfChart Title="Olympic Medals">
8+
<ChartTitleStyle Size="23px" Color="red" FontFamily="Arial" FontWeight="regular" FontStyle="italic"></ChartTitleStyle>
9+
10+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
11+
</ChartPrimaryXAxis>
12+
13+
<ChartSeriesCollection>
14+
<ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
15+
</ChartSeries>
16+
</ChartSeriesCollection>
17+
</SfChart>
18+
19+
@code {
20+
public class ChartData
21+
{
22+
public string Country { get; set; }
23+
public double Gold { get; set; }
24+
}
25+
26+
public List<ChartData> MedalDetails = new List<ChartData>
27+
{
28+
new ChartData{ Country= "USA", Gold=50 },
29+
new ChartData{ Country="China", Gold=40 },
30+
new ChartData{ Country= "Japan", Gold=70 },
31+
new ChartData{ Country= "Australia", Gold=60},
32+
new ChartData{ Country= "France", Gold=50 },
33+
new ChartData{ Country= "Germany", Gold=40 },
34+
new ChartData{ Country= "Italy", Gold=40 },
35+
new ChartData{ Country= "Sweden", Gold=30 }
36+
};
37+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/CoOrdinateUnit.razor‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@page "/Annotation/CoOrdinateUnit"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<AnnotationsRoute></AnnotationsRoute>
6+
<br/>
7+
<SfChart Title="Olympic Medals">
8+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
9+
</ChartPrimaryXAxis>
10+
11+
<ChartAnnotations>
12+
<ChartAnnotation X="250" Y="100" CoordinateUnits="Units.Pixel">
13+
<ContentTemplate>
14+
<div>Annotation in Pixel</div>
15+
</ContentTemplate>
16+
</ChartAnnotation>
17+
</ChartAnnotations>
18+
19+
<ChartSeriesCollection>
20+
<ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column">
21+
</ChartSeries>
22+
</ChartSeriesCollection>
23+
</SfChart>
24+
25+
@code {
26+
public class ChartData
27+
{
28+
public string Country { get; set; }
29+
public double Gold { get; set; }
30+
}
31+
32+
public List<ChartData> MedalDetails = new List<ChartData>
33+
{
34+
new ChartData{ Country= "USA", Gold=50 },
35+
new ChartData{ Country= "China", Gold=40 },
36+
new ChartData{ Country= "Japan", Gold=70 },
37+
new ChartData{ Country= "Australia", Gold=60},
38+
new ChartData{ Country= "France", Gold=50 },
39+
new ChartData{ Country= "Germany", Gold=40 },
40+
new ChartData{ Country= "Italy", Gold=40 },
41+
new ChartData{ Country= "Sweden", Gold=30 }
42+
};
43+
}

‎Chart/BlazorWebApp/ChartUGSample/ChartUGSample.Client/Pages/Annotation/CustomChartArea.razor‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@page "/Annotation/CustomChartArea"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Charts
5+
<AnnotationsRoute></AnnotationsRoute>
6+
<br/>
7+
<SfChart Title="Olympic Medals">
8+
<ChartArea Background="skyblue" Width="80%">
9+
<ChartAreaBorder Color="#FF0000" Width="2" />
10+
</ChartArea>
11+
12+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
13+
14+
<ChartSeriesCollection>
15+
<ChartSeries DataSource="@MedalDetails" XName="Country" YName="Gold" Type="ChartSeriesType.Column" />
16+
</ChartSeriesCollection>
17+
</SfChart>
18+
19+
@code {
20+
public class ChartData
21+
{
22+
public string Country { get; set; }
23+
public double Gold { get; set; }
24+
}
25+
26+
public List<ChartData> MedalDetails = new List<ChartData>
27+
{
28+
new ChartData{ Country= "USA", Gold=50 },
29+
new ChartData{ Country="China", Gold=40 },
30+
new ChartData{ Country= "Japan", Gold=70 },
31+
new ChartData{ Country= "Australia", Gold=60},
32+
new ChartData{ Country= "France", Gold=50 },
33+
new ChartData{ Country= "Germany", Gold=40 },
34+
new ChartData{ Country= "Italy", Gold=40 },
35+
new ChartData{ Country= "Sweden", Gold=30 }
36+
};
37+
}

0 commit comments

Comments
 (0)