flapane Posted February 19, 2015 Report Share Posted February 19, 2015 My websites features jQuery and a responsive layout. How can I make the plot automatically resize itself? <div id="ChartDiv1" style="width:99%;height:400px"></div> This is the only element of the website that doesn't resize dinamically whenever I change the size of the browser's window. Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted February 19, 2015 Report Share Posted February 19, 2015 As far as I know there is no event on an element when it is resized but you can attach to the window resize event. e.g. $(window).resize(function() { if (chart1 != null) chart1.doUpdate(true); }); Note that if the browser sends this event while the window is being resized, and your page have lots of content, performance might not be ideal, you could start/reset a time in the resize function so that you delay the chart repainting until the window stops resizing. var timerResize = null; $(window).resize(function() { if (chart1 != null) { if (timerResize != null) clearTimeout(timerResize); timerResize = setTimeout(function() { chart1.doUpdate(true); }, 250); } }); JuanC Quote Link to comment Share on other sites More sharing options...
0 flapane Posted February 19, 2015 Author Report Share Posted February 19, 2015 Thanks for your fast answer. I tried, but Firebug console throws an error: TypeError: ChartDiv1.doUpdate is not a function I wonder if the function is obfuscated in the most recent version of jchartfx? Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted February 19, 2015 Report Share Posted February 19, 2015 We stopped obfuscating doUpdate in version 7.2 If you are using an older version you might have to use chart._ud(true) Note that the doUpdate (or _ud) function is exposed by the chart object not the div. chart1 in my sample is the result of new cx.Chart() JuanC Quote Link to comment Share on other sites More sharing options...
0 flapane Posted February 19, 2015 Author Report Share Posted February 19, 2015 I'm using the last jchartfx build. I thought that chart1 stood for the div id and not the result of cfx.Chart(). I tried using the actual chart name, from var chartok = new cfx.Chart(); but I got a: chartok is not defined error. Quote Link to comment Share on other sites More sharing options...
0 JuanC Posted February 20, 2015 Report Share Posted February 20, 2015 You have to make sure the chartok variable is defined globally or that you keep a reference to it. If you are declaring var chartok = .... inside a function, the chartok variable will not be defined outside such function. JuanC Quote Link to comment Share on other sites More sharing options...
0 flapane Posted February 20, 2015 Author Report Share Posted February 20, 2015 Thanks, it work great. My plots are enclosed in a function loadChart(){} window.onload function in order to avoid adding the onload attribute in the <body> tag, which is something I can't do it. Now I've moved the variables right before the loadChart() function. I didn't pay attention to the fact that the variable was inside a function, I'm not by any means a js expert. Thanks Quote Link to comment Share on other sites More sharing options...
Question
flapane
My websites features jQuery and a responsive layout.
How can I make the plot automatically resize itself?
This is the only element of the website that doesn't resize dinamically whenever I change the size of the browser's window.
Link to comment
Share on other sites
6 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.