You\'re are currently hovering over {{selectedLabel || "______"}} whose value is {{selectedValue || "_______"}}
\n{{message || \'You will see a notification here after chart completes rendering.\'}}
\n{{message}}
\n'},t.ex17={title:"Dynamically add chart event listener",description:"How you can dynamically(runtime) add & remove chart specific events in FusionCharts",module:"// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load fusion theme\nimport * as FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n",component:'// In app.component.ts\nimport {\n Component,\n NgZone\n} from \'@angular/core\';\n\n\n@Component({\n selector: \'app\',\n templateUrl: \'./app.component.html\',\n})\nexport class AppComponent{\n dataSource: any;\n message: string;\n chartObj: any;\n handler:any;\n initMessage:any;\n iMsg:string;\n clickPlotMsg:string;\n attached: boolean;\n constructor(private zone: NgZone) {\n this.iMsg = \'Click on Track Data Plot Clicks button to listen to dataplotclick event\';\n this.initMessage = this.iMsg;\n this.clickPlotMsg = \'Click on the plot to see the value along with the label\';\n this.message = this.clickPlotMsg;\n this.attached = false;\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n }\n\n getMessage(dataObj){\n return `You have clicked on plot ${dataObj.categoryLabel} which has a value of ${dataObj.displayValue}`\n }\n\n dataplotClickHandler(eventObj, dataObj){\n this.zone.run(() => {\n this.message = this.getMessage(dataObj);\n });\n }\n\n initialized($event){\n this.chartObj = $event.chart;\n }\n\n attachEvent(){\n this.handler = this.dataplotClickHandler.bind(this);\n this.initMessage = \'\';\n this.message = this.clickPlotMsg;\n this.attached = true;\n this.chartObj.addEventListener(\'dataplotClick\',this.handler);\n }\n\n removeEvent(){\n this.initMessage = this.iMsg;\n this.message = this.clickPlotMsg;\n this.attached = false;\n this.chartObj.removeEventListener(\'dataplotClick\', this.handler);\n }\n}\n',template:'\x3c!-- In app.component.html --\x3e\n\n\n\n \n \n
\n\n Slice out Microsoft\n Reset\n
'},t.ex20={title:"Responsive charts",description:"Select any of the dimensions given in the list. The chart adjusts itself to its alloted percentage",module:"// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n",component:'// in app.component.ts\nimport {\n Component,\n NgZone\n} from \'@angular/core\';\n\n\n@Component({\n selector: \'app\',\n templateUrl: \'./app.component.html\'\n})\nexport class AppComponent {\n dataSource: any;\n chartObj: any;\n size: string = "secondSize";\n allSizes = {\n firstSize: { width : \'400px\', height: \'200px\'},\n secondSize: { width: \'600px\', height: \'350px\' },\n thirdSize: { width: \'700px\', height: \'400px\' }\n }\n styleObj: object;\n \n constructor(private zone: NgZone) {\n this.dataSource = {\n "chart": {\n "caption": "Countries With Most Oil Reserves [2017-18]",\n "subCaption": "In MMbbl = One Million barrels",\n "xAxisName": "Country",\n "yAxisName": "Reserves (MMbbl)",\n "numberSuffix": "K",\n "theme": "fusion"\n },\n "data": [\n {\n "label": "Venezuela",\n "value": "290"\n },\n {\n "label": "Saudi",\n "value": "260"\n },\n {\n "label": "Canada",\n "value": "180"\n },\n {\n "label": "Iran",\n "value": "140"\n },\n {\n "label": "Russia",\n "value": "115"\n },\n {\n "label": "UAE",\n "value": "100"\n },\n {\n "label": "US",\n "value": "30"\n },\n {\n "label": "China",\n "value": "30"\n }\n ]\n };\n\n this.styleObj = this.allSizes[this.size];\n }\n\n getStyle(){\n return this.styleObj;\n }\n\n initialized($event){\n this.chartObj = $event.chart;\n }\n onSelectionChange(size){\n this.size = size;\n this.styleObj = this.allSizes[this.size];\n }\n}\n',template:'\x3c!-- in app.component.html --\x3e\n\n\n{{message}}
'},t.ex24={title:"Slice data plots",description:"Use Chart specific custom API",module:"// Setup needed in app.module.ts\n\nimport { NgModule, enableProdMode } from '@angular/core'\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Load FusionCharts\nimport * as FusionCharts from 'fusioncharts';\n// Load Charts module\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\n// Load themes\nimport * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add dependencies to FusionChartsModule\nFusionChartsModule.fcRoot(\n FusionCharts,\n Charts,\n FusionTheme\n)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n FusionChartsModule\n ],\n providers: [\n ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule {\n}\n",template:'\x3c!-- Chart Component --\x3e\n