. Tested OK in ion serve and android device build.
-
Obtain FusionCharts.
-
From the downloaded package, get two main files: fusioncharts.js and fusioncharts.charts.js.
-
Create a new folder in src/assets named (i.e. chart): src/assets/chart/
-
Copy the two previous fusioncharts files into this folder.
-
Include files in index.html (only need include one of them), before main.js include: script type=“text/javascript” src=“assets/chart/fusioncharts.js” and close with /script
-
In .ts (into your page file, i.e. statmain.ts) declare after import lines and before @Page or @Component: declare var FusionCharts;
-
Insert this code in your desired function in .ts (i.e. ionViewDidLoad()):
public ionViewDidLoad() {
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: ‘doughnut2d’,
renderAt: ‘chart-container’,
width: ‘100%’,
height: ‘450’,
dataFormat: ‘json’,
dataSource: {
“chart”: {
“caption”: “Split of Revenue by Product Categories”,
“subCaption”: “Last year”,
“numberPrefix”: “$”,
“paletteColors”: “#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000”,
// more chart attributes
},
“data”: [{
“label”: “Food”,
“value”: “85”
},
{
“label”: “Drink”,
“value”: “15”
}
// more data
]
}
}).render();
});
} -
Insert in your template (i.e. statmain.html): div id=“chart-container” and close with /div
-
Feel free to change .ts, .html and .css as you need.