AIMDek Technologies AIMDek Technologies AIMDek Technologies AIMDek Technologies
  • SERVICES
    • Enterprise Applications
      • Enterprise Portals
      • Web Application
      • E-Commerce Portal Development
    • Liferay
    • Integration Services
    • UX UI Design
    • Mobile App Development Service
    • Consulting Services
    • Migrations and Upgrades
    • QA & Testing
    • Cloud Infrastructure
  • SOLUTIONS
    • Healthcare IT
      • EHR Software
      • HMS Software
      • Patient Portal
      • Healthcare Mobility
    • Mobility Solutions
    • PLM Solutions
      • ARAS PLM
      • Oracle PLM
    • Robotic Process Automation
    • Portal Solutions
      • Intranet Solution
      • Partner Portal
      • Collaboration Portal
    • ECM Solution
    • ERP Solutions
  • PARTNERSHIP
    • Microsoft
    • Salesforce
  • RESOURCES
    • Blogs
    • Webinars
    • Case Studies
  • COMPANY
    • About Us
    • Industries
    • Our Infrastructure
    • Our culture
    • Careers
  • CONTACT US
AIMDek Technologies AIMDek Technologies
  • SERVICES
    • Enterprise Applications
      • Enterprise Portals
      • Web Application
      • E-Commerce Portal Development
    • Liferay
    • Integration Services
    • UX UI Design
    • Mobile App Development Service
    • Consulting Services
    • Migrations and Upgrades
    • QA & Testing
    • Cloud Infrastructure
  • SOLUTIONS
    • Healthcare IT
      • EHR Software
      • HMS Software
      • Patient Portal
      • Healthcare Mobility
    • Mobility Solutions
    • PLM Solutions
      • ARAS PLM
      • Oracle PLM
    • Robotic Process Automation
    • Portal Solutions
      • Intranet Solution
      • Partner Portal
      • Collaboration Portal
    • ECM Solution
    • ERP Solutions
  • PARTNERSHIP
    • Microsoft
    • Salesforce
  • RESOURCES
    • Blogs
    • Webinars
    • Case Studies
  • COMPANY
    • About Us
    • Industries
    • Our Infrastructure
    • Our culture
    • Careers
  • CONTACT US
Mar 08
Make Your Data Alive Using Angular5

Make Your Data Alive Using Angular5

  • 08/03/2018
  • Juhil Kamothi
Post Views: 590

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
 }]
 });
 }

The chart Preview for above example 

highchart preview

Related

Spread the love
    

Leave a reply

Your email address will not be published. Required fields are marked *

Subscribe for more interesting blogs


    AIMDek Logo
    canda flag icon

    CANADA
    ONTARIO

      +1 437-999-0755

    usa flag icon

    USA
    TEXAS

      +1 956-506-1010

    india flag logo

    INDIA
    AHMEDABAD

      +91 9879856334

    QUICK LINKS:
    About Us
    Service
    Solutions
    Case Study
    Our Team
    Contact Us

    CONNECT WITH US:
    marketing@aimdek.com

      (437)-999-0755

    linkedin icon
    facebook icon
    tweeter icon
    skype icon
    youtube icon
    instagram icon

    REVIEWED ON




    REVIEWED ON




    PARTNERS

    ISO

    CERTIFIED
    COMPANY

    @ 2021 AIMDek Technologies Private Limited. All rights reserved