Member Avatar for davy_yg

bar_chart.html

<html>
<head>

<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

</head>
<body>

<script>
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
    type: 'doughnut2d',
    renderAt: 'chart-container',
    width: '450',
    height: '450',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "",
            "subCaption": "",
            "numberPrefix": "$",
            "paletteColors": "#5b9bd5,#ed7d31,#f2c500,#f45b00,#8e0000",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "use3DLighting": "0",
            "showShadow": "0",
            "enableSmartLabels": "0",
            "startingAngle": "310",
            "showLabels": "0",
            "showPercentValues": "1",
            "showLegend": "1",
            "legendShadow": "0",
            "legendBorderAlpha": "0",
            "defaultCenterLabel": "Assets",
            "centerLabel": "Revenue from $label: $value",
            "centerLabelBold": "1",
            "showTooltip": "0",
            "decimals": "0",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0"
        },
        "data": [
            {
                "label": "",
                "value": "73%"
            },
            {
                "label": "",
                "value": "27%"
            }                
        ]
    }
}).render();
});
</script>
</head>

<body>
<div id="chart-container">FusionCharts will render here</div>
</body>

<div ng-app="" ng-init="names=[
{name:'My Bank',accounts:'40 accounts',IDR:'800,000,000.00' },
{name:'External Bank',accounts:'4 accounts', IDR: '300,000,000.00'}
]">

<table border="1">

<tr ng-repeat="x in names"> 
<td>{{ x.name }}</td>
<td>{{ x.accounts }}</td>
<td>{{ x.IDR }}</td>
</tr>
<tr>
    <td>Total Assets</td>
    <td></td>
    <td>{{ 3 * 2 }}</td>
</tr>   
</table>

</body>
</html>

Check my code above. how to take the table data from a seperate json file and for the fusion chart, how to seperate the json file?

Next, how to find the total assets from the x.IDR all being added ?

Thanks.

  • 2 Contributors
  • 1 Reply
  • 409 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by ryantroop
Member Avatar for ryantroop

So fusion charts requires their data in a specific format. You can choose to parse that data (as they have), or you can write a conversion script to output the format they expect from the data you have.

You gotta do some of this on your own. I get fusionCharts is not the nicest of APIs to work with, but it's not terrible. At the end of the day it's all JSON and javascript primitives (mostly strings cause fusionCharts is just weird like that). As I suggested in another post, use the fiddles to do a bulk of your work (since you start from a working example), and you will start to see patterns in how they want things set up. (also, I noticed you are using AngularJS - in the fiddles you can easily import that to make the data look / work the way you want). Their docs are really only useful, in my opinion, after you play around with the fiddles so you can visualize what they are trying to convey.

I don't use Angular, so if you can rephrase your question about x.IDR and what you are expecting, I can try to help - otherwise, maybe someone with a bit more experience with Angular can chime in.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.