Skip to content

Commit 47421e1

Browse files
Swetha-KishoreSwetha-Kishore
committed
documentation(881081): Committed the changes in Charts.
1 parent 14541ec commit 47421e1

File tree

6 files changed

+130
-7
lines changed

6 files changed

+130
-7
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -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: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -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 header and footer of the PDF page can be positioned by using the `x` and `y` properties in the header and footer.
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: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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)