angular-am-charts

AngularAmCharts

Data Visualization is the graphical representation of information and data . By doing so , it provides an accessable way to see and understand trends , outliers and patterns in the data .

We use amCharts 4 javascript library that include most of the chart types including geographical maps . It's designed to work with modern dev toolkits like React ,Angular ,Vue ,Ember . By using this , we have developed a UI library component for various charts .

For more reference , please visit https://www.amcharts.com/

Features

• Pie Chart
• Advanced Pie Chart
• Donut Chart
• Area Chart
• Stacked Area Chart
• Simple Bar Chart
• Stacked Bar Chart
• Clustered Bar Chart
• Column Chart
• Clustered Column Chart
• Stacked Column Chart
• Line chart
• Column Line Chart
• Time Line Chart
• World Map Chart

Pre-Requisites

Please install the below dependencies before installing this library .

 "@amcharts/amcharts4": "^4.9.19",
"@amcharts/amcharts4-geodata": "^4.1.15",

Installation

 npm i angular-am-charts

Properties

• title : Custom Chart title. Its an optional field .

• data : Chart data in the form of JSON Array

• valueField : field which contains the value .

• categoryField : field which contains the category .

• clickEvent : click event which returns the instance data of that particular slice of the chart data .

Example :

  <advanced-pie-chart
[title]="chartTitle"
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>

</advanced-pie-chart>

Html Tags

• Pie Chart

<pie-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</pie-chart>

• Advanced Pie Chart

<advanced-pie-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</advanced-pie-chart>

• Donut Chart

<donut-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</donut-chart>

• Area Chart

<area-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</area-chart>

• Stacked Area Chart

<stacked-area-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</stacked-area-chart>

• Simple Bar Chart

<simple-bar-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</simple-bar-chart>

• Stacked Bar Chart

<stacked-bar-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</stacked-bar-chart>

• Clustered Bar Chart

<clustered-bar-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</clustered-bar-chart>

• Column Chart

<column-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</column-chart>

• Clustered Column Chart

<clustered-column-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</clustered-column-chart>

• Stacked Column Chart

<stacked-column-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</stacked-column-chart>

• Line chart

<line-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</line-chart>

• Column Line Chart

<column-line-chart
[data] = "DATA"
[valueField] = "valueField"
[categoryField] = "categoryField"
>
</column-line-chart>

• Time Line Chart

<time-line-chart 
[data]="TIMELINE_DATA">

</time-line-chart>

Note : Time Line Data should be in the exact same format with fieldNames as given in the sample data below .

• World Map Chart

<world-map-chart 
[data]="MAP_DATA">

</world-map-chart>

Note : Time Line Data should be in the exact same format with fieldNames as given in the sample data below .

Sample Data :

DATA =

[{
    "country": "USA",
    "visits": 2025
   }, {
    "country": "China",
    "visits": 1882
   }, {
    "country": "Japan",
    "visits": 1809  
   }, {
    "country": "Germany",
    "visits": 1322
   }, {
    "country": "UK",
    "visits": 1122
   }, {
    "country": "France",
    "visits": 1114
   }, {
    "country": "India",
    "visits": 984
   }, {
    "country": "Spain",
    "visits": 711
   }, {
    "country": "Netherlands",
    "visits": 665
   }, {
    "country": "Russia",
    "visits": 580
   }, {
    "country": "South Korea",
    "visits": 443
   }, {
    "country": "Canada",
    "visits": 441
   }];

