New to Telerik UI for ASP.NET Core? Download free 30-day trial

Export

The ArcGauge export functionality relies on the Kendo UI Drawing library. It enables you to export the ArcGauge to any of the following formats:

Export to PDF

The ArcGauge allows you to retrieve the PDF representation of the content through the exportPDF() method. The base64 result can be forwarded to a remote endpoint or downloaded client-side.

    <button class='export-pdf k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Export to PDF</button>

    @(Html.Kendo().ArcGauge()
        .Name("gauge")
        .Value(65)
        .Scale(x => x.MajorUnit(20).MinorUnit(5))
    )

    <script>
        $(document).ready( function () {
            $(".export-pdf").on("click", function () {
                var gauge = $("#gauge").getKendoArcGauge();
                gauge.exportPDF({ 
                    paperSize: "auto", 
                    margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } 
                }).done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.pdf",
                        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                    });
                });
            });
        });
    </script>
    <button class='export-pdf k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Export to PDF</button>

    <kendo-arcgauge name="gauge" value="65">
        <scale major-unit="20" minor-unit="5">
        </scale>
    </kendo-arcgauge>

    <script>
        $(document).ready( function () {
            $(".export-pdf").on("click", function () {
                var gauge = $("#gauge").getKendoArcGauge();
                gauge.exportPDF({ 
                    paperSize: "auto", 
                    margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } 
                }).done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.pdf",
                        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                    });
                });
            });
        });
    </script>

Export as Image

You can retrieve the image representation of the ArcGauge content by using the exportImage() method. The base64 result can be forwarded to a service or downloaded client-side.

    <button class='export-img k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Export as Image</button>

    @(Html.Kendo().ArcGauge()
        .Name("gauge")
        .Value(65)
        .Scale(x => x.MajorUnit(20).MinorUnit(5))
    )

    <script>
        $(document).ready( function () {
            $(".export-img").click(function () {
                var gauge = $("#gauge").getKendoArcGauge();
                gauge.exportImage().done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.png",
                        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                    });
                });
            });
        });
    </script>
    <button class='export-img k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Export as Image</button>

    <kendo-arcgauge name="gauge" value="65">
        <scale major-unit="20" minor-unit="5">
        </scale>
    </kendo-arcgauge>

    <script>
        $(document).ready( function () {
            $(".export-img").click(function () {
                var gauge = $("#gauge").getKendoArcGauge();
                gauge.exportImage().done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.png",
                        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                    });
                });
            });
        });
    </script>

Export as SVG

You can use the exportSVG() method to export the ArcGauge as a Scalable Vector Graphics (SVG). The base64 result can be forwarded to a service or downloaded on the client.

    <button class='export-svg k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Export as SVG</button>

    @(Html.Kendo().ArcGauge()
        .Name("gauge")
        .Value(65)
        .Scale(x => x.MajorUnit(20).MinorUnit(5))
    )

    <script>
        $(document).ready( function () {
            $(".export-svg").click(function () {
                var gauge = $("#gauge").getKendoArcGauge();
                gauge.exportSVG().done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.svg",
                        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                    });
                });
            });
        });
    </script>
    <button class='export-svg k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Export as SVG</button>

    <kendo-arcgauge name="gauge" value="65">
        <scale major-unit="20" minor-unit="5">
        </scale>
    </kendo-arcgauge>

    <script>
        $(document).ready( function () {
            $(".export-svg").click(function () {
                var gauge = $("#gauge").getKendoArcGauge();
                gauge.exportSVG().done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "chart.svg",
                        proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
                    });
                });
            });
        });
    </script>

See Also

In this article