dianping/cat · error · Error
Time mode requires the flot.time plugin.
Error message
Time mode requires the flot.time plugin.
What it means
Since flot 0.8, time-mode axes were split into the flot.time plugin which installs a tickGenerator for mode:'time'. The core setup detects opts.mode == 'time' with no axis.tickGenerator installed — meaning the plugin never ran — and throws a friendly reminder rather than producing garbage ticks.
Source
Thrown at cat-home/src/main/webapp/assets/js/uncompressed/flot/jquery.flot.js:1736
} else {
size = 10;
}
size *= magn;
if (opts.minTickSize != null && size < opts.minTickSize) {
size = opts.minTickSize;
}
axis.delta = delta;
axis.tickDecimals = Math.max(0, maxDec != null ? maxDec : dec);
axis.tickSize = opts.tickSize || size;
// Time mode was moved to a plug-in in 0.8, and since so many people use it
// we'll add an especially friendly reminder to make sure they included it.
if (opts.mode == "time" && !axis.tickGenerator) {
throw new Error("Time mode requires the flot.time plugin.");
}
// Flot supports base-10 axes; any other mode else is handled by a plug-in,
// like flot.time.js.
if (!axis.tickGenerator) {
axis.tickGenerator = function (axis) {
var ticks = [],
start = floorInBase(axis.min, axis.tickSize),
i = 0,
v = Number.NaN,
prev;
do {
prev = v;
v = start + i * axis.tickSize;View on GitHub (pinned to e815e74d4c)
Solutions
- Include jquery.flot.time.js after jquery.flot.js and before calling $.plot.
- Verify the plugin file loads (Network tab) and the filename/path is correct.
- Alternatively convert timestamps to plain numbers and format tick labels manually (not recommended).
Example fix
// before
<script src="jquery.flot.js"></script>
$.plot('#chart', data, { xaxis: { mode: 'time' } }); // throws
// after
<script src="jquery.flot.js"></script>
<script src="jquery.flot.time.js"></script>
$.plot('#chart', data, { xaxis: { mode: 'time' } }); Defensive patterns
Strategy: validation
Validate before calling
function flotTimeReady() {
// flot.time registers its axis hooks; simplest proxy: check the script loaded
return document.querySelector('script[src*="jquery.flot.time"]') != null;
}
if (opts.xaxis && opts.xaxis.mode === 'time' && !flotTimeReady()) {
delete opts.xaxis.mode; // or abort with a clear message
} Try / catch
try {
$.plot('#chart', data, { xaxis: { mode: 'time' } });
} catch (e) {
if (/flot\.time/.test(e.message)) {
console.error('Include jquery.flot.time.js before plotting time axes');
} else throw e;
} Prevention
- Keep one shared include list: jquery.flot.js, jquery.flot.time.js, then app chart code.
- After flot upgrades, re-check that mode:'time' usage still has the plugin included.
- Add an integration smoke test that plots one time-series chart in CI.
When it happens
Trigger: $.plot(el, data, { xaxis: { mode: 'time' } }) with only jquery.flot.js loaded; including jquery.flot.time.js after the $.plot() call (too late); a typo in the plugin filename so it 404s; bundling that drops flot.time.
Common situations: Upgrading flot from 0.7 (time mode was built-in) to 0.8+ without adding the new plugin file; time-series dashboards where the include list was hand-maintained.
Related errors
- Invalid dimensions for plot, width = {width}, height = {heig
- Bootstrap's JavaScript requires jQuery
- Popover requires tooltip.js
- momentjs is required
- Canvas is not available. If you're using IE with a fall-back
AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14).
Data as JSON: /api/errors/7a380a68ff384513.
Report an issue: GitHub.