FusionChart AngularJS: Cannot display two separate charts "No Data to display"

Question

The code is almost identical from the tutorials. Here is the HTML:

<div fusioncharts
    width="300"
    height="100"
    type="column2d"
    dataSource="{{myDataSource}}" >
</div>
<div fusioncharts
    width="300"
    height="100"
    type="column2d"
    dataSource="{{myDataSource2}}" >
</div>

Here is my AngularJS code:

$scope.myDataSource = {
    chart: {
        caption: weekObject.week
    },
    data: [
        {
            label: "Saturday",
            value: weekObject.days[0]._FE_Items_Sold.toString()
        },
        {
            label: "Sunday",
            value: weekObject.days[1]._FE_Items_Sold.toString()
        },
        {
            label: "Monday",
            value: weekObject.days[2]._FE_Items_Sold.toString()
        },
        {
            label: "Tuesday",
            value: weekObject.days[3]._FE_Items_Sold.toString()
        },
        {
            label: "Wednesday",
            value: weekObject.days[4]._FE_Items_Sold.toString()
        },
        {
            label: "Thursday",
            value: weekObject.days[5]._FE_Items_Sold.toString()
        },
        {
            label: "Friday",
            value: weekObject.days[6]._FE_Items_Sold.toString()
        }
    ]
};
$scope.myDataSource2 = {
    chart: {
        caption: weekObject.week
    },
    data: [
        {
            label: "Saturday",
            value: weekObject.days[0]._FE_Transactions.toString()
        },
        {
            label: "Sunday",
            value: weekObject.days[1]._FE_Transactions.toString()
        },
        {
            label: "Monday",
            value: weekObject.days[2]._FE_Transactions.toString()
        },
        {
            label: "Tuesday",
            value: weekObject.days[3]._FE_Transactions.toString()
        },
        {
            label: "Wednesday",
            value: weekObject.days[4]._FE_Transactions.toString()
        },
        {
            label: "Thursday",
            value: weekObject.days[5]._FE_Transactions.toString()
        },
        {
            label: "Friday",
            value: weekObject.days[6]._FE_Transactions.toString()
        }
    ]
};

When I run this I get the first chart to render. The second one just has the phrase "No data to display." I noticed that even with the first graph, if I name the datasource anything but "myDataSource" it doesn't render either. That is confusing to me because how could I ever have a page with more than one graph if I can't reference multiple data variables to bind? I feel like the is more of a fix my ignorance than fix my code type question but..

Question: How can I render multiple graphs with FushionCharts with different data?

Since my script here is done inside a `createChart` function which isn't shown it wasn't working. This is because as I said below I needed to initialize the two variables. If you do it the way it is done in the answer statically than obviously initialization isn't necessary. just FYI — discodane, Oct 07 '15 at 13:10

score 3 · Accepted Answer · edited Jul 26 '16 at 08:46

Works in my case.

var app = angular.module('dashApp', ["ng-fusioncharts"]);
        
app.controller('fusionController', ["$scope", function ($scope) {
    $scope.myDataSource1 = {
        chart: {caption: "Some week"},
        data: [
            {label: "Saturday", value: "100"},
            {label: "Sunday", value: "300"},
            {label: "Monday", value: "150"},
            {label: "Tuesday", value: "240"},
            {label: "Wednesday", value: "300"},
            {label: "Thursday", value: "90"},
            {label: "Friday", value: "170"}
        ]
    };

    $scope.myDataSource2 = {
        chart: {
            caption: "Some other week"
        },
        data: [
            {label: "Saturday", value: "1100"},
            {label: "Sunday", value: "1300"},
            {label: "Monday", value: "1150"},
            {label: "Tuesday", value: "1240"},
            {label: "Wednesday", value: "1300"},
            {label: "Thursday", value: "190"},
            {label: "Friday", value: "1170"}
        ]
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<body ng-app="dashApp">
    <div class="modal-body" ng-controller="fusionController">
        <div fusioncharts
            width="600"
            height="300"
            type="column2d"
            dataSource="{{myDataSource1}}" >
        </div>

        <div fusioncharts
            width="600"
            height="300"
            type="column2d"
            dataSource="{{myDataSource2}}" >
        </div>
    </div>
</body>

Is it not working for any particular scenario?

Yes that worked for me too. The issue I was having stemmed from not having declared "myDataSource[1-2]". Not sure why that is so but as soon as I declared "var myDataSource2 = {}" at the beginning of the controller it worked. — discodane, Oct 05 '15 at 13:39
can you please see my question maybe you would have an idea http://stackoverflow.com/questions/37256487/i-want-to-change-the-chart-for-each-city-or-subcity-selected — Abderrahim, May 17 '16 at 14:33

score 0 · Answer 2 · answered Apr 28 '16 at 19:24

If you're using a factory to try to load the data.json available for the $scope.myDataSource, this worked for me:

Factory

angular.module('myService', [])
  .factory('dataLoad', ['$http', function($http){
    return {
      getData: function () {
        return $http.get('data.json');
      }
    };
  }])

Controller

Within controller, do this:

// within your controller
// create an empty object 
$scope.myDataSource = {}; // this is kinda the trick. Without this,
                          // it complains of "No data to display"
dataLoad.getData()
    .success(function(data) {
        $scope.myDataSource = data;
    });

Templates

Then as usual:

<fusioncharts width="600" height="500" type="column2d" dataSource="{{ myDataSource }}">
</fusioncharts>

FusionChart AngularJS: Cannot display two separate charts "No Data to display"

2 Answers2