Integrating Charts With Angular 5

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.

Integrating Charts With Angular 5 - Part One

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.

ng g c bubble-chart

bubble-chart.component.html

<mat-card>
<div class="alert alert-info">
<strong>Bubble Chart</strong>
</div>
<fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>
</mat-card>

bubble-chart.component.ts

Inside bubble-chart.component class, paste the following code snippet.

id = 'AngularChart6';
width = 600;
height = 400;
type = 'bubble';
dataFormat = 'json';
dataSource;
constructor() {
this.dataSource ={
"chart": {
"theme": "fint",
"caption": "Mobile Selling Analysis",
"xAxisMinValue": "0",
"xAxisMaxValue": "100",
"yAxisMinValue": "0",
"yAxisMaxValue": "30000",
"plotFillAlpha": "70",
"plotFillHoverColor": "#6baa01",
"showPlotBorder": "0",
"xAxisName": "Average Price",
"yAxisName": "Units Sold",
"numDivlines": "2",
//Showing the labels on Bubbles
"showValues": "1",
"showTrendlineLabels": "0",
"plotTooltext": "$name : Profit Contribution - $zvalue%"
},
"categories": [
{
"category": [
{
"label": "10K",
"x": "0"
},
{
"label": "20K",
"x": "20",
"showverticalline": "1"
},
{
"label": "30K",
"x": "40",
"showverticalline": "1"
},
{
"label": "40K",
"x": "60",
"showverticalline": "1"
},
{
"label": "50K",
"x": "80",
"showverticalline": "1"
},
{
"label": "60K+",
"x": "100",
"showverticalline": "1"
}
]
}
],
"dataset": [
{
"color":"#00aee4",
"data": [
{
"x": "20",
"y": "12000",
"z": "24",
"name": "RedMi"
},
{
"x": "60",
"y": "15000",
"z": "26",
"name": "Samsung"
},
{
"x": "80",
"y": "19000",
"z": "19",
"name": "Motorola"
},
{
"x": "45",
"y": "9000",
"z": "8",
"name": "Vivo"
},
{
"x": "33",
"y": "7500",
"z": "5",
"name": "Sony"
},
{
"x": "42",
"y": "12000",
"z": "10",
"name": "Oppo"
},
{
"x": "55",
"y": "43000",
"z": "9",
"name": "Apple"
}
]
}
],
"trendlines": [
{
"line": [
{
"startValue": "20000",
"endValue": "30000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "14"
},
{
"startValue": "10000",
"endValue": "20000",
"isTrendZone": "1",
"color": "#aaaaaa",
"alpha": "7"
}
]
}
]
}
}

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.

ng g c doughnut-chart

doughnut-chart.component.html

<mat-card>
<div class="alert alert-info">
<strong>DougHunt Chart</strong>
</div>
<fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>
</mat-card>

doughnut-chart.component.ts

id = 'AngularChart5';
width = 600;
height = 400;
type = 'doughnut2d';
dataFormat = 'json';
dataSource;
constructor() {
this.dataSource = {
"chart": {
"caption": "India - Mobile Selling*",
"subCaption": "* - Indicates that actual value may be vary",
"numberPrefix": "Rs.",
"startingAngle": "310",
"decimals": "0",
"defaultCenterLabel": "Total revenue: 2500 Cr.",
"centerLabel": "Revenue from $label: $value",
"theme": "fint"
},
"data": [{
"label": "RedMi",
"value": "800"
}, {
"label": "Apple",
"value": "700"
}, {
"label": "Samsung",
"value": "500"
}, {
"label": "Vivo",
"value": "500"
}]
}
}

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:

ng g c combined-chart

Open combined-chart.component.html and paste the following.

<mat-card>
<div class="alert alert-info">
<strong>Combined Chart [Column , Area and Line]</strong>
</div>
<fusioncharts [id]="id" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>
</mat-card>

combined-chart.component.ts

Open combinedchartcomponent class and paste it inside.

id = 'AngularChart7';
width = 600;
height = 400;
type = 'mscombi2d';
dataFormat = 'json';
dataSource;
constructor() {
this.dataSource = {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits By Months",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount in INR",
"numberprefix": "Rs.",
"theme": "ocean"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesname": "Trail Revenue",
"data": [
{
"value": "2500"
},
{
"value": "2250"
},
{
"value": "2100"
},
{
"value": "1900"
},
{
"value": "1785"
},
{
"value": "1600"
},
{
"value": "1500"
},
{
"value": "1470"
},
{
"value": "1300"
},
{
"value": "1190"
},
{
"value": "1005"
},
{
"value": "850"
}
]
},
{
"seriesname": "Assumed Revenue",
"renderas": "line",
"showvalues": "0",
"data": [
{
"value": "2200"
},
{
"value": "2050"
},
{
"value": "2200"
},
{
"value": "1800"
},
{
"value": "1700"
},
{
"value": "1500"
},
{
"value": "1480"
},
{
"value": "1470"
},
{
"value": "1200"
},
{
"value": "2100"
},
{
"value": "1100"
},
{
"value": "950"
}
]
},
{
"seriesname": "Profit",
"renderas": "area",
"showvalues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
}
]
}
}

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.

13 Comments

Join the conversation! Your thoughts help the community grow.

Aiim Bentaleb8y ago
Hi Manav, can I use the datasource from a row of a table upon clicking? Not taking the whole table but partial info from the table to do up a chart?
- Manav Pandya8y ago
  Yes you can do absolutely, well in this I article I have used dummy data, but you may have proper data and can select appropriate row as per your functional requirements, Thanks
Vikas D8y ago
Hi Manav, please explain above code in dynamically in angular and web api
- Manav Pandya8y ago
  How dynamically, i mean if you want to get json data than you can use any third party api and integrate it in angular side
Dharmraj Thakur8y ago
Well done... manav
- Manav Pandya8y ago
  Thanks for comment Dharmraj Thakur
Gajendra Jangid8y ago
Vary imprassive......
Naresh Singhal8y ago
Fantastic, Awesome & Very well deeply explained.......Very Good Manav Pandya...Keep It Up, Its very useful for Angular 5 Developers.
- Manav Pandya8y ago
  I hope you liked it sir Naresh Singhal
Hiten Pandya8y ago
Thanks brother for sharing your knowledge..
- Manav Pandya8y ago
  Thanks for ur comment bro Hiten Pandya
Sagar Pandurang Kap8y ago
Thats very nice to represent .Thank you....
- Manav Pandya8y ago
  Thanks for comment Sagar Pandurang Kap