Skip to content

Commit 2b150f6

Browse files
GowrimathiGowrimathi
authored
Merge pull request #2951 from syncfusion-content/EJ2-881081-chart-hotfix
documentation(881081): Committed the changes in Charts.
2 parents 62ad11b + f9b2f07 commit 2b150f6

File tree

6 files changed

+130
-8
lines changed

6 files changed

+130
-8
lines changed

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

Lines changed: 2 additions & 2 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

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

Lines changed: 31 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

@@ -107,7 +109,32 @@ In the export method, specify the following parameters to add a header and foote
107109
{% endtabs %}
108110
{% endif %}
109111

112+
### Positioning the header and footer in PDF export
110113

114+
The headers and footers can be positioned anywhere on the PDF page using the `x` and `y` properties.
115+
116+
{% if page.publishingplatform == "aspnet-core" %}
117+
118+
{% tabs %}
119+
{% highlight cshtml tabtitle="CSHTML" %}
120+
{% include code-snippet/chart/getting-started/header-footerPosition/tagHelper %}
121+
{% endhighlight %}
122+
{% highlight c# tabtitle="Header-footerPosition.cs" %}
123+
{% include code-snippet/chart/getting-started/header-footerPosition/header-footerPosition.cs %}
124+
{% endhighlight %}
125+
{% endtabs %}
126+
127+
{% elsif page.publishingplatform == "aspnet-mvc" %}
128+
129+
{% tabs %}
130+
{% highlight razor tabtitle="CSHTML" %}
131+
{% include code-snippet/chart/getting-started/header-footerPosition/razor %}
132+
{% endhighlight %}
133+
{% highlight c# tabtitle="Header-footerPosition.cs" %}
134+
{% include code-snippet/chart/getting-started/header-footerPosition/header-footerPosition.cs %}
135+
{% endhighlight %}
136+
{% endtabs %}
137+
{% endif %}
111138

112139
### Exporting charts into separate page during the PDF export
113140

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

Lines changed: 4 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 ##Platform_Name## 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,9 @@ 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" %}
1921

2022
{% if page.publishingplatform == "aspnet-core" %}
2123

‎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)