html - FusionChart AngularJS: Cannot display two separate charts "No Data to display" -
the code identical tutorials. here html:
<div fusioncharts width="300" height="100" type="column2d" datasource="{{mydatasource}}" > </div> <div fusioncharts width="300" height="100" type="column2d" datasource="{{mydatasource2}}" > </div>
here 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 run first chart render. second 1 has phrase "no data display." noticed first graph, if name datasource "mydatasource" doesn't render either. confusing me because how ever have page more 1 graph if can't reference multiple data variables bind? feel more of fix ignorance fix code type question but..
question: how can render multiple graphs fushioncharts different data?
works in 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 not working particular scenario?
Comments
Post a Comment