All Components

Export Options

The Gauges deliver built-in support for Image, PDF, and SVG export.

The result is a Base64-encoded file that you can send to a service or save on the client by using the File Saver package.

The Gauges support the following export options:

Exporting to Images

The following example demonstrates how to save the Gauges as a PNG image by using the exportImage method.

import { Component } from '@angular/core';

import { saveAs } from '@progress/kendo-file-saver';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <button (click)="exportGauge(linear)" class="k-button">
                Export Linear Gauge
            </button>
            <button (click)="exportGauge(radial)" class="k-button">
                Export Radial Gauge
            </button>
            <button (click)="exportGauge(arc)" class="k-button">
                Export Arc Gauge
            </button>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-2">
                <kendo-lineargauge #linear [pointer]="{ value: value }">
                </kendo-lineargauge>
            </div>
            <div class="col-sm-12 col-md-5">
                <kendo-radialgauge #radial [pointer]="{ value: value }">
                </kendo-radialgauge>
            </div>
            <div class="col-sm-12 col-md-5">
                <kendo-arcgauge #arc [value]="value">
                    <ng-template kendoArcGaugeCenterTemplate let-value="value">
                        {{ value }}
                    </ng-template>
                </kendo-arcgauge>
            </div>
        </div>
    `,
    styles: [`
        .k-gauge {
            display: block;
        }
    `]
})
export class AppComponent {

  public value: number = 30;

  public exportGauge(component: any): void {
    component.exportImage().then((dataURI: string) => {
      saveAs(dataURI, 'gauge.png');
    });
  }
}

Exporting to PDF

The exportPDF method from the Drawing library takes a visual element and produces a PDF file. To get the Gauge visual, use the exportVisual method which returns a Promise that is resolved with the Gauge visual.

The following example demonstrates how to save the Gauges as a PDF file by using the exportPDF method.

import { Component } from '@angular/core';

import { saveAs } from '@progress/kendo-file-saver';
import { exportPDF } from '@progress/kendo-drawing/pdf';;

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <button (click)="exportGauge(linear)" class="k-button">
                Export Linear Gauge
            </button>
            <button (click)="exportGauge(radial)" class="k-button">
                Export Radial Gauge
            </button>
            <button (click)="exportGauge(arc)" class="k-button">
                Export Arc Gauge
            </button>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-2">
                <kendo-lineargauge #linear [pointer]="{ value: value }">
                </kendo-lineargauge>
            </div>
            <div class="col-sm-12 col-md-5">
                <kendo-radialgauge #radial [pointer]="{ value: value }">
                </kendo-radialgauge>
            </div>
            <div class="col-sm-12 col-md-5">
                <kendo-arcgauge #arc [value]="value">
                    <ng-template kendoArcGaugeCenterTemplate let-value="value">
                        {{ value }}
                    </ng-template>
                </kendo-arcgauge>
            </div>
        </div>
    `,
    styles: [`
        .k-gauge {
            display: block;
        }
    `]
})
export class AppComponent {

  public value: number = 30;

  public exportGauge(component: any): void {
    component.exportVisual().then((visual) => {
      exportPDF(visual).then((dataURI) => {
        saveAs(dataURI, 'chart.pdf');
      });
    });
  }
}

Exporting to SVG

The following example demonstrates how to save the Gauges as an SVG file by using the exportSVG method.

import { Component } from '@angular/core';

import { saveAs } from '@progress/kendo-file-saver';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <button (click)="exportGauge(linear)" class="k-button">
                Export Linear Gauge
            </button>
            <button (click)="exportGauge(radial)" class="k-button">
                Export Radial Gauge
            </button>
            <button (click)="exportGauge(arc)" class="k-button">
                Export Arc Gauge
            </button>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-2">
                <kendo-lineargauge #linear [pointer]="{ value: value }">
                </kendo-lineargauge>
            </div>
            <div class="col-sm-12 col-md-5">
                <kendo-radialgauge #radial [pointer]="{ value: value }">
                </kendo-radialgauge>
            </div>
            <div class="col-sm-12 col-md-5">
                <kendo-arcgauge #arc [value]="value">
                    <ng-template kendoArcGaugeCenterTemplate let-value="value">
                        {{ value }}
                    </ng-template>
                </kendo-arcgauge>
            </div>
        </div>
    `,
    styles: [`
        .k-gauge {
            display: block;
        }
    `]
})
export class AppComponent {

  public value: number = 30;

  public exportGauge(component: any): void {
    component.exportSVG().then((dataURI: string) => {
      saveAs(dataURI, 'gauge.svg');
    });
  }
}
In this article