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>