Post
Ask Question

Integrating Charts With Angular 5 - Part Two

Introduction

This is the second part of my series of integrating charts with Angular 5. If you have not gone through part 1, then please find the link below to start.
In part 1, we learned 4 types of charts to use with Angular.
  • Bar Chart 
  • Column Chart
  • Pie Chart
  • Line Chart 
Let's start implementing the remaining chart types in this part of the series.
 
Bubble Chart
 
I have created a separate component called bubble-chart by using the following command.
  1. ng g c bubble-chart  
bubble-chart.component.html
  1. <mat-card>  
  2.     <div class="alert alert-info">  
  3.         <strong>Bubble Chart</strong>  
  4.     </div>  
  5.     <fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>  
  6. </mat-card>  
bubble-chart.component.ts
 
Inside bubble-chart.component class, paste the following code snippet.
  1. id = 'AngularChart6';  
  2.   width = 600;  
  3.   height = 400;  
  4.   type = 'bubble';  
  5.   dataFormat = 'json';  
  6.   dataSource;  
  7.   
  8.   constructor() {   
  9.     this.dataSource ={  
  10.         
  11.         "chart": {  
  12.             "theme": "fint",  
  13.             "caption": "Mobile Selling Analysis",  
  14.             "xAxisMinValue": "0",  
  15.             "xAxisMaxValue": "100",  
  16.             "yAxisMinValue": "0",  
  17.             "yAxisMaxValue": "30000",  
  18.             "plotFillAlpha": "70",  
  19.             "plotFillHoverColor": "#6baa01",  
  20.             "showPlotBorder": "0",  
  21.             "xAxisName": "Average Price",  
  22.             "yAxisName": "Units Sold",  
  23.             "numDivlines": "2",  
  24.             //Showing the labels on Bubbles  
  25.             "showValues": "1",  
  26.             "showTrendlineLabels": "0",  
  27.             "plotTooltext": "$name : Profit Contribution - $zvalue%"  
  28.         },  
  29.         "categories": [  
  30.             {  
  31.                 "category": [  
  32.                     {  
  33.                         "label": "10K",  
  34.                         "x": "0"  
  35.                     },   
  36.                     {  
  37.                         "label": "20K",  
  38.                         "x": "20",  
  39.                         "showverticalline": "1"  
  40.                     },   
  41.                     {  
  42.                         "label": "30K",  
  43.                         "x": "40",  
  44.                         "showverticalline": "1"  
  45.                     },   
  46.                     {  
  47.                         "label": "40K",  
  48.                         "x": "60",  
  49.                         "showverticalline": "1"  
  50.                     },   
  51.                     {  
  52.                         "label": "50K",  
  53.                         "x": "80",  
  54.                         "showverticalline": "1"  
  55.                     },   
  56.                     {  
  57.                         "label": "60K+",  
  58.                         "x": "100",  
  59.                         "showverticalline": "1"  
  60.                     }  
  61.                 ]  
  62.             }  
  63.         ],  
  64.         "dataset": [  
  65.             {  
  66.                 "color":"#00aee4",  
  67.                 "data": [  
  68.                     {  
  69.                         "x": "20",  
  70.                         "y": "12000",  
  71.                         "z": "24",  
  72.                         "name": "RedMi"  
  73.                     },   
  74.                     {  
  75.                         "x": "60",  
  76.                         "y": "15000",  
  77.                         "z": "26",  
  78.                         "name": "Samsung"  
  79.                     },   
  80.                     {  
  81.                         "x": "80",  
  82.                         "y": "19000",  
  83.                         "z": "19",  
  84.                         "name": "Motorola"  
  85.                     },  
  86.                     {  
  87.                         "x": "45",  
  88.                         "y": "9000",  
  89.                         "z": "8",  
  90.                         "name": "Vivo"  
  91.                     },  
  92.                     {  
  93.                         "x": "33",  
  94.                         "y": "7500",  
  95.                         "z": "5",  
  96.                         "name": "Sony"  
  97.                     },   
  98.                     {  
  99.                         "x": "42",  
  100.                         "y": "12000",  
  101.                         "z": "10",  
  102.                         "name": "Oppo"  
  103.                     },   
  104.                     {  
  105.                         "x": "55",  
  106.                         "y": "43000",  
  107.                         "z": "9",  
  108.                         "name": "Apple"  
  109.                     }  
  110.                 ]  
  111.             }  
  112.         ],  
  113.         "trendlines": [  
  114.             {  
  115.                 "line": [  
  116.                     {  
  117.                         "startValue": "20000",  
  118.                         "endValue": "30000",  
  119.                         "isTrendZone": "1",  
  120.                         "color": "#aaaaaa",  
  121.                         "alpha": "14"  
  122.                     },   
  123.                     {  
  124.                         "startValue": "10000",  
  125.                         "endValue": "20000",  
  126.                         "isTrendZone": "1",  
  127.                         "color": "#aaaaaa",  
  128.                         "alpha": "7"  
  129.                     }  
  130.                 ]  
  131.             }  
  132.         ]  
  133.     }  
  134.       
  135.   }  
