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.