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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -