discodane discodane - 7 months ago 40
HTML Question

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

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?

Answer

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://static.fusioncharts.com/code/latest/fusioncharts.charts.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?

Comments