feature(EJ2-4407): chart annotation samples added

Author: pipeline

src/chart/annotation-plnkr.json

@@ -0,0 +1 @@
+{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n    imports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ],\n     \n    exports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ]\n})\nexport class SharedModule { }\n","app.module":"import { AnnotationChartComponent } from './annotation.component';\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\n/**\n * Chart Control\n */\nimport { NgModule, ModuleWithProviders, Type } from '@angular/core';\n\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-ng-charts';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n\n\n@NgModule({\n    imports: [ChartAllModule, SharedModule, ButtonModule, AccumulationChartAllModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [AnnotationChartComponent],\nbootstrap: [AnnotationChartComponent]\n})\nexport class AppModule { }","annotation.component":"import { Component, ViewEncapsulation, ViewChild } from '@angular/core';\nimport {\n    ILoadedEventArgs, IMouseEventArgs, ChartComponent, IAccLoadedEventArgs,\n    SelectionMode\n} from '@syncfusion/ej2-ng-charts';\nimport {\n    AccumulationChart, AccumulationDataLabel\n} from '@syncfusion/ej2-charts';\nAccumulationChart.Inject(AccumulationDataLabel);\n\n\n/**\n * Area Series\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'annotation.html',\n    styleUrls: ['chart.style.css'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class AnnotationChartComponent {\n    public pie: AccumulationChart;\n    public render: boolean = false;\n    @ViewChild('chart')\n    public chart: ChartComponent;\n    public legend: Object = {\n        visible: false\n    };\n    public dataSource: Object = [\n        { x: '2014', y0: 51, y1: 77, y2: 66, y3: 34 }, { x: '2015', y0: 67, y1: 49, y2: 19, y3: 38 },\n        { x: '2016', y0: 143, y1: 121, y2: 91, y3: 44 }, { x: '2017', y0: 19, y1: 28, y2: 65, y3: 51 },\n        { x: '2018', y0: 30, y1: 66, y2: 32, y3: 61 }, { x: '2019', y0: 189, y1: 128, y2: 122, y3: 76 },\n        { x: '2020', y0: 72, y1: 97, y2: 65, y3: 82 }\n    ];\n    public pieDataSource: Object[] = [\n        { x: 'UK', y: 111 }, { x: 'Germany', y: 76 },\n        { x: 'France', y: 66 }, { x: 'Italy', y: 34 }\n    ];\n    public primaryXAxis: Object = {\n        title: 'Years',\n        majorGridLines: { width: 0 }, minorGridLines: { width: 1 },\n        minorTickLines: { width: 1 }, interval: 1,\n        labelIntersectAction: 'Rotate45',\n        valueType: 'Category'\n    };\n    public chartArea: Object = { border: { width: 0 } };\n    public primaryYAxis: Object = {\n        title: 'Sales in Billions', lineStyle: { width: 0 },\n        minimum: 0, maximum: 700, interval: 100,\n        majorGridLines: { width: 1 }, minorGridLines: { width: 1 },\n        majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, labelFormat: '{value}B',\n    };\n    public load(args: ILoadedEventArgs): void {\n        let selectedTheme: string = location.hash.split('/')[1];\n        args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n    };\n    public title: string = 'Mobile Game Market by Country';\n    public selectedDataIndexes: any[] = [{ series: 0, point: 0 }];\n    public selectionMode: SelectionMode = 'Cluster';\n\n    public chartMouseUp(args: IMouseEventArgs): void {\n        if (args.target.indexOf('Point') > -1) {\n            let pointIndex: number = parseInt(args.target[args.target.length - 1], 10);\n            this.pieDataSource = [];\n            for (let series of this.chart.visibleSeries) {\n                this.pieDataSource.push({\n                    'x': series.name,\n                    'y': series.points[pointIndex].y\n                });\n            }\n            this.pie.series[0].dataSource = this.pieDataSource;\n            this.pie.series[0].xName = 'x';\n            this.pie.series[0].yName = 'y';\n            this.pie.refresh();\n        }\n    }\n\n    public loaded(args: ILoadedEventArgs): void {\n        if (this.render) {\n            this.pie.destroy();\n            this.pie = new AccumulationChart({\n                background: 'transparent',\n                series: [{\n                    radius: '65%', animation: { enable: false },\n                    dataSource: this.pieDataSource,\n                    xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },\n                }],\n                load: (args: IAccLoadedEventArgs) => {\n                    let selectedTheme: string = location.hash.split('/')[1];\n                    args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n                },\n                legendSettings: { visible: false }\n            });\n            this.pie.appendTo('#chart_annotation');\n        }\n\n\n    }\n    public animationComplete(args: ILoadedEventArgs): void {\n        this.render = true;\n        this.pie = new AccumulationChart({\n            background: 'transparent',\n            series: [{\n                radius: '65%', animation: { enable: false },\n                dataSource: this.pieDataSource,\n                xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },\n            }],\n            load: (args: IAccLoadedEventArgs) => {\n                let selectedTheme: string = location.hash.split('/')[1];\n                args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';\n            },\n            legendSettings: { visible: false }\n        });\n        this.pie.appendTo('#chart_annotation');\n    }\n    ;\n}","annotation.html":"<div class=\"control-section\">\n    <ej-chart #chart style='display:block;' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' (load)='load($event)'\n        (animationComplete)='animationComplete($event)' [selectionMode]='selectionMode' [chartArea]='chartArea' [legendSettings]='legend'\n        [selectedDataIndexes]='selectedDataIndexes' (chartMouseUp)='chartMouseUp($event)' (loaded)='loaded($event)'>\n        <e-annotations>\n            <e-annotation content='<div id=\"chart_annotation\" style=\"width: 200px; height: 200px\"></div>' x='20%' y='25%' coordinateUnits='Pixel'\n                region='Series'>\n                </e-annotation>\n        </e-annotations>\n        <e-series-collection>\n            <e-series [dataSource]='dataSource' type='StackingColumn' xName='x' yName='y0' name='UK'>\n            </e-series>\n            <e-series [dataSource]='dataSource' type='StackingColumn' xName='x' yName='y1' name='Germany'>\n            </e-series>\n            <e-series [dataSource]='dataSource' type='StackingColumn' xName='x' yName='y2' name='France'>\n            </e-series>\n            <e-series [dataSource]='dataSource' type='StackingColumn' xName='x' yName='y3' name='Italy'>\n            </e-series>\n        </e-series-collection>\n        </ej-chart>\n</div>","chart.style.css":".control-fluid {\n    padding: 0px !important;\n}","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/[email protected]\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n        <script src=\"systemjs.config.js\"></script>\n    </head>\n    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.ts',\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

