Print and Export
24 Feb 202210 minutes to read
The rendered chart can be printed directly from the browser by calling the public method print.
@Html.EJS().AccumulationChart("container").Series(series =>
{
series.DataSource(ViewBag.dataSource)
.XName("xValue")
.YName("yValue")
.Name("Browser")
.Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
.ExplodeIndex(0).Add();
})
.EnableSmartLabels(true)
.ChartMouseClick("chartMouseClick")
.Title("Mobile Browser Statistics")
.LegendSettings(ls => ls.Visible(false)).Render()
<div class="col-lg-3 property-section">
<table id="property" title="Properties" style="width: 100%">
<tr id="button-control" style="height: 50px">
<td align='center'>
<div>
@Html.EJS().Button("togglebtn").IconCss("e-icons e-play-icon").Content("Print").CssClass("e-flat").Render()
</div>
</td>
</tr>
</table>
</div>
</div>
<script>
var chartMouseClick = function (args) {
if (args.target.indexOf('print') > -1) {
chart.print();
}
};
</script>
public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
}
Export
The rendered chart can be exported to Image
(jpeg or png) or SVG
or PDF
format by using the export method. Input parameters for this method are Export
Type for format
and fileName
of result.
@Html.EJS().AccumulationChart("container").Series(series =>
{
series.DataSource(ViewBag.dataSource)
.XName("xValue")
.YName("yValue")
.Name("Browser")
.Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
.ExplodeIndex(0).Add();
})
.EnableSmartLabels(true)
.Title("Mobile Browser Statistics")
.LegendSettings(ls => ls.Visible(false)).Render()
<div class="col-lg-3 property-section">
<table id="property" title="Properties" style="width: 100%">
<tr id="button-control" style="height: 50px">
<td align='center'>
<div>
@Html.EJS().Button("togglebtn").IconCss("e-icons e-play-icon").Content("Export").CssClass("e-flat").Render()
</div>
</td>
</tr>
</table>
</div>
</div>
<script>
document.getElementById('togglebtn').onclick = function () {
var chart = document.getElementById('export-container').ej2_instances[0];
var fileName = (document.getElementById('fileName')).value;
chart.export(mode, fileName);
};
</script>
public ActionResult Index()
{
List<PieChartData> chartData = new List<PieChartData>
{
new PieChartData { xValue = "Chrome", yValue = 37 },
new PieChartData { xValue = "UC Browser", yValue = 17 },
new PieChartData { xValue = "iPhone", yValue = 19 },
new PieChartData { xValue = "Others", yValue = 4 },
new PieChartData { xValue = "Opera", yValue = 11 },
new PieChartData { xValue = "Android", yValue = 12 },
};
ViewBag.dataSource = chartData;
return View();
}
public class PieChartData
{
public string xValue;
public double yValue;
}