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

Radial Gauge Export

The Telerik UI RadialGauge for ASP.NET Core export relies on the Telerik UI DrawingAPI library. It enables you to export the content to:

Export as PDF

The radial gauge allows you to retrieve the PDF representation of the content via the exportPDF method. The base64 result can be forwarded to a service or downloaded on the client-side.

    <button class='export-pdf k-button'>Export as PDF</button>

    @(Html.Kendo().RadialGauge()
        .Name("gauge")
        .Pointers(pointers =>
        {
            pointers.Add().Value(10).Color("#c20000").Length(0.5).Cap(c => c.Size(0.15).Color("red"));
        })
    )   

    <script>
        $(document).ready( function () {
            $(".export-pdf").click(function () {
                var gauge = $("#gauge").getKendoRadialGauge();
                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'>Export as PDF</button>

    <kendo-radialgauge name="gauge">
        <radialgauge-pointers>
            <pointer value="10" color="#c20000" length="0.5">
                <cap size="0.15" color="red"/>
            </pointer>
        </radialgauge-pointers>
    </kendo-radialgauge>

    <script>
        $(document).ready( function () {
            $(".export-pdf").click(function () {
                var gauge = $("#gauge").getKendoRadialGauge();
                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

The radial gauge allows you to retrieve the Image representation of the content via the exportImage method. The base64 result can be forwarded to a service or downloaded on the client-side.

    <button class='export-img k-button'>Export as Image</button>

    @(Html.Kendo().RadialGauge()
        .Name("gauge")
        .Pointers(pointers =>
        {
            pointers.Add().Value(10).Color("#c20000").Length(0.5).Cap(c => c.Size(0.15).Color("red"));
        })
    )

    <script>
        $(document).ready( function () {
            $(".export-img").click(function () {
                var gauge = $("#gauge").getKendoRadialGauge();
                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'>Export as Image</button>

    <kendo-radialgauge name="gauge">
        <radialgauge-pointers>
            <pointer value="10" color="#c20000" length="0.5">
                <cap size="0.15" color="red"/>
            </pointer>
        </radialgauge-pointers>
    </kendo-radialgauge>

    <script>
        $(document).ready( function () {
            $(".export-img").click(function () {
                var gauge = $("#gauge").getKendoRadialGauge();
                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

The radial gauge allows you to retrieve the Scalable Vector Graphics (SVG) representation of the content via the exportSVG method. The base64 result can be forwarded to a service or downloaded on the client-side.

    <button class='export-svg k-button'>Export as SVG</button>

    @(Html.Kendo().RadialGauge()
        .Name("gauge")
        .Pointers(pointers =>
        {
            pointers.Add().Value(10).Color("#c20000").Length(0.5).Cap(c => c.Size(0.15).Color("red"));
        })
    )

    <script>
        $(document).ready( function () {
            $(".export-svg").click(function () {
                var gauge = $("#gauge").getKendoRadialGauge();
                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'>Export as SVG</button>

    <kendo-radialgauge name="gauge">
        <radialgauge-pointers>
            <pointer value="10" color="#c20000" length="0.5">
                <cap size="0.15" color="red"/>
            </pointer>
        </radialgauge-pointers>
    </kendo-radialgauge>

    <script>
        $(document).ready( function () {
            $(".export-svg").click(function () {
                var gauge = $("#gauge").getKendoRadialGauge();
                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