src/chart/annotation.component.ts

@@ -0,0 +1,119 @@
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+    ILoadedEventArgs, IMouseEventArgs, ChartComponent, IAccLoadedEventArgs,
+    SelectionMode
+} from '@syncfusion/ej2-ng-charts';
+import {
+    AccumulationChart, AccumulationDataLabel
+} from '@syncfusion/ej2-charts';
+AccumulationChart.Inject(AccumulationDataLabel);
+
+
+/**
+ * Area Series
+ */
+@Component({
+    selector: 'control-content',
+    templateUrl: 'annotation.html',
+    styleUrls: ['chart.style.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class AnnotationChartComponent {
+    public pie: AccumulationChart;
+    public render: boolean = false;
+    @ViewChild('chart')
+    public chart: ChartComponent;
+    public legend: Object = {
+        visible: false
+    };
+    public dataSource: Object = [
+        { x: '2014', y0: 51, y1: 77, y2: 66, y3: 34 }, { x: '2015', y0: 67, y1: 49, y2: 19, y3: 38 },
+        { x: '2016', y0: 143, y1: 121, y2: 91, y3: 44 }, { x: '2017', y0: 19, y1: 28, y2: 65, y3: 51 },
+        { x: '2018', y0: 30, y1: 66, y2: 32, y3: 61 }, { x: '2019', y0: 189, y1: 128, y2: 122, y3: 76 },
+        { x: '2020', y0: 72, y1: 97, y2: 65, y3: 82 }
+    ];
+    public pieDataSource: Object[] = [
+        { x: 'UK', y: 111 }, { x: 'Germany', y: 76 },
+        { x: 'France', y: 66 }, { x: 'Italy', y: 34 }
+    ];
+    public primaryXAxis: Object = {
+        title: 'Years',
+        majorGridLines: { width: 0 }, minorGridLines: { width: 1 },
+        minorTickLines: { width: 1 }, interval: 1,
+        labelIntersectAction: 'Rotate45',
+        valueType: 'Category'
+    };
+    public chartArea: Object = { border: { width: 0 } };
+    public primaryYAxis: Object = {
+        title: 'Sales in Billions', lineStyle: { width: 0 },
+        minimum: 0, maximum: 700, interval: 100,
+        majorGridLines: { width: 1 }, minorGridLines: { width: 1 },
+        majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, labelFormat: '{value}B',
+    };
+    public load(args: ILoadedEventArgs): void {
+        let selectedTheme: string = location.hash.split('/')[1];
+        args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
+    };
+    public title: string = 'Mobile Game Market by Country';
+    public selectedDataIndexes: any[] = [{ series: 0, point: 0 }];
+    public selectionMode: SelectionMode = 'Cluster';
+
+    public chartMouseUp(args: IMouseEventArgs): void {
+        if (args.target.indexOf('Point') > -1) {
+            let pointIndex: number = parseInt(args.target[args.target.length - 1], 10);
+            this.pieDataSource = [];
+            for (let series of this.chart.visibleSeries) {
+                this.pieDataSource.push({
+                    'x': series.name,
+                    'y': series.points[pointIndex].y
+                });
+            }
+            this.pie.series[0].dataSource = this.pieDataSource;
+            this.pie.series[0].xName = 'x';
+            this.pie.series[0].yName = 'y';
+            this.pie.refresh();
+        }
+    }
+
+    public loaded(args: ILoadedEventArgs): void {
+        if (this.render) {
+            this.pie.destroy();
+            this.pie = new AccumulationChart({
+                background: 'transparent',
+                series: [{
+                    radius: '65%', animation: { enable: false },
+                    dataSource: this.pieDataSource,
+                    xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },
+                }],
+                load: (args: IAccLoadedEventArgs) => {
+                    let selectedTheme: string = location.hash.split('/')[1];
+                    args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
+                },
+                legendSettings: { visible: false }
+            });
+            this.pie.appendTo('#chart_annotation');
+        }
+
+
+    }
+    public animationComplete(args: ILoadedEventArgs): void {
+        this.render = true;
+        this.pie = new AccumulationChart({
+            background: 'transparent',
+            series: [{
+                radius: '65%', animation: { enable: false },
+                dataSource: this.pieDataSource,
+                xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Inside', font: { color: 'white' } },
+            }],
+            load: (args: IAccLoadedEventArgs) => {
+                let selectedTheme: string = location.hash.split('/')[1];
+                args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
+            },
+            legendSettings: { visible: false }
+        });
+        this.pie.appendTo('#chart_annotation');
+    }
+    constructor() {
+        // code
+    };
+}

src/chart/annotation.html

@@ -0,0 +1,33 @@
+<div class="control-section">
+    <ej-chart #chart style='display:block;' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' (load)='load($event)'
+        (animationComplete)='animationComplete($event)' [selectionMode]='selectionMode' [chartArea]='chartArea' [legendSettings]='legend'
+        [selectedDataIndexes]='selectedDataIndexes' (chartMouseUp)='chartMouseUp($event)' (loaded)='loaded($event)'>
+        <e-annotations>
+            <e-annotation content='<div id="chart_annotation" style="width: 200px; height: 200px"></div>' x='20%' y='25%' coordinateUnits='Pixel'
+                region='Series'>
+                </e-annotation>
+        </e-annotations>
+        <e-series-collection>
+            <e-series [dataSource]='dataSource' type='StackingColumn' xName='x' yName='y0' name='UK'>
+            </e-series>
+            <e-series [dataSource]='dataSource' type='StackingColumn' xName='x' yName='y1' name='Germany'>
+            </e-series>
+            <e-series [dataSource]='dataSource' type='StackingColumn' xName='x' yName='y2' name='France'>
+            </e-series>
+            <e-series [dataSource]='dataSource' type='StackingColumn' xName='x' yName='y3' name='Italy'>
+            </e-series>
+        </e-series-collection>
+        </ej-chart>
+</div>
+<div id="description">
+    <p>
+        In this example, you can see how to render and configure annotation feature in chart. In this example, we have used a pie
+        chart in catesain axis using annotation support. While selecting a category, data's are showed in pie.
+    </p>
+    <p style="font-weight: 500">Injecting Module</p>
+    <p>
+        Chart component features are segregated into individual feature-wise modules. To use Annotation feature, we need to inject
+        <code>ChartAnnotationService</code> into the <code>@NgModule.providers</code> section.
+    </p>
+    <p>
+</div>