Circular Gauge Export
The Telerik UI Circular Gauge for ASP.NET Core export relies on the Telerik UI DrawingAPI library. It enables you to export the content as:
Export as PDF
The circular 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().CircularGauge()
.Name("gauge")
.Value(65)
.Scale(x => x.MajorUnit(20).MinorUnit(5))
)
<script>
$(document).ready( function () {
$(".export-pdf").click(function () {
var gauge = $("#gauge").getKendoCircularGauge();
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-circulargauge name="gauge" value="65">
<scale major-unit="20" minor-unit="5">
</scale>
</kendo-circulargauge>
<script>
$(document).ready( function () {
$(".export-pdf").click(function () {
var gauge = $("#gauge").getKendoCircularGauge();
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 Circular Gauge allows you to retrieve the Image representation of the content through 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().CircularGauge()
.Name("gauge")
.Value(65)
.Scale(x => x.MajorUnit(20).MinorUnit(5))
)
<script>
$(document).ready( function () {
$(".export-img").click(function () {
var gauge = $("#gauge").getKendoCircularGauge();
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-circulargauge name="gauge" value="65">
<scale major-unit="20" minor-unit="5">
</scale>
</kendo-circulargauge>
<script>
$(document).ready( function () {
$(".export-img").click(function () {
var gauge = $("#gauge").getKendoCircularGauge();
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 Circular Gauge allows you to retrieve the Scalable Vector Graphics (SVG) representation of the content through 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().CircularGauge()
.Name("gauge")
.Value(65)
.Scale(x => x.MajorUnit(20).MinorUnit(5))
)
<script>
$(document).ready( function () {
$(".export-svg").click(function () {
var gauge = $("#gauge").getKendoCircularGauge();
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-circulargauge name="gauge" value="65">
<scale major-unit="20" minor-unit="5">
</scale>
</kendo-circulargauge>
<script>
$(document).ready( function () {
$(".export-svg").click(function () {
var gauge = $("#gauge").getKendoCircularGauge();
gauge.exportSVG().done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "chart.svg",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
});
</script>