documentation(881081): Committed the changes in Charts.

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

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Chart Print in ##Platform_Name## Chart Component
+title: Chart Print in Syncfusion ##Platform_Name## Chart Component
 description: Learn here all about Chart Print in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Chart print
@@ -9,7 +9,7 @@ documentation: ug
 ---
 
 
-# Print and Export
+# Print and Export in ASP.NET Core Chart component
 
 ## Print
 

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

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Chart Print in ##Platform_Name## Chart Component
+title: Chart Print in Syncfusion ##Platform_Name## Chart Component
 description: Learn here all about Chart Print in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Chart print
@@ -9,7 +9,7 @@ documentation: ug
 ---
 
 
-# Print and Export
+# Print and Export in ASP.NET Core chart component
 
 ## Print
 
@@ -49,8 +49,10 @@ The optional parameters for this method are,
 * `Controls` - pass collections of controls for multiple export,
 * `Width` - width of chart export,
 * `Height` - height of chart export,
-* `Header` - header for the exported chart, and
-* `Footer` - footer for the exported chart.
+* `IsVertical` -  decides the chart export in vertical or horizontal direction,
+* `Header` - header for the exported chart,
+* `Footer` - footer for the exported chart, and
+* `ExportToMultiplePages` - decides to export multiple charts on separate pages for PDF export.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -107,7 +109,32 @@ In the export method, specify the following parameters to add a header and foote
 {% endtabs %}
 {% endif %}
 
+### Positioning the header and footer in PDF export
 
+The headers and footers can be positioned anywhere on the PDF page using the `x` and `y` properties.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/getting-started/header-footerPosition/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Header-footerPosition.cs" %}
+{% include code-snippet/chart/getting-started/header-footerPosition/header-footerPosition.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/getting-started/header-footerPosition/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Header-footerPosition.cs" %}
+{% include code-snippet/chart/getting-started/header-footerPosition/header-footerPosition.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
 
 ### Exporting charts into separate page during the PDF export
 

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

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Date Time Axis in ##Platform_Name## Chart Component
+title: Date Time Axis in Syncfusion ##Platform_Name## Chart Component
 description: Learn here all about Date Time Axis in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: Date Time Axis
@@ -15,7 +15,9 @@ documentation: ug
 
 ## DateTime Axis
 
-Date time axis uses date time scale and displays the date time values as axis labels in the specified format.
+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:
+
+{% youtube "https://www.youtube.com/watch?v=DnMIgbn6bco" %}
 
 {% if page.publishingplatform == "aspnet-core" %}
 

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

@@ -0,0 +1,24 @@
+public IActionResult Index()
+{
+     List<MultiExportChartData> chartData = new List<MultiExportChartData>
+    {
+        new MultiExportChartData { x = new DateTime(2012, 01, 01), y = 11.0, y1 = 19.5, y2 = 7.1 },
+        new MultiExportChartData { x = new DateTime(2013, 01, 01), y = 12.9, y1 = 17.5, y2 = 6.8 },
+        new MultiExportChartData { x = new DateTime(2014, 01, 01), y = 13.4, y1 = 15.5, y2 = 4.1 },
+        new MultiExportChartData { x = new DateTime(2015, 01, 01), y = 13.7, y1 = 10.3, y2 = 2.8 },
+        new MultiExportChartData { x = new DateTime(2016, 01, 01), y = 12.7, y1 = 7.8,  y2 = 2.8 },
+        new MultiExportChartData { x = new DateTime(2017, 01, 01), y = 12.5, y1 = 5.7,  y2 = 3.8 },
+        new MultiExportChartData { x = new DateTime(2018, 01, 01), y = 12.7, y1 = 5.9,  y2 = 4.3 },
+        new MultiExportChartData { x = new DateTime(2019, 01, 01), y = 12.4, y1 = 5.6,  y2 = 4.7 },
+        new MultiExportChartData { x = new DateTime(2020, 01, 01), y = 13.5, y1 = 5.3,  y2 = 5.6 }
+    };
+    ViewBag.dataSource = chartData;
+    return View();
+}
+public class MultiExportChartData
+{
+    public DateTime x;
+    public double y;
+    public double y1;
+    public double y2;
+}

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

@@ -0,0 +1,31 @@
+  @Html.EJS().Chart("container").Series(series =>
+       {
+           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Width(2).XName("x").YName("y").DataSource(ViewBag.dataSource).Add();
+       }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Manager").MajorGridLines(mg=>mg.Width(0))
+       ).PrimaryYAxis(py => py.Title("Sales").MajorTickLines(mt=>mt.Width(0)).Minimum(0).Maximum(20000)
+       ).Title("Sales Comparision").Render()
+
+<div>
+    @Html.EJS().Button("togglebtn").IsPrimary(true).Content("Export").Render()
+</div>
+<script>
+document.getElementById('togglebtn').onclick = () => {
+    var chart1 = document.getElementById('container').ej2_instances[0];
+    const header = {
+        content: 'Chart Header',
+        font: {
+            fontSize: 15,
+            fontStyle: "TimesNewRoman"
+        },            
+        x: 10,
+        y: 10
+    };
+    const footer = {
+        content: 'Chart Footer',
+        fontSize: 15,
+        x: 0,
+        y: 0
+    };
+    chart1.exportModule.export('PDF', 'Chart', null, [chart1], null, null, true, header, footer, true);
+};
+</script>

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

@@ -0,0 +1,38 @@
+<ejs-chart id="container1" title="Crude Steel Production Annual Growth">
+    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime">
+        <e-majorgridlines width="0"></e-majorgridlines>
+    </e-chart-primaryxaxis>
+    <e-chart-primaryyaxis title="Million Metric Tons" minimum="0" maximum="20" interval="4">
+        <e-majorticklines width="0"></e-majorticklines>
+    </e-chart-primaryyaxis>
+    <e-series-collection>
+        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" yName="y"
+                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
+        </e-series>
+    </e-series-collection>
+</ejs-chart>
+<div>
+    <ejs-button id="button" content="Export" isPrimary="true"></ejs-button>
+</div>
+
+<script>
+    document.getElementById('button').onclick = () => {
+    var chart1 = document.getElementById('container1').ej2_instances[0];
+    const header = {
+        content: 'Chart Header',
+        font: {
+            fontSize: 15,
+            fontStyle: "TimesNewRoman"
+        },            
+        x: 10,
+        y: 10
+    };
+    const footer = {
+        content: 'Chart Footer',
+        fontSize: 15,
+        x: 0,
+        y: 0
+    };
+    chart1.exportModule.export('PDF', 'Chart', null, [chart1], null, null, true, header, footer, true);
+};
+</script>