MAP_DATA =

    [{
    "title": "Brussels",
    "latitude": 50.8371,
    "longitude": 4.3676,
    "color":null
  }, {
    "title": "Copenhagen",
    "latitude": 55.6763,
    "longitude": 12.5681,
    "color":null
  }, {
    "title": "Paris",
    "latitude": 48.8567,
    "longitude": 2.3510,
    "color":null
  }, {
    "title": "Reykjavik",
    "latitude": 64.1353,
    "longitude": -21.8952,
    "color":null
  }, {
    "title": "Moscow",
    "latitude": 55.7558,
    "longitude": 37.6176,
    "color":null
  }, {
    "title": "Madrid",
    "latitude": 40.4167,
    "longitude": -3.7033,
    "color":null
  }, {
    "title": "London",
    "latitude": 51.5002,
    "longitude": -0.1262,
    "color":null
  }, {
    "title": "Peking",
    "latitude": 39.9056,
    "longitude": 116.3958,
    "color":null
  }, {
    "title": "New Delhi",
    "latitude": 28.6353,
    "longitude": 77.2250,
    "color":null
  }, {
    "title": "Tokyo",
    "latitude": 35.6785,
    "longitude": 139.6823,
    "color":null
  }, {
    "title": "Ankara",
    "latitude": 39.9439,
    "longitude": 32.8560,
    "color":null
  }, {
    "title": "Buenos Aires",
    "latitude": -34.6118,
    "longitude": -58.4173,
    "color":null
  }, {
    "title": "Brasilia",
    "latitude": -15.7801,
    "longitude": -47.9292,
    "color":null
  }, {
    "title": "Ottawa",
    "latitude": 45.4235,
    "longitude": -75.6979,
    "color":null
  }, {
    "title": "Washington",
    "latitude": 38.8921,
    "longitude": -77.0241,
    "color":null
  }, {
    "title": "Kinshasa",
    "latitude": -4.3369,
    "longitude": 15.3271,
    "color":null
  }, {
    "title": "Cairo",
    "latitude": 30.0571,
    "longitude": 31.2272,
    "color":null
  }, {
    "title": "Pretoria",
    "latitude": -25.7463,
    "longitude": 28.1876,
    "color":null
  }

   ];

TIMELINE_DATA =

[{
    "category": "Module #1",
    "start": "2016-01-10",
    "end": "2016-01-13",
    "color":null,
    "task": "Gathering requirements"
  }, {
    "category": "Module #1",
    "start": "2016-02-05",
    "end": "2016-04-18",
    "color": null,
    "task": "Development"
  }, {
    "category": "Module #2",
    "start": "2016-01-08",
    "end": "2016-01-10",
    "color": null,
    "task": "Gathering requirements"
  }, {
    "category": "Module #2",
    "start": "2016-01-12",
    "end": "2016-01-15",
    "color": null,
    "task": "Producing specifications"
  }, {
    "category": "Module #2",
    "start": "2016-01-16",
    "end": "2016-02-05",
    "color": null,
    "task": "Development"
  }, {
    "category": "Module #2",
    "start": "2016-02-10",
    "end": "2016-02-18",
    "color": null,
    "task": "Testing and QA"
  }, {
    "category": "",
    "task": ""
  },{
    "category": "Module #3",
    "start": "2016-01-01",
    "end": "2016-01-19",
    "color": null,
    "task": "Gathering requirements"
  }, {
    "category": "Module #3",
    "start": "2016-02-01",
    "end": "2016-02-10",
    "color": null,
    "task": "Producing specifications"
  }, {
    "category": "Module #3",
    "start": "2016-03-10",
    "end": "2016-04-15",
    "color": null,
    "task": "Development"
  }, {
    "category": "Module #3",
    "start": "2016-04-20",
    "end": "2016-04-30",
    "color": null,
    "task": "Testing and QA"
  }, {
    "category": "Module #4",
    "start": "2016-01-15",
    "end": "2016-02-12",
    "color": null,
    "task": "Gathering requirements"
  },{
    "category": "Module #4",
    "start": "2016-02-25",
    "end": "2016-03-10",
    "color": null,
    "task": "Development"
  }, {
    "category": "Module #4",
    "start": "2016-03-23",
    "end": "2016-04-29",
    "color": null,
    "task": "Testing and QA"
  }

   ];