Print and Export in ASP.NET CORE 3D Circular Chart Component

19 Mar 20246 minutes to read

Print

The rendered 3D Circular Chart can be printed directly from the browser by calling the public method print. The ID of the 3D Circular Chart div element must be passed as the input parameter to that method.

CSHTML

<ejs-circularchart3d id="container" tilt="-45">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y" radius="100%">
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>

<div>
    <ejs-button id="togglebtn" content="Print" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('togglebtn').onclick = () => {
        var circularchart = document.getElementById('container').ej2_instances[0];
        circularchart.print();
    };
</script>

Print.cs

public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 3 },
        new CircularChartData { X = "Feb",  Y = 3.5 },
        new CircularChartData { X = "Mar",  Y = 7 },
        new CircularChartData { X = "Apr",  Y = 13.5 },
        new CircularChartData { X = "May",  Y = 19 },
        new CircularChartData { X = "Jun",  Y = 23.5 },
        new CircularChartData { X = "Jul",  Y = 26 },
        new CircularChartData { X = "Aug",  Y = 25 },
        new CircularChartData { X = "Sep",  Y = 21 },
        new CircularChartData { X = "Oct",  Y = 15 }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}

Export

The rendered 3D Circular Chart can be exported to JPEG, PNG, or SVG format using the export method. Additionally, you can export the 3D Circular Chart as a PDF format using the pdfExport method. The input parameters for this method are type for the format and fileName for the result.

CSHTML

<ejs-circularchart3d id="container" tilt="-45" enableExport="true">
    <e-circularchart3d-legendsettings visible="false">
    </e-circularchart3d-legendsettings>
    <e-circularchart3d-series-collection>
        <e-circularchart3d-series dataSource="ViewBag.dataSource" xName="X" yName="Y" radius="100%">
        </e-circularchart3d-series>
    </e-circularchart3d-series-collection>
</ejs-circularchart3d>

<div>
    <ejs-button id="export" content="Export" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('export').onclick = () => {
        var circularchart = document.getElementById('container').ej2_instances[0];
        circularchart.circularChartExport3DModule.export('PNG', 'result');
    };
</script>

Export.cs

public IActionResult Index()
{
    List<CircularChartData> circularData = new List<CircularChartData>
    {
        new CircularChartData { X = "Jan",  Y = 3 },
        new CircularChartData { X = "Feb",  Y = 3.5 },
        new CircularChartData { X = "Mar",  Y = 7 },
        new CircularChartData { X = "Apr",  Y = 13.5 },
        new CircularChartData { X = "May",  Y = 19 },
        new CircularChartData { X = "Jun",  Y = 23.5 },
        new CircularChartData { X = "Jul",  Y = 26 },
        new CircularChartData { X = "Aug",  Y = 25 },
        new CircularChartData { X = "Sep",  Y = 21 },
        new CircularChartData { X = "Oct",  Y = 15 }
    };
    ViewBag.dataSource = circularData;
    return View();
}
public class CircularChartData
{
    public string X;
    public double Y;
}