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 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.
Basically, in today’s world, the way of representing data is one of the key issues for the success of the products or any applications. Now, it is important to represent the data graphically like charts in the application. In this article, we will discuss how to create a column chart in AngularJS 2.0. Since we already know that Angular 2 does not have any API support for developing any chart type components, we need to implement a third party library with Angular 2 for developing the chart type components.
For this, we will use amCharts chart library. amCharts API’s functionalities enable us to pass parameters and set up its internals through the chart’s rendering engine. In a way, amCharts is kind of like a black box that gives us flexibility in terms of set up (though we cannot directly access the way it renders the chart). Since it is a third party utility and it is basically is a JavaScript library, we need to first install the amCharts plugin by using nuGet package. Before installing amChart plugin, we need to install typing from nuGet package. For this, open the current project location from command prompt and run the below command –
Now, run the amCharts installation plugins from nuGet packages.
- npm install amcharts/amcharts3
Now, add the below code -
amcharts.ts
This file mainly contains the main class library for the amcharts
-
-
-
-
-
-
- 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;
- }
- }
chart.components.ts
- import { Component, Input, Output, EventEmitter, NgModule } from "@angular/core";
-
- @Component({
- moduleId: module.id,
- selector: 'column-chart',
- templateUrl: 'charts.component.html'
-
- })
- export class ChartComponent {
- private graph: Array<any> = [];
- private chart: any;
- private fillColors = ['#1ab394', '#f8ac59', '#e355e8', '#0D8ECF', '#2A0CD0', '#CD0D74', '#CC0000', '#00CC00', '#0000CC', '#DDDDDD', '#999999', '#333333', '#990000'];
- private textColors = ['#000000', '#0106fc', '#e8c322', '#efdede', '#d0500c', '#CD0D74', '#CC0000', '#00CC00', '#0000CC', '#DDDDDD', '#999999', '#333333', '#990000'];
- @Input() private graphNo: any;
- @Input() private graphType: any;
- @Input() private controlId: string;
- @Input() private categoryField: string;
- @Input() private title: Array<any> = [];
- @Input() private valueField: Array<any> = [];
- @Input() private newStackNo: any;
- @Input() private caption: string = ''
- @Input() private rotate: boolean
- @Input("source") private _source: Array<any> = [];
-
- @Output() onError: EventEmitter<any> = new EventEmitter<any>();
-
- constructor() {
- }
-
- ngOnInit() {
- debugger;
- let self = this;
- this.InitializeData();
- }
-
- InitializeData(): void {
- if (AmCharts.isReady) {
- let self = this;
- this.createChart();
- }
- }
-
- private createChart(): void {
- let self = this;
- this.chart = new AmCharts.AmSerialChart();
- this.chart.dataProvider = self._source;
- this.chart.categoryField = self.categoryField;
- this.chart.plotAreaBorderAlpha = 0;
- this.chart.rotate = self.rotate;
- this.chart.columnWidth = 0.5;
-
-
- var categoryAxis = this.chart.categoryAxis;
- categoryAxis.fillColor = "#FAFAFA";
- categoryAxis.fillAlpha = 0;
- categoryAxis.gridColor = "#000000";
- categoryAxis.gridAlpha = 0;
- categoryAxis.axisColor = "#f1f1f1";
- categoryAxis.axisAlpha = 1;
- categoryAxis.gridPosition = "start";
- categoryAxis.color = " #959595";
- categoryAxis.fontSize = 9;
- categoryAxis.labelRotation = 30;
-
-
- var valueAxis = new AmCharts.ValueAxis();
- valueAxis.stackType = "regular";
- valueAxis.fillColor = "#FAFAFA";
- valueAxis.fillAlpha = 0;
- valueAxis.gridColor = "#000000";
- valueAxis.gridAlpha = 0;
- valueAxis.axisColor = "#f1f1f1";
- valueAxis.axisAlpha = 1;
- valueAxis.color = " #959595";
- valueAxis.fontSize = "9";
- this.chart.addValueAxis(valueAxis);
-
-
- for (let i = 0; i < 1; i++) {
- self.graph[i] = new AmCharts.AmGraph();
- self.graph[i].type = "column";
- self.graph[i].valueField = this.valueField[i];
- self.graph[i].title = this.title[i];
- self.graph[i].labelText = "[[value]]";
- if (i == self.newStackNo) {
- self.graph[i].newStack = true;
- }
- self.graph[i].balloonText = self.title[i] + " : [[title]]," + self.categoryField + " : [[category]], " + self.valueField[i] + " : [[value]]";
- self.graph[i].lineAlpha = 0;
- self.graph[i].fillAlphas = 1;
- self.graph[i].color = self.textColors[i];
- self.graph[i].fontSize = "8";
- self.graph[i].lineColor = self.fillColors[i];
- self.chart.addGraph(self.graph[i]);
- }
-
-
- var legend = new AmCharts.AmLegend();
- legend.position = "bottom";
- legend.equalWidths = false;
- legend.markerSize = 6;
- legend.marginBottom = 0;
- legend.useMarkerColorForLabels = true;
- legend.equalWidths = false;
- this.chart.addLegend(legend);
-
-
- this.chart.write(this.controlId);
- }
- }
charts.component.html
- <div>
- <h2 >{{caption}}</h2>
- <div id={{controlId}} style="width:50%; height:600px;"></div>
- </div>
app.component.homepage.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 = [
- {
- "country": "USA",
- "visits": 4025
- },
- {
- "country": "China",
- "visits": 1882
- },
- {
- "country": "Japan",
- "visits": 1809
- },
- {
- "country": "Germany",
- "visits": 1322
- },
- {
- "country": "UK",
- "visits": 1122
- },
- {
- "country": "France",
- "visits": 1114
- },
- {
- "country": "India",
- "visits": 984
- }
- ];
- }
-
-
- }
app.components.homepage.html
- <div>
- <h3>Column Chart</h3>
- <column-chart [controlId]="'chart1CtrlId'" [categoryField]="'country'" [valueField]="'visits'"
- [title]="'Country Visits'" [source]="data" #char1></column-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 { ChartComponent} from './src/chart.component';
- import { HomePageComponent } from './src/app.component.homepage';
-
- @NgModule({
- imports: [BrowserModule, ReactiveFormsModule],
- declarations: [HomePageComponent, ChartComponent],
- 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 shown below.