{"record":{"id":"65460fd6a2ca99d2","repo":"dianping/cat","slug":"invalid-dimensions-for-plot-width-width-heig","errorCode":null,"errorMessage":"Invalid dimensions for plot, width = {width}, height = {height}","messagePattern":"Invalid dimensions for plot, width = (.+?), height = (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"cat-home/src/main/webapp/assets/js/uncompressed/flot/jquery.flot.js","lineNumber":135,"sourceCode":"\n\t\tthis.textContainer = null;\n\t\tthis.text = {};\n\n\t\t// Cache of text fragments and metrics, so we can avoid expensively\n\t\t// re-calculating them when the plot is re-rendered in a loop.\n\n\t\tthis._textCache = {};\n\t}\n\n\t// Resizes the canvas to the given dimensions.\n\t//\n\t// @param {number} width New width of the canvas, in pixels.\n\t// @param {number} width New height of the canvas, in pixels.\n\n\tCanvas.prototype.resize = function(width, height) {\n\n\t\tif (width <= 0 || height <= 0) {\n\t\t\tthrow new Error(\"Invalid dimensions for plot, width = \" + width + \", height = \" + height);\n\t\t}\n\n\t\tvar element = this.element,\n\t\t\tcontext = this.context,\n\t\t\tpixelRatio = this.pixelRatio;\n\n\t\t// Resize the canvas, increasing its density based on the display's\n\t\t// pixel ratio; basically giving it more pixels without increasing the\n\t\t// size of its element, to take advantage of the fact that retina\n\t\t// displays have that many more pixels in the same advertised space.\n\n\t\t// Resizing should reset the state (excanvas seems to be buggy though)\n\n\t\tif (this.width != width) {\n\t\t\telement.width = width * pixelRatio;\n\t\t\telement.style.width = width + \"px\";\n\t\t\tthis.width = width;\n\t\t}","sourceCodeStart":117,"sourceCodeEnd":153,"githubUrl":"https://github.com/dianping/cat/blob/e815e74d4c2dd74edac831241f1253fcc7d25381/cat-home/src/main/webapp/assets/js/uncompressed/flot/jquery.flot.js#L117-L153","documentation":"Flot's Canvas.resize refuses zero/negative dimensions: a plot needs a measurable placeholder. resize() is called on setup and on window resize with the placeholder's computed width/height; if the placeholder (or its parent) is hidden (display:none) or unstyled to 0 size, width/height evaluate to 0 and flot throws with the actual numbers, which is why the message is diagnostic.","triggerScenarios":"Calling $.plot(...) on a div inside a hidden tab/accordion/collapsed panel (display:none); placeholder with no CSS width/height and no explicit {width, height} options; plotting before the container is laid out (element detached from DOM); parent styles height:0 with overflow hidden.","commonSituations":"Charts on inactive jQuery UI / Bootstrap tabs — the classic flot issue; charts in modals initialized before the modal opens; responsive layouts that momentarily collapse the container on resize events.","solutions":["Initialize the plot when the container becomes visible (tab 'activate'/'shown.bs.tab', modal 'shown.bs.modal') instead of on page load.","Give the placeholder explicit dimensions: CSS (#chart{width:100%;height:300px;}) or options {width:600, height:300} (setCanvasDimensions), or set the placeholder's CSS width/height.","If display:none is required, temporarily show/measure/hide, or defer plotting; on window resize, skip redraw while dimensions are 0."],"exampleFix":"// before\n$.plot($('#chart-in-hidden-tab'), data, opts); // width=0, height=0 -> throws\n\n// after\n$('a[href=\"#tab2\"]').on('shown.bs.tab', function () {\n  if ($('#chart').width() > 0 && !chartPlotted) {\n    plot = $.plot('#chart', data, opts);\n    chartPlotted = true;\n  }\n});","handlingStrategy":"validation","validationCode":"function plotWhenVisible($placeholder, data, opts) {\n  var w = $placeholder.width(), h = $placeholder.height();\n  if (w > 0 && h > 0) return $.plot($placeholder, data, opts);\n  return null; // caller retries on tab/modal show\n}\n$('a[href=\"#tab2\"]').on('shown.bs.tab', function () {\n  if (!plotInstance) plotInstance = plotWhenVisible($('#chart'), data, opts);\n});","typeGuard":"function hasPlotDimensions(el) {\n  var $el = $(el);\n  return $el.is(':visible') && $el.width() > 0 && $el.height() > 0;\n}","tryCatchPattern":null,"preventionTips":["Init charts lazily on tab/modal/accordion show events, never on page load for hidden panes.","Give every placeholder a CSS height (flot cannot derive height from width).","In window-resize handlers, skip redraw while dimensions are 0."],"tags":["flot","layout","hidden-element","dimensions","charts","vendor"],"backgroundTag":null,"analyzedSha":"e815e74d4c2dd74edac831241f1253fcc7d25381","analyzedAt":"2026-08-14T14:22:34.512Z","schemaVersion":2},"datasetVersion":"2026-08-15T22:17:37.221Z"}