Skip to content

Commit 2753f43

Browse files
committed
Prepared UG Title and SubTitle samples for AccumulationChart control
1 parent bb6a97d commit 2753f43

File tree

88 files changed

+77761
-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.

88 files changed

+77761
-0
lines changed
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@page
2+
@using static TitlePrintSamples.Pages.CustomSubTitleModel
3+
@model TitlePrintSamples.Pages.CustomSubTitleModel
4+
@{
5+
List<PieChartData> chartData = new List<PieChartData>
6+
{
7+
new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"},
8+
new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"},
9+
new PieChartData { xValue = "Canada", yValue = 13, text = "13%"},
10+
new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"},
11+
new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"},
12+
new PieChartData { xValue = "Russia", yValue = 2, text = "2%"},
13+
new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"}
14+
};
15+
}
16+
17+
<ejs-accumulationchart id="container" title="Oil and other liquid imports in USA" subTitle="In the year 2014 - 2015">
18+
<e-accumulationchart-subtitlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" color="#E27F2D" size="13px">
19+
</e-accumulationchart-subtitlestyle>
20+
<e-accumulationchart-legendsettings visible="false">
21+
</e-accumulationchart-legendsettings>
22+
<e-accumulation-series-collection>
23+
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue">
24+
<e-accumulationseries-datalabel name="text" visible="true">
25+
</e-accumulationseries-datalabel>
26+
</e-accumulation-series>
27+
</e-accumulation-series-collection>
28+
</ejs-accumulationchart>
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
4+
namespace TitlePrintSamples.Pages
5+
{
6+
public class CustomSubTitleModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
public class PieChartData
12+
{
13+
public string xValue;
14+
public double yValue;
15+
public string text;
16+
}
17+
}
18+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@page
2+
@using static TitlePrintSamples.Pages.CustomTitleModel
3+
@model TitlePrintSamples.Pages.CustomTitleModel
4+
@{
5+
List<PieChartData> chartData = new List<PieChartData>
6+
{
7+
new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"},
8+
new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"},
9+
new PieChartData { xValue = "Canada", yValue = 13, text = "13%"},
10+
new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"},
11+
new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"},
12+
new PieChartData { xValue = "Russia", yValue = 2, text = "2%"},
13+
new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"}
14+
};
15+
}
16+
17+
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
18+
<e-accumulationchart-legendsettings visible="false">
19+
</e-accumulationchart-legendsettings>
20+
<e-accumulation-series-collection>
21+
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue" name="Browser">
22+
</e-accumulation-series>
23+
</e-accumulation-series-collection>
24+
</ejs-accumulationchart>
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
4+
namespace TitlePrintSamples.Pages
5+
{
6+
public class CustomTitleModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
public class PieChartData
12+
{
13+
public string xValue;
14+
public double yValue;
15+
public string text;
16+
}
17+
}
18+
}
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@page
2+
@model ErrorModel
3+
@{
4+
ViewData["Title"] = "Error";
5+
}
6+
7+
<h1 class="text-danger">Error.</h1>
8+
<h2 class="text-danger">An error occurred while processing your request.</h2>
9+
10+
@if (Model.ShowRequestId)
11+
{
12+
<p>
13+
<strong>Request ID:</strong> <code>@Model.RequestId</code>
14+
</p>
15+
}
16+
17+
<h3>Development Mode</h3>
18+
<p>
19+
Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
20+
</p>
21+
<p>
22+
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
23+
It can result in displaying sensitive information from exceptions to end users.
24+
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
25+
and restarting the app.
26+
</p>
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
using System.Diagnostics;
4+
5+
namespace TitlePrintSamples.Pages
6+
{
7+
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
8+
[IgnoreAntiforgeryToken]
9+
public class ErrorModel : PageModel
10+
{
11+
public string? RequestId { get; set; }
12+
13+
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
14+
15+
private readonly ILogger<ErrorModel> _logger;
16+
17+
public ErrorModel(ILogger<ErrorModel> logger)
18+
{
19+
_logger = logger;
20+
}
21+
22+
public void OnGet()
23+
{
24+
RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
25+
}
26+
}
27+
28+
}
Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@page
2+
@using static TitlePrintSamples.Pages.ExportModel
3+
@model TitlePrintSamples.Pages.ExportModel
4+
<script src="~/scripts/chart/financial-data.js"></script>
5+
@{
6+
List<PieChartData> chartData = new List<PieChartData>
7+
{
8+
new PieChartData { xValue = "Chrome", yValue = 37 },
9+
new PieChartData { xValue = "UC Browser", yValue = 17 },
10+
new PieChartData { xValue = "iPhone", yValue = 19 },
11+
new PieChartData { xValue = "Others", yValue = 4 },
12+
new PieChartData { xValue = "Opera", yValue = 11 },
13+
new PieChartData { xValue = "Android", yValue = 12 },
14+
};
15+
}
16+
<div class="col-lg-9 control-section" align="center">
17+
<ejs-chart id="container" load="load" title="Sales Comparision" pointRender="labelRender">
18+
<e-chart-chartarea>
19+
<e-chartarea-border width="0"></e-chartarea-border>
20+
</e-chart-chartarea>
21+
<e-chart-primaryxaxis title="Manager" valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
22+
<e-majorgridlines width="0"></e-majorgridlines>
23+
</e-chart-primaryxaxis>
24+
<e-chart-primaryyaxis minimum="0" maximum="40" title="Sales">
25+
<e-majorgridlines width="0"></e-majorgridlines>
26+
<e-majorticklines width="0"></e-majorticklines>
27+
</e-chart-primaryyaxis>
28+
<e-series-collection>
29+
<e-series dataSource="chartData" xName="xValue" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
30+
</e-series-collection>
31+
</ejs-chart>
32+
</div>
33+
<div class="col-lg-3 property-section">
34+
<table id="property" title="Properties" style="width: 100%">
35+
<tbody>
36+
<tr id="button-control" style="height: 50px">
37+
<td align="center">
38+
<ejs-button id="button" content="Export" iconCss="e-icons e-export icon" cssClass="e-flat" isPrimary: true,></ejs-button>
39+
</td>
40+
</tr>
41+
</tbody>
42+
</table>
43+
</div>
44+
45+
<script>
46+
function load(args) {
47+
var selectedTheme = location.hash.split('/')[1];
48+
selectedTheme = selectedTheme ? selectedTheme : 'Material';
49+
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'));
50+
args.chart.primaryXAxis.labelIntersectAction = ej.base.Browser.isDevice ? 'None' : 'Trim';
51+
args.chart.primaryYAxis.labelFormat = ej.base.Browser.isDevice ? '{value}' : '{value}GW';
52+
args.chart.series[0].marker.dataLabel.enableRotation = ej.base.Browser.isDevice ? 'true' : 'false';
53+
args.chart.series[0].marker.dataLabel.angle = ej.base.Browser.isDevice ? '-90' : '0';
54+
}
55+
56+
document.getElementById('button').onclick = () => {
57+
var chart = document.getElementById('container').ej2_instances[0];
58+
var dropdown = document.getElementById('data').ej2_instances[0];
59+
var fileName = ((document.getElementById('fileName'))).value;
60+
chart.export(dropdown.value, fileName);
61+
};
62+
63+
function labelRender(args) {
64+
var selectedTheme = location.hash.split('/')[1];
65+
selectedTheme = selectedTheme ? selectedTheme : 'Material';
66+
var materialColors = ["#00bdae", "#404041", "#357cd2", "#e56590", "#f8b883", "#70ad47", "#dd8abd", "#7f84e8", "#7bb4eb",
67+
"#ea7a57", "#404041", "#00bdae"];
68+
var fabricColors = ["#4472c4", "#ed7d31", "#ffc000", "#70ad47", "#5b9bd5",
69+
"#c1c1c1", "#6f6fe2", "#e269ae", "#9e480e", "#997300", "#4472c4", "#70ad47", "#ffc000", "#ed7d31"];
70+
var bootstrapColors = ["#a16ee5", "#f7ce69", "#55a5c2", "#7ddf1e", "#ff6ea6",
71+
"#7953ac", "#b99b4f", "#407c92", "#5ea716", "#b91c52"];
72+
var highContrastColors = ["#79ECE4", "#E98272", "#DFE6B6", "#C6E773", "#BA98FF",
73+
"#FA83C3", "#00C27A", "#43ACEF", "#D681EF", "#D8BC6E"];
74+
var fluentColors = ['#1AC9E6', '#DA4CB2', '#EDBB40', '#AF4BCF', '#FF7266', '#1BD565', '#EE993D', '#5887FF', '#EC548D',
75+
'#7D39C0'];
76+
var fluentDarkColors = ['#1AC9E6', '#DA4CB2', '#EDBB40', '#AF4BCF', '#FF7266', '#1BD565', '#EE993D', '#5887FF', '#EC548D',
77+
'#7D39C0'];
78+
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
79+
args.fill = fabricColors[args.point.index % 10];
80+
}
81+
else if (selectedTheme === 'material') {
82+
args.fill = materialColors[args.point.index % 10];
83+
}
84+
else if (selectedTheme === 'highcontrast') {
85+
args.fill = highContrastColors[args.point.index % 10];
86+
}
87+
else if (selectedTheme === 'fluent') {
88+
args.fill = fluentColors[args.point.index % 10];
89+
}
90+
else if (selectedTheme === 'fluent-dark') {
91+
args.fill = fluentDarkColors[args.point.index % 10];
92+
}
93+
else {
94+
args.fill = bootstrapColors[args.point.index % 10];
95+
}
96+
};
97+
</script>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
4+
namespace TitlePrintSamples.Pages
5+
{
6+
public class ExportModel : PageModel
7+
{
8+
public void OnGet()
9+
{
10+
}
11+
public class PieChartData
12+
{
13+
public string xValue;
14+
public double yValue;
15+
}
16+
}
17+
}
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@page
2+
@using static TitlePrintSamples.Pages.IndexModel
3+
@model IndexModel
4+
@{
5+
List<PieChartData> chartData = new List<PieChartData>
6+
{
7+
new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"},
8+
new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"},
9+
new PieChartData { xValue = "Canada", yValue = 13, text = "13%"},
10+
new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"},
11+
new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"},
12+
new PieChartData { xValue = "Russia", yValue = 2, text = "2%"},
13+
new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"}
14+
};
15+
}
16+
17+
<ejs-accumulationchart id="container" title="Oil and other liquid imports in USA">
18+
<e-accumulationchart-titlestyle fontFamily="Arial" fontStyle="italic" fontWeight="regular" color="#E27F2D" size="23px">
19+
</e-accumulationchart-titlestyle>
20+
<e-accumulationchart-legendsettings visible="false">
21+
</e-accumulationchart-legendsettings>
22+
<e-accumulation-series-collection>
23+
<e-accumulation-series dataSource="chartData" xName="xValue" yName="yValue">
24+
<e-accumulationseries-datalabel name="text" visible="true">
25+
</e-accumulationseries-datalabel>
26+
</e-accumulation-series>
27+
</e-accumulation-series-collection>
28+
</ejs-accumulationchart>
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
using Microsoft.AspNetCore.Mvc.RazorPages;
3+
4+
namespace TitlePrintSamples.Pages
5+
{
6+
public class IndexModel : PageModel
7+
{
8+
private readonly ILogger<IndexModel> _logger;
9+
10+
public IndexModel(ILogger<IndexModel> logger)
11+
{
12+
_logger = logger;
13+
}
14+
15+
public void OnGet()
16+
{
17+
18+
}
19+
public class PieChartData
20+
{
21+
public string xValue;
22+
public double yValue;
23+
public string text;
24+
}
25+
}
26+
}

0 commit comments

Comments
 (0)