Skip to content

Commit c1de9e8

Browse files
GowrimathiGowrimathi
authored
Merge pull request #2949 from syncfusion-content/EJ2-881081-chart
documentation(881081): Committed the changes in Charts.
2 parents 0d8fcee + ee46806 commit c1de9e8

File tree

6 files changed

+136
-13
lines changed

6 files changed

+136
-13
lines changed

‎ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-print.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Chart Print in ##Platform_Name## Chart Component
3+
title: Chart Print in Syncfusion ##Platform_Name## Chart Component
44
description: Learn here all about Chart Print in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Chart print
@@ -9,7 +9,7 @@ documentation: ug
99
---
1010

1111

12-
# Print and Export
12+
# Print and Export in ASP.NET Core chart component
1313

1414
## Print
1515

@@ -49,8 +49,10 @@ The optional parameters for this method are,
4949
* `Controls` - pass collections of controls for multiple export,
5050
* `Width` - width of chart export,
5151
* `Height` - height of chart export,
52-
* `Header` - header for the exported chart, and
53-
* `Footer` - footer for the exported chart.
52+
* `IsVertical` - decides the chart export in vertical or horizontal direction,
53+
* `Header` - header for the exported chart,
54+
* `Footer` - footer for the exported chart, and
55+
* `ExportToMultiplePages` - decides to export multiple charts on separate pages for PDF export.
5456

5557
{% if page.publishingplatform == "aspnet-core" %}
5658

‎ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-print.md

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Chart Print in ##Platform_Name## Chart Component
4-
description: Learn here all about Chart Print in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
3+
title: Chart Print in Syncfusion ASP.NET Core Chart Component
4+
description: Learn here all about Chart Print in Syncfusion ASP.NET Core Chart component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Chart print
77
publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

1111

12-
# Print and Export
12+
# Print and Export in ASP.NET Core Chart component
1313

1414
## Print
1515

@@ -49,8 +49,10 @@ The optional parameters for this method are,
4949
* `Controls` - pass collections of controls for multiple export,
5050
* `Width` - width of chart export,
5151
* `Height` - height of chart export,
52-
* `Header` - header for the exported chart, and
53-
* `Footer` - footer for the exported chart.
52+
* `IsVertical` - decides the chart export in vertical or horizontal direction,
53+
* `Header` - header for the exported chart,
54+
* `Footer` - footer for the exported chart, and
55+
* `ExportToMultiplePages` - decides to export multiple charts on separate pages for PDF export.
5456

5557
{% if page.publishingplatform == "aspnet-core" %}
5658

@@ -75,8 +77,6 @@ The optional parameters for this method are,
7577
{% endtabs %}
7678
{% endif %}
7779

78-
79-
8080
### Adding header and footer in PDF export
8181

8282
In the export method, specify the following parameters to add a header and footer text to the exported PDF document:
@@ -107,7 +107,32 @@ In the export method, specify the following parameters to add a header and foote
107107
{% endtabs %}
108108
{% endif %}
109109

110+
### Positioning the header and footer in PDF export
111+
112+
The headers and footers can be positioned anywhere on the PDF page using the `x` and `y` properties.
113+
114+
{% if page.publishingplatform == "aspnet-core" %}
110115

