0

I'm trying to create chart using Angular, here is the code and error screenshots:

<html>
   <head>
      <script src="bower_components/angular/angular.min.js"></script> <!-- Angular Flow Charts -->
      <script src="bower_components/Chart.js/Chart.js"></script> <!-- Chart.js -->
      <script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script> <!-- Angular Chart.js -->
      <script src="bower_components/flowthings-browser/dist/flowthings-browser.min.js"></script> <!-- FlowThings Browser -->
      <script src="bower_components/flowthings-angular/dist/flowthings-angular.min.js"></script> <!-- FlowThings Angular -->
      <script src="bower_components/angular-flow-chart/dist/angular-flow-chart.min.js"></script> <!-- Angular Flow Charts -->
   </head>
   <body>
      <div ng-app="Demo">
         <div ng-controller="DemoCtrl">
            <flow-chart flow-id="flowId" limit="50">
               <flow-chart-js
                  value-properties="chart.valueProp"
                  value-defaults="chart.valueDefaults"
                  chart-type="line"
                  chart-options="chart.options"
                  series="chart.series"
                  legend="chart.legend">
               </flow-chart-js>
            </flow-chart>
         </div>
      </div>
      <flow-chart flow-id="'f123...'" limit="20">
         <flow-chart-js value-properties="['temperature', 'humidity']" chart-type="line"></flow-chart-js>
      </flow-chart>
      <script>
         angular.module('Demo', ['flowthings', 'ngFlowChart', 'ngFlowChartJs'])
             .config(function (flowthingsProvider) {
                 flowthingsProvider.options.account = 'sljux';
                 flowthingsProvider.options.token = 'm26E5C3BTxjt8QXsYxbqoL1egCTR';
             })
             .run(function(flowthings) {
                 flowthings.ws.connect()
             })
             .controller('DemoCtrl', function ($scope) {
                 $scope.flowId = 'f55e6cc2268056d46fb80581c';

                 $scope.chart = {
                     options: {
                         animation: false,
                         scaleShowHorizontalLines: true,
                         scaleShowVerticalLines: false,
                         pointDot: false,
                         datasetStrokeWidth: 0.5
                     },
                     series: ['Inside Noise', 'Outside Noise'],
                     valueProp: ['inside.noise', 'outside.noise'],
                     valueDefaults: 0,
                     legend: true
                 }
         });
      </script>
   </body>
</html>

angular.js:99 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.8/$injector/modulerr?p0= ...

Milo
  • 3,365
  • 9
  • 30
  • 44
syhem sam
  • 1
  • 1
  • Possible duplicate of [AngularJS 1.2 $injector:modulerr](https://stackoverflow.com/questions/18287482/angularjs-1-2-injectormodulerr) – dota2pro Sep 25 '19 at 14:25
  • YOu are missing import of a module that is required – dota2pro Sep 25 '19 at 14:25
  • Error message is not complete. At least put the full message, I mean, it's obvious that you are missing a reference but with an incomplete message it's hard to tell. – Alfredo Zamudio Sep 26 '19 at 03:25
  • sorry for my late response and thank you all for your help. i replaced the angular.min.js with angular.js and here is the complete error: Uncaught Error: [$injector:modulerr] Failed to instantiate module Demo due to: Error: [$injector:modulerr] Failed to instantiate module ngFlowChartJs due to: Error: [$injector:nomod] Module 'ngFlowChartJs' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. – syhem sam Sep 26 '19 at 07:25

0 Answers0