Dynamically change the width of Envision Finance using Javascript

[Paul Kim]

Hi, what would be the best way to dynamically change the width of Envision Finance using Javascript? The Envision Finance demo sets the width to 600px using css (i.e., .envision-finance {width: 300px}). When I resize the visual using css, it works fine. But, I would like to dynamically resize the Finance template when the user resizes the browser. I've tried to set the width using jQuery but it does not render correctly (i.e., $('.envision-finance').css({width: 300});). I have attached an image to show the problem. When the visual is resized from 600px to 300px, the visual does not completely get resized. Is there is a better way or is this not supported/possible? Thanks.

[Carl Sutherland]

Hello, could you fork this with your issue?  http://jsfiddle.net/cesutherland/LurmY/49/

-Carl

[Paul Kim]

Hi, I have forked this:  http://jsfiddle.net/LurmY/71/. I am using jQuery and setTimeout() to resize the visual to 300px.

[Arun Jain]

I have the same question. I want the chart to be responsive, catering to the different target screens, but can't figure out how to do the same. The div width is fixed at 600px

[MT]

Is it possible to change the height too?

[Nicolas Mercky]

Hi,

In my opinion, you have to call the draw() function of the envision components, on window resize event like this (probably coupled with a timeout function for performance...) : 

http://jsfiddle.net/LurmY/116/

But there is still an issue with the "connection" component which does'nt resize properly...