Streaming live at 10am (PST)

Problem with flot charts and resizing

Hi all,
I´m working on a portal mockup that required some fancy charting. I use flotcharts and custom code to get the charts to work, which seems just fine (after a lot of trial and error:-)). I have a problem getting them to resize though and hope for some good idears from this forum.

What have I done:

  • Included all the flotchart as resource files in the body section (custom code)
  • Placed an embed element as a div where I want the chart in my webflow design with a name reference for the chart
  • Included a style section in the body code with the name refference and and hight & width properties
  • Included the flot script for the chart referencing the name used in the div and style

This works fine and the charts are plowed as expected. The problem is that even if I have set the dynamic size property in the script for the chart, the chart does not resize when the window changes of a different viewport is used.

I have tried the following without result, except for the chart not plotting at all:

  • Set the size of the embed element directly in the element (does not plot at all)
  • Used “canvas” instead of “div” in the embed element (does not plot at all)
  • Changed the style defined in the body for the element hight and width to % of space or minimum size (does not plot at all)

I´m not a developer, so I might be missing something obvious or use the wrong terms, but if you have any ideas, please let me know.

My style section defines the size as a fixed one and trying out the more dynamic options seems to make flot see the canvas as being of size zero. My gut feeling is the the flot chart can not get the correct size of the “canvas” when it is resized and that it might have to do with the underlying webflow functions (unknown to me).

Is there any ideas how to defined the “canvas size” as dynamic so the my flot script can pick it up and use the built in jquery.flot.resize.js?

Best regards

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here:

Thanks for the reply. I actually managed to fix this just after posting here (as often seem to happen:-)). I changed the “style” properties to;
height: 40 px,
width: 100 %

This solved the issue and the plots are resized as expected when the page size is changed.

Best regards

1 Like