0

Hello,

I am trying to create a bar chart with angular. I am following the following guidance:

https://www.fusioncharts.com/angularjs-charts/

I wonder why it does not works. I only see a blank screen when running bar_chart.html

bar_chart.html

<html>
<head>

<script src="barchart_data.js"></script>
<script src="angular-fusioncharts.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>
<body>

<div ng-app="myApp">...</div>

<div ng-controller="MyController">

<div fusioncharts 
    width="600" 
    height="400"
    type="column2d"
    datasource="{{myDataSource}}">
</div>

</div>

<script>
    angular.module("myApp", ["ng-fusioncharts"])
</script>

</body>
</html>

barchart_data.js

app.controller('MyController', function ($scope) {

$scope.myDataSource = {
    chart: {
        caption: "Harry's SuperMart",
        subCaption: "Top 5 stores in last month by revenue",
        numberPrefix: "$",
        theme: "ocean"
    },
    data:[{
        label: "Bakersfield Central",
        value: "880000"
    },
    {
        label: "Garden Groove harbour",
        value: "730000"
    },
    {
        label: "Los Angeles Topanga",
        value: "590000"
    },
    {
        label: "Compton-Rancho Dom",
        value: "520000"
    },
    {
        label: "Daly City Serramonte",
        value: "330000"
    }]
};

I already copy

to the same folder as bar_chart.html file.

1
Contributor
0
Replies
12
Views
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.