Search results

Print and Export in ASP.NET Core Accumulation Chart control

22 Oct 2021 / 1 minute to read

Print

The rendered chart can be printed directly from the browser by calling the public method print.

tagHelper
print.cs
Copied to clipboard
<ejs-chart id="container" load="window.onChartLoad" title="Sales Comparision" pointRender="labelRender">
            <e-chart-chartarea border="border"></e-chart-chartarea>
            <e-chart-primaryxaxis title="Manager" valueType="Category" majorGridLines="line"></e-chart-primaryxaxis>
            <e-chart-primaryyaxis minimum="0" maximum="20000" title="Sales" majorGridLines="line" majorTickLines="line"></e-chart-primaryyaxis>
            <e-series-collection>
                <e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" type="Column"></e-series>
            </e-series-collection>
        </ejs-chart>
    <div class="col-lg-3 property-section">
        <table id="property" title="Properties" style="width: 100%">
            <tbody>
                <tr id="button-control" style="height: 50px">
                    <td align="center">
                        <ejs-button id="button" content="Print" iconCss="e-icons e-play-icon" cssClass="e-flat" isPrimary: true,></ejs-button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
 
  <script>
        document.getElementById('button').onclick = () => {
            var chart = document.getElementById('container').ej2_instances[0];
            chart.print();
};
</script>
Copied to clipboard
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.

tagHelper
export.cs
Copied to clipboard
<ejs-chart id="container" load="window.onChartLoad" title="Sales Comparision" pointRender="labelRender">
            <e-chart-chartarea border="border"></e-chart-chartarea>
            <e-chart-primaryxaxis title="Manager" valueType="Category" majorGridLines="line"></e-chart-primaryxaxis>
            <e-chart-primaryyaxis minimum="0" maximum="20000" title="Sales" majorGridLines="line" majorTickLines="line"></e-chart-primaryyaxis>
            <e-series-collection>
                <e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" type="Column"></e-series>
            </e-series-collection>
        </ejs-chart>
    <div class="col-lg-3 property-section">
        <table id="property" title="Properties" style="width: 100%">
            <tbody>
                <tr id="button-control" style="height: 50px">
                    <td align="center">
                        <ejs-button id="button" content="Export" iconCss="e-icons e-play-icon" cssClass="e-flat" isPrimary: true,></ejs-button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
 
  <script>
        document.getElementById('button').onclick = () => {
            var chart = document.getElementById('container').ej2_instances[0];
            var dropdown = document.getElementById('data').ej2_instances[0];
            var fileName = ((document.getElementById('fileName'))).value;
            chart.export(dropdown.value, fileName);
        };
</script>
Copied to clipboard
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;
        }
Contents
Contents