Error: Time mode requires the flot.time plugin. in Angular Application.

[David van Dugteren]

Hi all, I'm looking for some ideas with my AngularJS application which currently uses flot charts.

I wanted to add the flot.time plugin to the project but have been unsuccessful with the aforementioned error message produced in console.

If I use mode: categories instead of time, the chart draws fine but obviously the timestamps aren't formatted, so the chart looks a bit ugly. Hence I went looking for a plugin precisely like flot.time.

Having carefully stepped through instructions and still coming up with the error, I'm hoping someone here might be able to help me.

<script language="javascript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jquery.flot.time.js"> </script>

<script src="bower_components/angular-flot/angular-flot.js"></script>

Included in my index.html I have something that looks like this.

In my controller javascript, I set up the graph with time as the mode for the x axis like so:

 $scope.options = {
    series: {
      lines: {
        show: true,
        lineWidth: 2,
        fill: true,
        fillColor: {
          colors: [{
            opacity: 0.0
          }, {
            opacity: 0.2
          }]
        }
      },
      points: {
        radius: 5,
        show: true
      },
      shadowSize: 2
    },
    grid: {
      color: "#fff",
      hoverable: true,
      clickable: true,
      tickColor: "#f0f0f0",
      borderWidth: 0
    },
    colors: ["#5dcff3"],
    xaxis: {
      //mode: "categories",
      mode: "time",
      tickDecimals: 0
    },
    yaxis: {
      ticks: 5,
      tickDecimals: 0
    },
    tooltip: true,
    tooltipOpts: {
      content: "%x.1 is %y.4",
      defaultTheme: false,
      shifts: {
        x: 0,
        y: 20
      }
    }
  };

  $scope.graphLoading = false;
}

But I'm at a loose end now, hoping for any little tips, pointers, checks that could help me understand why flot.time isn't being recognized.

The full error in console is:

Error: Time mode requires the flot.time plugin.
    at z (eval at <anonymous> (http://local.my.keynected.com/bower_components/jquery/dist/jquery.js:328:5), <anonymous>:28:14240)
    at Object.eval (eval at <anonymous> (http://local.my.keynected.com/bower_components/jquery/dist/jquery.js:328:5), <anonymous>:28:13179)
    at Function.jQuery.extend.each (http://local.my.keynected.com/scripts/jquery.js:611:20)
    at r.R [as setupGrid] (eval at <anonymous> (http://local.my.keynected.com/bower_components/jquery/dist/jquery.js:328:5), <anonymous>:28:13158)
    at Object.onDatasetChanged [as fn] (http://local.my.keynected.com/bower_components/angular-flot/angular-flot.js:45:16)
    at Scope.$digest (http://local.my.keynected.com/bower_components/angular/angular.js:12251:29)
    at Scope.$apply (http://local.my.keynected.com/bower_components/angular/angular.js:12516:24)
    at done (http://local.my.keynected.com/bower_components/angular/angular.js:8204:45)
    at completeRequest (http://local.my.keynected.com/bower_components/angular/angular.js:8412:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://local.my.keynected.com/bower_components/angular/angular.js:8351:11)angular.js:9778 (anonymous function)angular.js:7216 (anonymous function)angular.js:12270 Scope.$digestangular.js:12516 Scope.$applyangular.js:8204 doneangular.js:8412 completeRequestangular.js:8351 xhr.onreadystatechange

[Mark Côté]

That error indicates that the plugin isn't being loaded at all. Are you positive the file exists on your server? You could try adding a console.log() to jquery.flot.time.js to prove that it is being loaded. Does the axes-time example work for you?

Mark

--

---
You received this message because you are subscribed to the Google Groups "Flot graphs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flot-graphs...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.