As you can see, there are some setting options that I have used.
  • type= 'bubble'
  • chart: it contains settings about the look of Bubbles
  • category: you can set your own category as per your requirements
  • dataset: Defines bubbles with an appropriate region with starting and ending values.
Output
 
 
 
Doughnut Chart 
 
Doughnut chart is another form of Pie chart which is used to illustrate the numerical proportion of  data.
 
To implement doughnut, create one component by writing the following code.
  1. ng g c doughnut-chart  
doughnut-chart.component.html
  1. <mat-card>  
  2.     <div class="alert alert-info">  
  3.         <strong>DougHunt Chart</strong>  
  4.     </div>  
  5.     <fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>  
  6. </mat-card>  
doughnut-chart.component.ts
  1. id = 'AngularChart5';  
  2.  width = 600;  
  3.  height = 400;  
  4.  type = 'doughnut2d';  
  5.  dataFormat = 'json';  
  6.  dataSource;  
  7.   
  8.  constructor() {  
  9.   
  10.    this.dataSource = {  
  11.   
  12.      "chart": {  
  13.        "caption": "India - Mobile Selling*",  
  14.        "subCaption": "* - Indicates that actual value may be vary",  
  15.        "numberPrefix": "Rs.",  
  16.        "startingAngle": "310",  
  17.        "decimals": "0",  
  18.        "defaultCenterLabel": "Total revenue: 2500 Cr.",  
  19.        "centerLabel": "Revenue from $label: $value",  
  20.        "theme": "fint"  
  21.      },  
  22.      "data": [{  
  23.        "label": "RedMi",  
  24.        "value": "800"  
  25.      }, {  
  26.        "label": "Apple",  
  27.        "value": "700"  
  28.      }, {  
  29.        "label": "Samsung",  
  30.        "value": "500"  
  31.      }, {  
  32.        "label": "Vivo",  
  33.        "value": "500"  
  34.      }]  
  35.    }  
  36.   
  37.  }  
To use a doughnut chart, make sure to use type='doughunt2d'.
 
 
Combined Chart [Line , Area and Column chart]
 
To use combine chart, create a new component by writing:
  1. ng g c combined-chart  
Open combined-chart.component.html and paste the following.
  1. <mat-card>  
  2.     <div class="alert alert-info">  
  3.         <strong>Combined Chart [Column , Area and Line]</strong>  
  4.     </div>  
  5.     <fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>  
  6. </mat-card>  
combined-chart.component.ts 
 
