FusionCharts in Ionic 2 RC0


#1

. Tested OK in ion serve and android device build.

  1. Obtain FusionCharts.

  2. From the downloaded package, get two main files: fusioncharts.js and fusioncharts.charts.js.

  3. Create a new folder in src/assets named (i.e. chart): src/assets/chart/

  4. Copy the two previous fusioncharts files into this folder.

  5. 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

  6. In .ts (into your page file, i.e. statmain.ts) declare after import lines and before @Page or @Component: declare var FusionCharts;

  7. 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();
    });
    }

  8. Insert in your template (i.e. statmain.html): div id=“chart-container” and close with /div

  9. Feel free to change .ts, .html and .css as you need.


#2

Thanks! Using this example. Now i missing loading dynamic data and labels…

Do you have a example?


#3

For dynamic, you can try something like this.(you will have to make your own changes, this is only a basic thing - look FusionChart web for options):

export class StatMainPage {
xmlString:string;

constructor() {
this.xmlString="";
var datachart="";
var labels:string[]=[“Food”,“Drink”];
var values:string[]=[“85”,“15”];

var headerchart="<chart caption='Products' subcaption='Last year' numberprefix='$' showpercentintooltip='0' decimals='1' usedataplotcolorforlabels='1' theme='fint'>";

for (var i=0;i < labels.length;i++){
 datachart=datachart+"<set label='"+labels[i]+"' value='"+values[i]+"' />";
}
var endchart="</chart>";
this.xmlString=headerchart+datachart+endchart;

} // end of constructor

public ionViewDidLoad() {
let xmlline=this.xmlString;
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: “doughnut2d”,
renderAt: ‘chart-container’,
width: ‘100%’,
height: ‘300’,
dataFormat: ‘xml’,
dataSource: xmlline
}).render();
});

} // end of ionViewDidLoad

As you can see, in this example i have preferred to use XML format instead JSON, because i think is easier to loop arrays. You can also use as parameters every element of chart (title, subtitle, colors, etc.), but it requires some work (but easy) to make it. Data in “labels” and “values” arrays can be filled with a function from a JSON file, remote data, even parameters from a previous page, etc.


#4

Am using fusioncharts v3.8.0 its running on the browser when i ionic serve but testing on an ios device it not plotting. Its working on an android device also.

Question:Why is it not working on Ios? can you advice on how to solve the problem