116+
{% tabs %}
117+
{% highlight cshtml tabtitle="CSHTML" %}
118+
{% include code-snippet/chart/getting-started/header-footerPosition/tagHelper %}
119+
{% endhighlight %}
120+
{% highlight c# tabtitle="Header-footerPosition.cs" %}
121+
{% include code-snippet/chart/getting-started/header-footerPosition/header-footerPosition.cs %}
122+
{% endhighlight %}
123+
{% endtabs %}
124+
125+
{% elsif page.publishingplatform == "aspnet-mvc" %}
126+
127+
{% tabs %}
128+
{% highlight razor tabtitle="CSHTML" %}
129+
{% include code-snippet/chart/getting-started/header-footerPosition/razor %}
130+
{% endhighlight %}
131+
{% highlight c# tabtitle="Header-footerPosition.cs" %}
132+
{% include code-snippet/chart/getting-started/header-footerPosition/header-footerPosition.cs %}
133+
{% endhighlight %}
134+
{% endtabs %}
135+
{% endif %}
111136

112137
### Exporting charts into separate page during the PDF export
113138

‎ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/date-time-axis.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Date Time Axis in ##Platform_Name## Chart Component
3+
title: Date Time Axis in Syncfusion ASP.NET Core Chart Component
44
description: Learn here all about Date Time Axis in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Date Time Axis
@@ -15,7 +15,10 @@ documentation: ug
1515

1616
## DateTime Axis
1717

18-
Date time axis uses date time scale and displays the date time values as axis labels in the specified format.
18+
Date time axis uses date time scale and displays the date time values as axis labels in the specified format. To get start quickly with DateTime axis in ASP.NET Core Charts, you can check on this video:
19+
20+
{% youtube "https://www.youtube.com/watch?v=DnMIgbn6bco" %}
21+
1922

2023
{% if page.publishingplatform == "aspnet-core" %}
2124

‎ej2-asp-core-mvc/code-snippet/chart/getting-started/header-footerPosition/header-footerPosition.cs

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
public IActionResult Index()
2+
{
3+
List<MultiExportChartData> chartData = new List<MultiExportChartData>
4+
{
5+
new MultiExportChartData { x = new DateTime(2012, 01, 01), y = 11.0, y1 = 19.5, y2 = 7.1 },
6+
new MultiExportChartData { x = new DateTime(2013, 01, 01), y = 12.9, y1 = 17.5, y2 = 6.8 },
7+
new MultiExportChartData { x = new DateTime(2014, 01, 01), y = 13.4, y1 = 15.5, y2 = 4.1 },
8+
new MultiExportChartData { x = new DateTime(2015, 01, 01), y = 13.7, y1 = 10.3, y2 = 2.8 },
9+
new MultiExportChartData { x = new DateTime(2016, 01, 01), y = 12.7, y1 = 7.8, y2 = 2.8 },
10+
new MultiExportChartData { x = new DateTime(2017, 01, 01), y = 12.5, y1 = 5.7, y2 = 3.8 },
11+
new MultiExportChartData { x = new DateTime(2018, 01, 01), y = 12.7, y1 = 5.9, y2 = 4.3 },
12+
new MultiExportChartData { x = new DateTime(2019, 01, 01), y = 12.4, y1 = 5.6, y2 = 4.7 },
13+
new MultiExportChartData { x = new DateTime(2020, 01, 01), y = 13.5, y1 = 5.3, y2 = 5.6 }
14+
};
15+
ViewBag.dataSource = chartData;
16+
return View();
17+
}
18+
public class MultiExportChartData
19+
{
20+
public DateTime x;
21+
public double y;
22+
public double y1;
23+
public double y2;
24+
}

‎ej2-asp-core-mvc/code-snippet/chart/getting-started/header-footerPosition/razor

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@Html.EJS().Chart("container").Series(series =>
2+
{
3+
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Width(2).XName("x").YName("y").DataSource(ViewBag.dataSource).Add();
4+
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Manager").MajorGridLines(mg=>mg.Width(0))
5+
).PrimaryYAxis(py => py.Title("Sales").MajorTickLines(mt=>mt.Width(0)).Minimum(0).Maximum(20000)
6+
).Title("Sales Comparision").Render()
7+
8+
<div>
9+
@Html.EJS().Button("togglebtn").IsPrimary(true).Content("Export").Render()
10+
</div>
11+
<script>
12+
document.getElementById('togglebtn').onclick = () => {
13+
var chart1 = document.getElementById('container').ej2_instances[0];
14+
const header = {
15+
content: 'Chart Header',
16+
font: {
17+
fontSize: 15,
18+
fontStyle: "TimesNewRoman"
19+
},
20+
x: 10,
21+
y: 10
22+
};
23+
const footer = {
24+
content: 'Chart Footer',
25+
fontSize: 15,
26+
x: 0,
27+
y: 0
28+
};
29+
chart1.exportModule.export('PDF', 'Chart', null, [chart1], null, null, true, header, footer, true);
30+
};
31+
</script>

‎ej2-asp-core-mvc/code-snippet/chart/getting-started/header-footerPosition/tagHelper

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<ejs-chart id="container1" title="Crude Steel Production Annual Growth">
2+
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime">
3+
<e-majorgridlines width="0"></e-majorgridlines>
4+
</e-chart-primaryxaxis>
5+
<e-chart-primaryyaxis title="Million Metric Tons" minimum="0" maximum="20" interval="4">
6+
<e-majorticklines width="0"></e-majorticklines>
7+
</e-chart-primaryyaxis>
8+
<e-series-collection>
9+
<e-series dataSource="ViewBag.dataSource" xName="x" width="2" yName="y"
10+
type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
11+
</e-series>
12+
</e-series-collection>
13+
</ejs-chart>
14+
<div>
15+
<ejs-button id="button" content="Export" isPrimary="true"></ejs-button>
16+
</div>
17+
18+
<script>
19+
document.getElementById('button').onclick = () => {
20+
var chart1 = document.getElementById('container1').ej2_instances[0];
21+
const header = {
22+
content: 'Chart Header',
23+
font: {
24+
fontSize: 15,
25+
fontStyle: "TimesNewRoman"
26+
},
27+
x: 10,
28+
y: 10
29+
};
30+
const footer = {
31+
content: 'Chart Footer',
32+
fontSize: 15,
33+
x: 0,
34+
y: 0
35+
};
36+
chart1.exportModule.export('PDF', 'Chart', null, [chart1], null, null, true, header, footer, true);
37+
};
38+
</script>

0 commit comments

Comments
 (0)