Open combinedchartcomponent class and paste it inside.
  1. id = 'AngularChart7';  
  2.   width = 600;  
  3.   height = 400;  
  4.   type = 'mscombi2d';  
  5.   dataFormat = 'json';  
  6.   dataSource;  
  7.   
  8.   constructor() {  
  9.     this.dataSource = {  
  10.       "chart": {  
  11.         "caption": "Actual Revenues, Targeted Revenues & Profits By Months",  
  12.         "subcaption": "Last year",  
  13.         "xaxisname": "Month",  
  14.         "yaxisname": "Amount in INR",  
  15.         "numberprefix": "Rs.",  
  16.         "theme": "ocean"  
  17.       },  
  18.       "categories": [  
  19.         {  
  20.           "category": [  
  21.             {  
  22.               "label": "Jan"  
  23.             },  
  24.             {  
  25.               "label": "Feb"  
  26.             },  
  27.             {  
  28.               "label": "Mar"  
  29.             },  
  30.             {  
  31.               "label": "Apr"  
  32.             },  
  33.             {  
  34.               "label": "May"  
  35.             },  
  36.             {  
  37.               "label": "Jun"  
  38.             },  
  39.             {  
  40.               "label": "Jul"  
  41.             },  
  42.             {  
  43.               "label": "Aug"  
  44.             },  
  45.             {  
  46.               "label": "Sep"  
  47.             },  
  48.             {  
  49.               "label": "Oct"  
  50.             },  
  51.             {  
  52.               "label": "Nov"  
  53.             },  
  54.             {  
  55.               "label": "Dec"  
  56.             }  
  57.           ]  
  58.         }  
  59.       ],  
  60.       "dataset": [  
  61.         {  
  62.           "seriesname": "Trail Revenue",  
  63.           "data": [  
  64.             {  
  65.               "value": "2500"  
  66.             },  
  67.             {  
  68.               "value": "2250"  
  69.             },  
  70.             {  
  71.               "value": "2100"  
  72.             },  
  73.             {  
  74.               "value": "1900"  
  75.             },  
  76.             {  
  77.               "value": "1785"  
  78.             },  
  79.             {  
  80.               "value": "1600"  
  81.             },  
  82.             {  
  83.               "value": "1500"  
  84.             },  
  85.             {  
  86.               "value": "1470"  
  87.             },  
  88.             {  
  89.               "value": "1300"  
  90.             },  
  91.             {  
  92.               "value": "1190"  
  93.             },  
  94.             {  
  95.               "value": "1005"  
  96.             },  
  97.             {  
  98.               "value": "850"  
  99.             }  
  100.           ]  
  101.         },  
  102.         {  
  103.           "seriesname": "Assumed Revenue",  
  104.           "renderas": "line",  
  105.           "showvalues": "0",  
  106.           "data": [  
  107.             {  
  108.               "value": "2200"  
  109.             },  
  110.             {  
  111.               "value": "2050"  
  112.             },  
  113.             {  
  114.               "value": "2200"  
  115.             },  
  116.             {  
  117.               "value": "1800"  
  118.             },  
  119.             {  
  120.               "value": "1700"  
  121.             },  
  122.             {  
  123.               "value": "1500"  
  124.             },  
  125.             {  
  126.               "value": "1480"  
  127.             },  
  128.             {  
  129.               "value": "1470"  
  130.             },  
  131.             {  
  132.               "value": "1200"  
  133.             },  
  134.             {  
  135.               "value": "2100"  
  136.             },  
  137.             {  
  138.               "value": "1100"  
  139.             },  
  140.             {  
  141.               "value": "950"  
  142.             }  
  143.           ]  
  144.         },  
  145.         {  
  146.           "seriesname": "Profit",  
  147.           "renderas": "area",  
  148.           "showvalues": "0",  
  149.           "data": [  
  150.             {  
  151.               "value": "4000"  
  152.             },  
  153.             {  
  154.               "value": "5000"  
  155.             },  
  156.             {  
  157.               "value": "3000"  
  158.             },  
  159.             {  
  160.               "value": "4000"  
  161.             },  
  162.             {  
  163.               "value": "1000"  
  164.             },  
  165.             {  
  166.               "value": "7000"  
  167.             },  
  168.             {  
  169.               "value": "1000"  
  170.             },  
  171.             {  
  172.               "value": "4000"  
  173.             },  
  174.             {  
  175.               "value": "1000"  
  176.             },  
  177.             {  
  178.               "value": "8000"  
  179.             },  
  180.             {  
  181.               "value": "2000"  
  182.             },  
  183.             {  
  184.               "value": "7000"  
  185.             }  
  186.           ]  
  187.         }  
  188.       ]  
  189.     }  
  190.   }  
Here, in this combined chart, we have taken different Revenue and Profit details to populate our chart.
 
Some of the important settings are,
  • type = 'mscombi2d' 
  • chart: holds basic design level settings .
  • datasets: values regarding trail revenue .
  • category: month-based structured data with their appropriate trail revenue , assumed revenue etc . 
The output will be like below.
 
 

Conclusion  
 
In this part two of the series, we have learned how to integrate charts with Angular 5.
  • Bar Chart
  • Pie Chart
  • Column Chart
  • Line Chart
  • Bubble Chart
  • DougHunt Chart
  • Combined Chart [Area , Line and Area Chart] 
You can implement this by populating your own data with the use of services to represent statistical data to visual graphs.
 
Follow my other Angular articles here.
I hope you have learned from this two-part series. Your comments are always welcome.


Similar Articles