Make Your Data Alive Using Angular5

Share On : [feather_share show="twitter, facebook,linkedin" hide="reddit, pinterest, google_plus, tumblr, mail"]

Nowadays technology is on its horizon and data is like gold. Before decades information was in the book and in this century it is on the internet. People nowadays prefer to get information from the internet rather than finding it in libraries. Most of the small businesses and also big industries publish their information on their website due to the globalization of business venture.

There are various type of data like organization’s profit – loss statement, Annual sales, Money collection, Revenue generation, Analytical reports; which can be represented by many ways using graphical representation. But, If we contemplate on real-time data analyzing, then the charts are the prominent option; as people nowadays, do not like to spend the time to read copious information. So, graphical representation via chart is preferable with such copious data as it is a painless effort and prompt to grasp. In order to achieve it, there are many technologies out there which can represent abundant information through charts. Among all the technologies I will prefer Angular 5.

Angular 5 is a superheroic framework that is beneficial to both developers and users.It is packed with some amazing features like robustness, faster minimal in size, reactive nature, faster & frequent real-time information change, dependency injections. All these features make it faster, lighter and easy to use. Using Angular 5 it becomes easy to represent information in many ways example we can build a dashboard for an organization using the chart in many different ways and that too, quickly.

In order to build such kind of charts in Angular, there are many choices in chart library like D3 chart, Highchart, AMCHARTS, NGX-Charts etc. It is very easy to build the dashboard using Angular 5 and Highchart/D3 charts. All we have to do is provide the bulk information to Angular 5 using API.

Let’s build a chart using Highcharts in Angular 5.

(we assume that there is already node install on your machine)

Step 1

Npm install -g @angular/cli
Ng create highchart-example
Cd highchart-example

Step 2: Install Highcharts

# install angular-highcharts and highcharts

 npm i --save angular-highcharts highcharts

# install highcharts typings

 npm i --save-dev @types/highcharts

Step 3: Run app hit following command in cmd in highchart-example

 Ng serve

Usage Example

// app.module.ts

import { ChartModule } from 'angular-highcharts';

@NgModule({
imports: [
ChartModule // add ChartModule to your imports
]
})
export class AppModule { }

//highchart.component.ts

import { Chart } from 'angular-highcharts';
 
@Component({
 template: '<div [chart]="chart"></div>'
})
export class HighChartComponent {
 chart = new Chart({
 chart: {
zoomType: 'x'
 },
title: {
 text: 'USD to EUR exchange rate over time'
 },
 subtitle: {
 text: document.ontouchstart === undefined ?
 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
 },
 xAxis: {
 type: 'datetime'
 },
 yAxis: {
 title: {
 text: 'Exchange rate
 }
 },
 legend: {
 enabled: false
 },
 plotOptions: {
 area: {
 fillColor: {
 linearGradient: {
 x1: 0,
 y1: 0,
 x2: 0,
 y2: 1
 },
 },
 marker: {
 radius: 2
 },
 lineWidth: 1,
 states: {
 hover: {
 lineWidth: 1
 }
 },
 threshold: null
 }
 },
 series: [{
 type: 'area',
 name: 'USD to EUR',
 data: Give Json data here to graph
 }]
 });
 }