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

9 Jan 20245 minutes to read

Print

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

CSHTML

<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
    depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold" name="Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

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

Print.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 },
        new ChartData { country= "France",    gold= 50 },
        new ChartData { country= "Germany",   gold= 40 },
        new ChartData { country= "Italy",     gold= 40 },
        new ChartData { country= "Sweden",    gold= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Export

The rendered 3D chart can be exported to JPEG, PNG, SVG, or PDF format using the export method. The input parameters for this method are type for format and fileName for result.

CSHTML

<ejs-chart3d id="container" title="Olympic Medals" wallColor="transparent" enableRotation="true" rotation="7" tilt="10"
    depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
    </e-chart3d-primaryxaxis>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold" name="Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

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

Export.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 },
        new ChartData { country= "France",    gold= 50 },
        new ChartData { country= "Germany",   gold= 40 },
        new ChartData { country= "Italy",     gold= 40 },
        new ChartData { country= "Sweden",    gold= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}