In this Angular 2.0 article series, we have already discussed about different types of basic and advanced concepts or features of AngularJs 2.0 like data binding, directives, pipes, service, route, http modules, change detection, state management, lazy loading of the modules, Localization etc. Now in this article, we will discuss about how to implement chart objects in Angular 2.0. In case you have not had a look at the previous articles of this series, go through the links mentioned below.
Now, in this article, we will demonstrate how to create Pie Chart type in AngularJS 2.0 using AmCharts JavaScript Library. For doing this, add the below mentioned file
amcharts.ts
-
-
-
-
-
-
- declare namespace AmCharts {
-
-
- var baseHref: boolean;
-
-
- var dayNames: string[];
-
-
- var monthNames: string[];
-
-
- var shortDayNames: string[];
-
-
- var shortMonthNames: string[];
-
-
- var useUTC: boolean;
-
-
- var themes: any;
-
-
- var readyChart: any;
- var isReady: any;
-
-
- function clear(): void;
-
-
- function ready(f: Function): void;
-
-
- function makeChart(selector: string, params: any, delay?: number): AmChart;
-
-
-
-
-
-
-
-
-
- function addInitHandler(handler: Function, types: string[]): any;
-
-
-
-
-
-
-
-
-
-
- class AmPieChart extends AmChart {
-
- alphaField: string;
-
- angle: number;
-
- balloonText: string;
-
- chartData: any[];
-
- colorField: string;
-
- colors: any[];
-
- depth3D: number;
-
- descriptionField: string;
-
- gradientRatio: number[];
-
-
-
- groupedAlpha: number;
-
- groupedColor: string;
-
- groupedDescription: string;
-
- groupedPulled: boolean;
-
- groupedTitle: string;
-
- groupPercent: number;
-
- hideLabelsPercent: number;
-
-
-
- hoverAlpha: number;
-
- innerRadius: any;
-
-
-
- labelRadius: number;
-
- labelRadiusField: string;
-
-
-
- labelsEnabled: boolean;
-
- labelText: string;
-
- labelTickAlpha: number;
-
- labelTickColor: string;
-
-
-
- marginBottom: number;
-
- marginLeft: number;
-
- marginRight: number;
-
-
-
- marginTop: number;
-
-
-
- minRadius: number;
-
- outlineAlpha: number;
-
- outlineColor: string;
-
-
-
- outlineThickness: number;
-
-
-
- pieAlpha: number;
-
- pieBaseColor: string;
-
-
- pieBrightnessStep: number;
-
- pieX: any;
-
- pieY: any;
-
- pulledField: string;
-
-
-
- pullOutDuration: number;
-
- pullOutEffect: string;
-
- pullOutOnlyOne: boolean;
-
- pullOutRadius: any;
-
- radius: any;
-
- sequencedAnimation: boolean;
-
-
-
- startAlpha: number;
-
-
-
- startAngle: number;
-
-
-
- startDuration: number;
-
- startEffect: string;
-
-
-
- startRadius: any;
-
- titleField: string;
-
- urlField: string;
-
- urlTarget: string;
-
- valueField: string;
-
- visibleInLegendField: string;
-
-
- animateAgain(): void;
-
- clickSlice(index: number): void;
-
- hideSlice(index: number): void;
-
- rollOutSlice(index: number): void;
-
- rollOverSlice(index: number): void;
-
- showSlice(index: number): void;
-
-
-
-
-
-
-
-
-
-
- addListener(type: string, handler: (e: {
- type: string; dataItem: Slice; chart: AmChart;
- }) => void): void;
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- class AmRadarChart extends AmCoordinateChart {
-
- marginBottom: number;
-
- marginLeft: number;
-
- marginRight: number;
-
- marginTop: number;
-
- radius: any;
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- class AmXYChart extends AmRectangularChart {
-
- hideXScrollbar: boolean;
-
- hideYScrollbar: boolean;
-
-
-
- maxZoomFactor: number;
-
- zoomOut(): void;
- }
-
-
-
- class Guide {
-
- above: boolean;
-
- angle: number;
-
- balloonColor: string;
-
- balloonText: string;
-
- boldLabel: boolean;
-
- category: string;
-
- dashLength: number;
-
- date: Date;
-
- expand: boolean;
-
- fillAlpha: number;
-
- fillColor: string;
-
- fontSize: string;
-
- id: string;
-
- inside: boolean;
-
- label: string;
-
- labelRotation: number;
-
- lineAlpha: number;
-
- lineColor: string;
-
- lineThickness: number;
-
- position: string;
-
- tickLength: number;
-
- toAngle: number;
-
- toCategory: string;
-
- toDate: Date;
-
- toValue: number;
-
- value: number;
-
- valueAxis: ValueAxis;
- }
-
- class ImagesSettings {
-
-
-
- alpha: number;
-
- balloonText: string;
-
-
-
- centered: boolean;
-
- color: string;
-
- descriptionWindowHeight: number;
-
-
-
- descriptionWindowWidth: number;
-
- descriptionWindowX: number;
-
- descriptionWindowY: number;
-
- labelColor: string;
-
-
-
- labelfontSize: string;
-
- labelPosition: string;
-
- labelRollOverColor: string;
-
- outlineAlpha: number;
-
- outlineColor: string;
-
-
-
- outlineThickness: number;
-
- rollOverColor: string;
-
-
-
- rollOverScale: number;
-
-
-
- selectedScale: number;
- }
-
-
- class AreasSettings {
-
-
-
- alpha: number;
-
- autoZoom: boolean;
-
- balloonText: string;
-
- color: string;
-
- colorSolid: string;
-
- descriptionWindowHeight: number;
-
-
-
- descriptionWindowWidth: number;
-
- descriptionWindowX: number;
-
- descriptionWindowY: number;
-
-
-
- outlineAlpha: number;
-
- outlineColor: string;
-
- outlineThickness: number;
-
- rollOverColor: string;
-
- rollOverOutlineColor: string;
-
- selectedColor: string;
-
-
-
- unlistedAreasAlpha: number;
-
- unlistedAreasColor: string;
-
-
-
- unlistedAreasOutlineAlpha: number;
-
- unlistedAreasOutlineColor: string;
- }
-
-
- class Slice {
-
- alpha: number;
-
- color: string;
-
- dataContext: Object;
-
- description: string;
-
- hidden: boolean;
-
- percents: number;
-
- pulled: boolean;
-
- title: string;
-
- url: string;
-
- value: number;
-
- visibleInLegend: boolean;
- }
-
-
-
- class AmStockChart {
-
- animationPlayed: boolean;
-
- balloon: AmBalloon;
-
- categoryAxesSettings: CategoryAxesSettings;
-
- chartCreated: boolean;
-
- chartCursorSettings: ChartCursorSettings;
-
- chartScrollbarSettings: ChartScrollbarSettings;
-
- colors: any[];
-
- comparedDataSets: any[];
-
- dataSets: any[];
-
- dataSetSelector: DataSetSelector;
-
- endDate: Date;
-
-
- firstDayOfWeek: number;
-
- glueToTheEnd: boolean;
-
- legendSettings: LegendSettings;
-
- mainDataSet: DataSet;
-
- panels: any[];
-
- panelsSettings: PanelsSettings;
-
- periodSelector: PeriodSelector;
-
- scrollbarChart: AmSerialChart;
-
- startDate: Date;
-
- stockEventsSettings: any;
-
- valueAxesSettings: ValueAxesSettings;
-
- version: string;
-
- zoomOutOnDataSetChange: boolean;
-
-
- addPanel(panel: StockPanel): void;
-
- addPanelAt(panel: StockPanel, index: number): void;
-
- clear(): void;
-
- hideStockEvents(): void;
-
- removeListener(obj: any, type: string, handler: any): void;
-
- removePanel(panel: StockPanel): void;
-
- showStockEvents(): void;
-
- validateData(): void;
-
- validateNow(): void;
-
- zoom(startDate: Date, endDate: Date): void;
-
- zoomOut(): void;
-
-
-
-
-
-
-
-
- addListener(type: string, handler: (e: {
-
- type: string;
- chart: AmStockChart;
- }) => void): void;
-
-
-
-
-
-
-
-
-
- addListener(type: string, handler: (e: {
-
- type: string;
- eventObject: any;
- graph: AmGraph;
- date: Date;
- chart: AmStockChart;
- }) => void): void;
-
-
-
-
- addListener(type: string, handler: (e: {
-
- type: string;
- startDate: Date;
- endDate: Date;
- period: string;
- chart: AmStockChart;
- }) => void): void;
-
-
-
-
- addListener(type: string, handler: (e: {
-
-
- type: string;
- panel: StockPanel;
- chart: AmStockChart;
- }) => void): void;
-
-
- removeListener(chart: AmChart, type: string, handler: any): void;
- }
-
-
- class ValueAxesSettings {
-
-
-
- autoGridCount: boolean;
-
- axisAlpha: number;
-
- axisColor: string;
-
- axisThickness: number;
-
- color: string;
-
- dashLength: number;
-
- fillAlpha: number;
-
- fillColor: string;
-
- gridAlpha: number;
-
- gridColor: string;
-
- gridCount: number;
-
- gridThickness: number;
-
- includeGuidesInMinMax: boolean;
-
- includeHidden: boolean;
-
-
-
- inside: boolean;
-
- integersOnly: boolean;
-
- labelFrequency: number;
-
- labelsEnabled: boolean;
-
- logarithmic: boolean;
-
- offset: number;
-
- position: string;
-
- reversed: boolean;
-
- showFirstLabel: boolean;
-
- showLastLabel: boolean;
-
- stackType: string;
-
- tickLength: number;
-
- unit: string;
-
- unitPosition: string;
-
- }
-
-
-
-
-
-
-
-
- class AmLegend {
-
-
- align: string;
-
-
-
- autoMargins: boolean;
-
- backgroundAlpha: number;
-
- backgroundColor: string;
-
- borderAlpha: number;
-
- borderColor: string;
-
- bottom: number;
-
- color: string;
-
- data: any[];
-
-
-
- equalWidths: boolean;
-
- fontSize: string;
-
- horizontalGap: number;
-
- labelText: string;
-
- left: number;
-
- marginBottom: number;
-
-
-
- marginLeft: number;
-
-
-
- marginRight: number;
-
- marginTop: number;
-
- markerBorderAlpha: number;
-
- markerBorderColor: string;
-
-
-
- markerBorderThickness: number;
-
- markerDisabledColor: string;
-
-
-
- markerLabelGap: number;
-
-
-
- markerSize: number;
-
- markerType: string;
-
- maxColumns: number;
-
- position: string;
-
- reversedOrder: boolean;
-
- right: number;
-
- rollOverColor: string;
-
-
-
- rollOverGraphAlpha: number;
-
-
-
- showEntries: boolean;
-
-
-
- spacing: number;
-
-
-
- switchable: boolean;
-
- switchColor: string;
-
- switchType: string;
-
- textClickEnabled: boolean;
-
- top: number;
-
-
-
- useGraphSettings: boolean;
-
- useMarkerColorForLabels: boolean;
-
- valueAlign: string;
-
- valueText: string;
-
-
-
- valueWidth: number;
-
- verticalGap: number;
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- addListener(type: string, handler: (e: {
- type: string; dataItem: Object; chart: AmChart;
- }) => void): void;
-
-
- removeListener(chart: AmChart, type: string, handler: any): void;
- }
-
-
-
- class StockLegend extends AmLegend {
-
-
- valueTextComparing: string;
-
-
- valueTextRegular: string;
- }
-
-
-
- class StockPanel extends AmSerialChart {
-
- allowTurningOff: boolean;
-
- drawingIconsEnabled: boolean;
-
- drawOnAxis: ValueAxis;
-
- eraseAll: boolean;
-
-
-
- iconSize: number;
-
- percentHeight: number;
-
- recalculateToPercents: string;
-
-
-
- showCategoryAxis: boolean;
-
- stockGraphs: StockGraph[];
-
- stockLegend: StockLegend;
-
- title: string;
-
-
-
- trendLineAlpha: number;
-
- trendLineColor: string;
-
- trendLineDashLength: number;
-
-
-
- trendLineThickness: number;
-
- addStockGraph(graph: StockGraph): void;
-
- removeStockGraph(graph: StockGraph): void;
- }
-
-
- class AmChart {
-
- constructor(theme?: any);
-
- addClassNames: boolean;
-
-
- allLabels: Label[];
-
- autoResize: boolean;
-
- backgroundAlpha: number;
-
- backgroundColor: string;
-
- balloon: AmBalloon;
-
- borderAlpha: number;
-
- borderColor: string;
-
- classNamePrefix: string;
-
- color: string;
-
-
-
- creditsPosition: string;
-
- dataProvider: any[];
-
-
- decimalSeparator: string;
-
- defs: any;
-
- export: ExportSettings;
-
- fontFamily: string;
-
-
-
- fontSize: string;
-
-
-
- handDrawn: boolean;
-
-
-
- handDrawScatter: number;
-
-
-
- handDrawThickness: number;
-
-
-
- hideBalloonTime: number;
-
- legend: AmLegend;
-
- legendDiv: HTMLElement;
-
- listerns: Object[];
-
- panEventsEnabled: boolean;
-
-
-
-
-
- path: string;
-
-
- pathToImages: string;
-
-
-
- percentPrecision: number;
-
-
- precision: number;
-
- prefixesOfBigNumbers: any[];
-
- prefixesOfSmallNumbers: any[];
-
- theme: string;
-
-
-
- thousandsSeparator: string;
-
- titles: Title[];
-
- type: string;
-
- usePrefixes: boolean;
-
- version: string;
-
-
-
-
-
-
-
-
-
-
-
-
-
- addLabel(x: number | string, y: number | string, text: string, align: string, size?: number, color?: string, rotation?: number, alpha?: number, bold?: boolean, url?: string): any;
-
-
-
-
-
-
- addLegend(legend: AmLegend, legendDivId?: string): void;
-
-
-
-
-
-
- addLegend(legend: AmLegend, legendDiv: HTMLElement): void;
-
-
- addTitle(text: string, size: number, color: string, alpha: number, bold: boolean): void;
-
- clear(): void;
-
- clearLabels(): void;
-
- invalidateSize(): void;
-
- removeLegend(): void;
-
- validateData(): void;
-
- validateNow(): void;
-
-
-
- write(container: HTMLElement): void;
-
-
- write(container: string): void;
-
-
-
-
-
-
-
-
-
- addListener(type: string, handler: (e: {
-
- type: string;
- chart: AmChart;
- }) => void): void;
-
- removeListener(chart: AmChart, type: string, handler: any): void;
- }
-
-
-
- class AmCoordinateChart extends AmChart {
-
- chartData: Object[];
-
-
-
- colors: string[];
-
-
-
- graphs: AmGraph[];
-
-
-
- gridAboveGraphs: boolean;
-
- guides: Guide[];
-
-
-
- sequencedAnimation: boolean;
-
-
-
-
-
- startAlpha: number;
-
- startDuration: number;
-
-
-
-
- startEffect: string;
-
-
-
- urlTarget: any;
-
-
-
-
- valueAxes: any[];
-
-
- addGraph(graph: AmGraph): void;
-
-
-
-
- addValueAxis(axis: ValueAxis): void;
-
- animateAgain(): void;
-
-
- getGraphById(graphId: string): AmGraph;
-
-
- getValueAxisById(axisId: string): ValueAxis;
-
-
-
- hideGraph(graph: AmGraph): void;
-
-
- hideGraphsBalloon(graph: AmGraph): void;
-
-
- highlightGraph(graph: AmGraph): void;
-
-
- removeGraph(graph: AmGraph): void;
-
-
- removeValueAxis(axis: ValueAxis): void;
-
-
- showGraph(graph: AmGraph): void;
-
-
- showGraphsBalloon(graph: AmGraph): void;
-
-
- unhighlightGraph(graph: AmGraph): void;
-
-
-
-
- addListener(type: string, handler: (e: {
-
- type: string;
- graph: AmGraph;
- item: GraphDataItem;
- index: number;
- chart: AmChart;
- }) => void): void;
- }
-
-
- class GraphDataItem {
-
- alpha: number;
-
- bullet: string;
-
- bulletSize: number;
-
- category: string;
-
- color: string;
-
- customBullet: string;
-
- dataContext: Object;
-
- description: string;
-
- fillColors: any[];
-
- percents: Object;
-
- serialDataItem: SerialDataItem;
-
- url: string;
-
- values: Object;
-
- x: number;
-
- y: number;
- }
-
-
- class SerialDataItem {
-
-
- axes: Object;
-
-
- category: any;
-
-
- time: number;
-
-
- x: number;
- }
-
- class CategoryAxis extends AxisBase {
-
-
-
-
- boldPeriodBeginning: boolean;
-
-
- dateFormats: any[];
-
-
- equalSpacing: boolean;
-
-
-
-
-
- forceShowField: string;
-
-
- gridPosition: string;
-
-
-
-
- minorGridEnabled: boolean;
-
-
- minPeriod: string;
-
-
- parseDates: boolean;
-
-
- startOnAxis: boolean;
-
-
-
-
- twoLineMode: boolean;
-
-
-
- useLineColorForBulletBorder: boolean;
-
- categoryToCoordinate(category: string): void;
-
-
- coordinateToDate(coordinate: number): void;
-
-
- dateToCoordinate(date: Date): void;
-
-
- xToIndex(x: number): void;
- }
-
-
-
-
-
-
-
- class ChartScrollbar {
-
- autoGridCount: boolean;
-
-
-
- backgroundAlpha: number;
-
-
-
- backgroundColor: string;
-
- categoryAxis: CategoryAxis;
-
- color: string;
-
- graph: AmGraph;
-
- graphFillAlpha: number;
-
- graphFillColor: string;
-
- graphLineAlpha: number;
-
- graphLineColor: string;
-
- graphType: string;
-
- gridAlpha: number;
-
- gridColor: string;
-
- gridCount: number;
-
- hideResizeGrips: boolean;
-
-
-
- resizeEnabled: boolean;
-
- scrollbarHeight: number;
-
-
-
- scrollDuration: number;
-
-
-
- selectedBackgroundAlpha: number;
-
- selectedBackgroundColor: string;
-
- selectedGraphFillAlpha: number;
-
- selectedGraphFillColor: string;
-
- selectedGraphLineAlpha: number;
-
- selectedGraphLineColor: string;
-
- updateOnReleaseOnly: boolean;
- }
-
-
- class AmRectangularChart extends AmCoordinateChart {
-
-
-
- angle: number;
-
-
-
- autoMarginOffset: number;
-
-
-
- autoMargins: boolean;
-
- chartCursor: ChartCursor;
-
- chartScrollbar: ChartScrollbar;
-
-
- depth3D: number;
-
-
-
- marginBottom: number;
-
-
-
- marginLeft: number;
-
-
-
- marginRight: number;
-
-
-
- marginsUpdated: boolean;
-
-
-
- marginTop: number;
-
-
-
- plotAreaBorderAlpha: number;
-
-
- plotAreaBorderColor: string;
-
-
-
- plotAreaFillAlphas: number;
-
-
-
- plotAreaFillColors: any;
-
-
-
- plotAreaGradientAngle: number;
-
- trendLines: TrendLine[];
-
-
-
- zoomOutButtonAlpha: number;
-
-
-
- zoomOutButtonColor: string;
-
-
-
- zoomOutButtonImage: string;
-
-
-
- zoomOutButtonImageSize: number;
-
-
-
- zoomOutButtonPadding: number;
-
-
-
- zoomOutButtonRollOverAlpha: number;
-
- zoomOutText: string;
-
-
- addChartCursor(cursor: ChartCursor): void;
-
- addChartScrollbar(scrollbar: ChartScrollbar): void;
-
-
- addTrendLine(trendLine: TrendLine): void;
-
- removeChartCursor(): void;
-
- removeChartScrollbar(): void;
-
-
- removeTrendLine(trendLine: TrendLine): void;
- }
-
-
-
-
-
-
-
-
-
-
-
- class TrendLine {
-
- }
-
-
-
-
-
-
-
- class ChartCursor {
-
- bulletsEnabled: boolean;
-
-
-
- bulletSize: number;
-
-
-
- categoryBalloonAlpha: number;
-
- categoryBalloonColor: string;
-
- categoryBalloonDateFormat: string;
-
-
-
- categoryBalloonEnabled: boolean;
-
- color: string;
-
- cursorAlpha: number;
-
- cursorColor: string;
-
- cursorPosition: string;
-
-
-
- enabled: boolean;
-
-
-
- fullWidth: boolean;
-
- oneBalloonOnly: boolean;
-
- pan: boolean;
-
- selectionAlpha: number;
-
- selectWithoutZooming: boolean;
-
-
-
- valueBalloonsEnabled: boolean;
-
-
-
- zoomable: boolean;
-
- zooming: boolean;
-
-
-
- hideCursor(): void;
-
- showCursorAt(category: string): void;
-
-
-
- addListener(type: string, handler: (e: {
- type: string; index: number; zooming: boolean; mostCloseGraph: AmGraph; chart: AmChart;
- }) => void): void;
-
-
-
- addListener(type: string, handler: (e: {
- type: string; chart: AmChart;
- }) => void): void;
-
-
-
-
-
-
- addListener(type: string, handler: (e: {
- type: string; index: number; zooming: boolean; chart: AmChart;
- }) => void): void;
-
-
- removeListener(chart: AmChart, type: string, handler: any): void;
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- class AmSerialChart extends AmRectangularChart {
-
-
-
- balloonDateFormat: string;
-
- categoryAxis: CategoryAxis;
-
- categoryField: string;
-
-
-
- columnSpacing: number;
-
-
-
- columnSpacing3D: number;
-
-
-
- columnWidth: number;
-
- endDate: Date;
-
- endIndex: number;
-
- maxSelectedSeries: number;
-
- maxSelectedTime: number;
-
-
-
- minSelectedTime: number;
-
- mouseWheelScrollEnabled: boolean;
-
- mouseWheelZoomEnabled: boolean;
-
- rotate: boolean;
-
- startDate: Date;
-
- startIndex: number;
-
-
-
- zoomOutOnDataUpdate: boolean;
-
-
- getCategoryIndexByValue(value: number): void;
-
- zoomOut(): void;
-
- zoomToCategoryValues(start: Date, end: Date): void;
-
- zoomToDates(start: Date, end: Date): void;
-
- zoomToIndexes(start: Date, end: Date): void;
- }
-
- class PeriodSelector {
-
- dateFormat: string;
-
- fromText: string;
-
-
-
- hideOutOfScopePeriods: boolean;
-
-
-
- inputFieldsEnabled: boolean;
-
-
-
- inputFieldWidth: number;
-
- periods: any[];
-
- periodsText: string;
-
- position: string;
-
- selectFromStart: boolean;
-
- toText: string;
-
-
-
- width: number;
-
-
-
-
-
- addListener(type: string, handler: (e: {
-
-
- type: string;
- startDate: Date;
- endDate: Date;
- predefinedPeriod: string;
- count: number;
- }) => void): void;
-
-
- removeListener(chart: AmChart, type: string, handler: any): void;
- }
-
-
-
- class PanelsSettings {
-
- angle: number;
-
- backgroundAlpha: number;
-
- backgroundColor: string;
-
- columnSpacing: number;
-
- columnWidth: number;
-
- depth3D: number;
-
- fontFamily: string;
-
- fontSize: string;
-
-
-
- marginBottom: number;
-
- marginLeft: number;
-
- marginRight: number;
-
- marginTop: number;
-
-
-
- panelSpacing: number;
-
- panEventsEnabled: boolean;
-
- plotAreaBorderAlpha: number;
-
- plotAreaBorderColor: string;
-
- plotAreaFillAlphas: number;
-
- plotAreaFillColors: any;
-
- prefixesOfBigNumbers: any[];
-
- prefixesOfSmallNumbers: any[];
-
- sequencedAnimation: boolean;
-
- startAlpha: number;
-
- startDuration: number;
-
- startEffect: string;
-
- usePrefixes: boolean;
- }
-
-
-
- class DataSet {
-
- categoryField: string;
-
- color: string;
-
- compared: boolean;
-
- dataProvider: any[];
-
- fieldMappings: any[];
-
-
-
- showInCompare: boolean;
-
-
-
- showInSelect: boolean;
-
- stockEvents: StockEvent[];
-
- title: string;
- }
-
- class StockGraph extends AmGraph {
-
- comparable: boolean;
-
- compareField: string;
-
- compareGraphBalloonColor: string;
-
- compareGraphBalloonText: string;
-
- compareGraphBullet: string;
-
- compareGraphBulletSize: number;
-
- compareGraphCornerRadiusTop: number;
-
- compareGraphDashLength: number;
-
- compareGraphFillAlphas: number;
-
- compareGraphFillColors: string;
-
- compareGraphLineAlpha: number;
-
- compareGraphLineThickness: number;
-
- compareGraphType: string;
-
-
-
- compareGraphVisibleInLegend: boolean;
-
- periodValue: string;
-
-
-
- useDataSetColors: boolean;
- }
-
-
- class StockEvent {
-
-
-
- backgroundAlpha: number;
-
- backgroundColor: string;
-
-
-
- borderAlpha: number;
-
- borderColor: string;
-
- color: string;
-
- date: Date;
-
- graph: StockGraph;
-
- rollOverColor: string;
-
- showOnAxis: boolean;
-
- text: string;
-
- type: string;
-
- url: string;
-
- urlTarget: string;
- }
-
-
- class Label {
-
- align: string;
-
- alpha: number;
-
- bold: boolean;
-
- color: string;
-
- id: string;
-
- rotation: number;
-
- size: number;
-
- text: string;
-
- url: string;
-
- x: number | string;
-
- y: number | string;
- }
-
- class LegendSettings {
-
- align: string;
-
- equalWidths: boolean;
-
- horizontalGap: number;
-
- labelText: string;
-
- marginBottom: number;
-
- marginTop: number;
-
- markerBorderAlpha: number;
-
- markerBorderColor: string;
-
- markerBorderThickness: number;
-
- markerDisabledColor: string;
-
- markerLabelGap: number;
-
- markerSize: number;
-
- markerType: string;
-
- reversedOrder: boolean;
-
- rollOverColor: string;
-
- rollOverGraphAlpha: number;
-
- switchable: boolean;
-
- switchColor: string;
-
- switchType: string;
-
- textClickEnabled: boolean;
-
- useMarkerColorForLabels: boolean;
-
- valueTextComparing: string;
-
- valueTextRegular: string;
-
- valueWidth: number;
-
- verticalGap: number;
-
- }
-
-
- class DataSetSelector {
-
- comboBoxSelectText: string;
-
- compareText: string;
-
-
-
- listHeight: number;
-
- position: string;
-
- selectText: string;
-
-
-
- width: number;
- }
-
-
-
-
-
-
-
-
-
-
-
-
- class AmBalloon {
-
- adjustBorderColor: boolean;
-
-
-
- borderAlpha: number;
-
- borderColor: string;
-
-
-
- borderThickness: number;
-
- color: string;
-
-
-
- cornerRadius: number;
-
-
-
- fillAlpha: number;
-
- fillColor: string;
-
- fontSize: string;
-
-
-
- horizontalPadding: number;
-
-
-
- pointerWidth: number;
-
- showBullet: boolean;
-
- textAlign: string;
-
- textShadowColor: string;
-
-
-
- verticalPadding: number;
-
- hide(): void;
-
- setBounds(left: number, top: number, right: number, bottom: number): void;
-
- setPosition(x: number, y: number): void;
-
- show(value: string): void;
- }
-
-
- class CategoryAxesSettings {
-
-
-
- autoGridCount: boolean;
-
- axisAlpha: number;
-
- axisColor: string;
-
-
-
- axisHeight: number;
-
- axisThickness: number;
-
- color: string;
-
- dashLength: number;
-
- dateFormats: any[];
-
- equalSpacing: boolean;
-
- fillAlpha: number;
-
- fillColor: string;
-
- fontSize: string;
-
- gridAlpha: number;
-
- gridColor: string;
-
-
-
- gridCount: number;
-
- gridThickness: number;
-
- groupToPeriods: any[];
-
- inside: boolean;
-
- labelRotation: number;
-
-
-
- maxSeries: number;
-
- minPeriod: string;
-
- position: string;
-
- startOnAxis: boolean;
-
- tickLength: number;
- }
-
-
- class ChartCursorSettings {
-
- bulletsEnabled: boolean;
-
- bulletSize: number;
-
- categoryBalloonAlpha: number;
-
- categoryBalloonColor: string;
-
- categoryBalloonDateFormats: any[];
-
- categoryBalloonEnabled: boolean;
-
- cursorAlpha: number;
-
- cursorColor: string;
-
- cursorPosition: string;
-
-
-
- enabled: boolean;
-
- pan: boolean;
-
- valueBalloonsEnabled: boolean;
-
- zoomable: boolean;
- }
-
-
- class ChartScrollbarSettings {
-
-
-
- autoGridCount: boolean;
-
- backgroundAlpha: number;
-
- backgroundColor: string;
-
- color: string;
-
-
-
- enabled: boolean;
-
- fontSize: string;
-
- graph: AmGraph;
-
- graphFillAlpha: number;
-
- graphFillColor: string;
-
- graphLineAlpha: number;
-
- graphLineColor: string;
-
- graphType: string;
-
- gridAlpha: number;
-
- gridColor: string;
-
- gridCount: number;
-
-
-
- height: number;
-
- hideResizeGrips: boolean;
-
- scrollDuration: number;
-
- selectedBackgroundAlpha: number;
-
- selectedBackgroundColor: string;
-
- selectedGraphFillAlpha: number;
-
- selectedGraphFillColor: string;
-
- selectedGraphLineAlpha: number;
-
- selectedGraphLineColor: string;
-
-
-
- updateOnReleaseOnly: boolean;
- }
-
-
-
-
-
-
-
-
-
-
- class AmGraph {
-
- alphaField: string;
-
- balloonColor: string;
-
- balloonFunction(graphDataItem: GraphDataItem, amGraph: AmGraph): string;
-
- balloonText: string;
-
- behindColumns: boolean;
-
- bullet: string;
-
-
-
- bulletAlpha: number;
-
-
-
- bulletBorderAlpha: number;
-
- bulletBorderColor: string;
-
-
-
- bulletBorderThickness: number;
-
- bulletColor: string;
-
- bulletField: string;
-
- bulletOffset: number;
-
-
-
- bulletSize: number;
-
- bulletSizeField: string;
-
- closeField: string;
-
- color: string;
-
- colorField: string;
-
-
-
- connect: boolean;
-
- cornerRadiusTop: number;
-
-
-
- cursorBulletAlpha: number;
-
- customBullet: string;
-
- customBulletField: string;
-
- dashLength: number;
-
- descriptionField: string;
-
- fillAlphas: number;
-
- fillColors: any;
-
- fillColorsField: string;
-
- fillToGraph: AmGraph;
-
- fontSize: string;
-
- gradientOrientation: string;
-
- hidden: boolean;
-
- hideBulletsCount: number;
-
- highField: string;
-
-
-
- includeInMinMax: boolean;
-
- labelColorField: string;
-
- labelPosition: string;
-
- labelText: string;
-
- legendAlpha: number;
-
- legendColor: string;
-
- legendValueText: string;
-
-
-
- lineAlpha: number;
-
- lineColor: string;
-
- lineColorField: string;
-
-
-
- lineThickness: number;
-
- lowField: string;
-
- markerType: string;
-
-
-
- maxBulletSize: number;
-
- minBulletSize: number;
-
- negativeBase: number;
-
- negativeFillAlphas: number;
-
- negativeFillColors: any;
-
- negativeLineColor: string;
-
- numberFormatter: Object;
-
- openField: string;
-
- precision: number;
-
- pointPosition: string;
-
- showAllValueLabels: boolean;
-
-
-
- showBalloon: boolean;
-
- showBalloonAt: string;
-
-
-
- stackable: boolean;
-
- title: string;
-
- type: string;
-
- urlField: string;
-
- urlTarget: string;
-
- valueAxis: ValueAxis;
-
- valueField: string;
-
-
-
- visibleInLegend: boolean;
-
- xAxis: ValueAxis;
-
- xField: string;
-
- yAxis: ValueAxis;
-
- yField: string;
- }
-
-
- class AxisBase {
-
-
-
- autoGridCount: boolean;
-
-
-
- axisAlpha: number;
-
- axisColor: string;
-
-
-
- axisThickness: number;
-
- color: string;
-
- dashLength: number;
-
- fillAlpha: number;
-
- fillColor: string;
-
- fontSize: string;
-
- gridAlpha: number;
-
- gridColor: string;
-
-
-
- gridCount: number;
-
-
-
- gridThickness: number;
-
- guides: any[];
-
- ignoreAxisWidth: boolean;
-
- inside: boolean;
-
-
-
- labelFrequency: number;
-
- labelRotation: number;
-
-
-
- labelsEnabled: boolean;
-
- offset: number;
-
- position: string;
-
-
-
- showFirstLabel: boolean;
-
-
-
- showLastLabel: boolean;
-
-
-
- tickLength: number;
-
- title: string;
-
-
-
- titleBold: boolean;
-
- titleColor: string;
-
- titlefontSize: string;
-
-
- addGuide(guide: Guide): void;
-
- removeGuide(guide: Guide): void;
- }
-
-
- class ValueAxis extends AxisBase {
-
- axisTitleOffset: number;
-
- baseCoord: number;
-
- baseValue: number;
-
- duration: string;
-
- durationUnits: Object;
-
- gridType: string;
-
- id: string;
-
- includeGuidesInMinMax: boolean;
-
- includeHidden: boolean;
-
- integersOnly: boolean;
-
-
-
-
-
-
-
- labelFunction(value: number, valueText: string, valueAxis: ValueAxis): string;
- labelFunction(valueText: string, data: Date, valueAxis: ValueAxis): string;
-
- logarithmic: boolean;
-
- max: number;
-
- maximum: number;
-
- maximumData: Date;
-
- min: number;
-
- minimum: number;
-
- minimumDate: Date;
-
- minMaxMultiplier: number;
-
- pointPosition: string;
-
- position: string;
-
- precision: number;
-
-
-
- radarCategoriesEnabled: boolean;
-
- recalculateToPercents: boolean;
-
- reversed: boolean;
-
- stackType: string;
-
- step: number;
-
- strictMinMax: boolean;
-
- synchronizationMultiplier: number;
-
- synchronizeWith: ValueAxis;
-
- totalText: string;
-
- totalTextColor: string;
-
- totalTextOffset: number;
-
- treatZeroAs: number;
-
- type: string;
-
- unit: string;
-
- unitPosition: string;
-
- usePrefixes: boolean;
-
- useScientificNotation: boolean;
-
-
- addGuide(guide: Guide): void;
-
- addListener(type: string, handler: any): void;
-
- coordinateToValue(coordinate: number): void;
-
- getCoordinate(value: number): void;
-
- removeGuide(guide: Guide): void;
-
- removeListener(obj: any, type: string, handler: any): void;
-
-
- synchronizeWithAxis(axis: ValueAxis): void;
-
- zoomToValues(startValue: number, endValue: number): void;
-
-
-
-
- addListener(type: string, handler: (e: {
-
- type: string; startValue: Date; endValue: Date; chart: AmChart;
- }) => void): void;
-
-
-
- addListener(type: string, handler: (e: {
-
- type: string; chart: AmChart;
- }) => void): void;
-
-
- removeListener(chart: AmChart, type: string, handler: any): void;
- }
-
- class Title {
-
- alpha: number;
-
-
- bold: boolean;
-
- color: string;
-
- id: string;
-
- size: number;
-
- text: string;
- }
- class ExportSettings {
- enabled: boolean;
- libs: Object;
- menu: Object;
- config: any;
- capture(config: any, callback: () => void): any;
- toJPG(config: any, callback: (config: any) => void): any;
- }
- }
piechart.ts
- import { Component, Input, Output, EventEmitter, NgModule } from "@angular/core";
-
- @Component({
- moduleId: module.id,
- selector: 'pie-Chart',
- templateUrl: 'pieChart.html'
-
- })
-
- export class PieChartComponent {
- private pieChart: any;
- @Input() private controlId: string;
- @Input() private titleField: string;
- @Input() private valueField: string;
- @Input() private caption: string = '';
- @Input() private apiUrl: string = '';
- @Input() private apiAction: string = '';
- @Input() private showLable: boolean;
- @Input("source") private _source: Array<any> = [];
- @Output() private onError: EventEmitter<any> = new EventEmitter<any>();
-
- constructor() {
- }
-
- ngOnInit() {
- this.InitializeData();
- }
-
- InitializeData(): void {
- if (AmCharts.isReady) {
- let self = this;
- this.createChart();
- }
- }
-
-
- private createChart(): void {
- let self = this;
- self.pieChart = new AmCharts.AmPieChart();
- self.pieChart.dataProvider = self._source;
- self.pieChart.titleField = self.titleField;
- self.pieChart.valueField = self.valueField;
- self.pieChart.colors = ['#FF6600', '#FCD202', '#B0DE09', '#0D8ECF', '#2A0CD0', '#CD0D74', '#CC0000', '#00CC00', '#0000CC', '#DDDDDD', '#999999', '#333333', '#990000'];
- self.pieChart.sequencedAnimation = true;
- self.pieChart.startEffect = "elastic";
- self.pieChart.labelRadius = 1;
- self.pieChart.balloonText = "[[title]]:[[value]]([[percents]]%)";
- self.pieChart.labelText = "[[title]]";
- self.pieChart.outlineColor = "#ffffff";
- self.pieChart.innerRadius = "0%";
- self.pieChart.outlineAlpha = 1;
- self.pieChart.labelsEnabled = self.showLable;
- self.pieChart.outlineThickness = 1;
-
-
- var legend = new AmCharts.AmLegend();
- legend.position = "bottom";
- legend.equalWidths = false;
- legend.markerSize = 6;
- legend.marginBottom = 0;
- legend.useMarkerColorForLabels = true;
- legend.equalWidths = false;
- self.pieChart.addLegend(legend);
-
-
- self.pieChart.write(self.controlId);
- }
-
- }
pieChart.html
- <div>
- <h2 >{{caption}}</h2>
- <div id={{controlId}} style="width:50%; height:600px;"></div>
- </div>
app.component.ts
- import { Component, OnInit, ViewChild } from '@angular/core';
- import { Http, Response } from '@angular/http';
- import * as Immutable from 'immutable';
-
- @Component({
- moduleId: module.id,
- selector: 'home-page',
- templateUrl: 'app.component.homepage.html'
- })
-
- export class HomePageComponent implements OnInit {
-
- private data: Array<any> = [];
-
- constructor() {
- }
-
- ngOnInit(): void {
- this.data = [
- { title: "IT", litres: 30 },
- { title: "Services", litres: 25 },
- { title: "FM", litres: 30 },
- { title: "Marketing", litres: 30 },
- { title: "Uncategorized", litres: 20 }];
- }
-
-
- }
app.component.html
- <div>
- <h3>Pie Chart</h3>
- <pie-chart [controlId]="'chart1CtrlId'" [categoryField]="'country'" [valueField]="'visits'"
- [title]="'Country Visits'" [source]="data" #char1></pie-chart>
- </div>
app.module.ts
- import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
- import { BrowserModule } from '@angular/platform-browser';
- import { ReactiveFormsModule } from "@angular/forms";
- import { PieChartComponent} from './src/chart.component';
- import { HomePageComponent } from './src/app.component.homepage';
-
- @NgModule({
- imports: [BrowserModule, ReactiveFormsModule],
- declarations: [HomePageComponent, PieChartComponent],
- bootstrap: [HomePageComponent]
- })
- export class AppModule { }
Index.html
- <!DOCTYPE html>
- <html>
- <head>
- <title>Angular2 - Column Chart </title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link href="../resources/style/bootstrap.css" rel="stylesheet" />
- <link href="../resources/style/style1.css" rel="stylesheet" />
- <!-- Polyfill(s) for older browsers -->
- <script src="../resources/js/jquery-2.1.1.js"></script>
- <script src="../resources/js/bootstrap.js"></script>
-
- <script src="../node_modules/core-js/client/shim.min.js"></script>
- <script src="../node_modules/zone.js/dist/zone.js"></script>
- <script src="../node_modules/reflect-metadata/Reflect.js"></script>
- <script src="../node_modules/systemjs/dist/system.src.js"></script>
- <script src="../systemjs.config.js"></script>
- <script src="js/amChart/amcharts.js"></script>
- <script src="js/amChart/funnel.js"></script>
- <script src="js/amChart/gantt.js"></script>
- <script src="js/amChart/gauge.js"></script>
- <script src="js/amChart/pie.js"></script>
- <script src="js/amChart/polarScatter.js"></script>
- <script src="js/amChart/radar.js"></script>
- <script src="js/amChart/serial.js"></script>
- <script src="js/amChart/xy.js"></script>
- <script>
- System.import('app').catch(function (err) { console.error(err); });
- </script>
- <!-- Set the base href, demo only! In your app: <base href="/"> -->
- <script>document.write('<base href="' + document.location + '" />');</script>
- </head>
- <body>
- <home-page>Loading</home-page>
- </body>
- </html>
Main.ts
- import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
- import { AppModule } from './app.module';
-
- const platform = platformBrowserDynamic();
- platform.bootstrapModule(AppModule);
Now, run the code. The output is given below.