Your search did not match any results.
Charts

Export Several Charts

Documentation

This demo shows how to export several charts into a single image using the DevExpress.viz.exportFromMarkup method. Before calling this method, you need to collect the SVG markup of all charts using the DevExpress.viz.getMarkup method and calculate the size of the resulting image.

Copy to CodeSandBox
Apply
Reset
<div class="charts"> <dx-chart id="chart" [dataSource]="goldMedals" title="Olympic Gold Medals in 2008" [rotated]="true"> <dxi-series color="#f3c40b" type="bar" argumentField="country" valueField="medals"> <dxo-label [visible]="true"></dxo-label> </dxi-series> <dxo-legend [visible]="false"></dxo-legend> </dx-chart> <dx-pie-chart id="pieChart" [dataSource]="allMedals" [title]="title" palette="Harmony Light"> <dxi-series argumentField="country" valueField="medals"> <dxo-label [visible]="true"> <dxo-connector [visible]="true"></dxo-connector> </dxo-label> </dxi-series> </dx-pie-chart> </div> <div class="controls-pane"> <dx-button icon="export" text="Export" type="default" [width]="145" (onClick)="export()"> </dx-button> </div>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxChartModule, DxPieChartModule, DxChartComponent, DxPieChartComponent, DxButtonModule } from 'devextreme-angular'; import { Service, Medals } from './app.service'; import { getMarkup, exportFromMarkup } from 'devextreme/viz/export'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { @ViewChild(DxChartComponent) chart: DxChartComponent; @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; title: string = "Total Olympic Medals\n in 2008"; allMedals: Medals[]; goldMedals: Medals[]; constructor(service: Service) { this.allMedals = service.getAllMedals(); this.goldMedals = service.getGoldMedals(); } export() { var chartInstance = this.chart.instance, pieChartInstance = this.pieChart.instance, markup = getMarkup([chartInstance, pieChartInstance]), pieSize = pieChartInstance.getSize(), chartSize = chartInstance.getSize(); exportFromMarkup(markup, { fileName: "chart", format: 'PNG', height: chartSize.height + pieSize.height, width: Math.max(chartSize.width, pieSize.width) }) } } @NgModule({ imports: [ BrowserModule, DxChartModule, DxPieChartModule, DxButtonModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep #chart-demo { height: 460px; } ::ng-deep .charts { width: 820px; margin: 0 auto; height: 374px; margin-bottom: 40px; font-size: 0; } ::ng-deep #chart, #pieChart{ width: 395px; height: 100%; display: inline-block; vertical-align: top; } ::ng-deep #chart { margin-right: 30px; } ::ng-deep .controls-pane { text-align: center; }
import { Injectable } from '@angular/core'; export class Medals { country: string; medals: number; } let allMedals: Medals[] = [{ country: "USA", medals: 110 }, { country: "China", medals: 100 }, { country: "Russia", medals: 71 }, { country: "UK", medals: 47 }, { country: "Australia", medals: 46 }, { country: "Germany", medals: 41 }, { country: "France", medals: 41 }, { country: "South Korea", medals: 31 }]; let goldMedals: Medals[] = [{ country: "China", medals: 51 }, { country: "USA", medals: 36 }, { country: "Russia", medals: 22 }, { country: "UK", medals: 19 }, { country: "Germany", medals: 16 }, { country: "Australia", medals: 14 }, { country: "South Korea", medals: 13 }, { country: "France", medals: 7 }]; @Injectable() export class Service { getAllMedals(): Medals[] { return allMedals; } getGoldMedals(): Medals[] { return goldMedals; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@5.1.2/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@5.1.2/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@5.1.2/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@5.1.2/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@5.1.2/bundles/platform-browser-dynamic.umd.js', '@angular/router': 'npm:@angular/router@5.1.2/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@5.1.2/bundles/forms.umd.js', '@angular/common/http': 'npm:@angular/common@5.1.2/bundles/common-http.umd.js', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@5.3.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme': 'npm:devextreme@18.1', 'devextreme-angular': 'npm:devextreme-angular@18.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.1.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>