Welcome Guest Search | Active Topics |

chart resize issues
Options
Previous Topic Next Topic
ssc
#1 Posted : Sunday, February 19, 2012 4:53:49 AM(UTC)
Rank: Member

Groups: Registered
Joined: 2/19/2012(UTC)
Posts: 10

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
I noticed jqCharts make use of the entire space available in horizontal direction, but do not stretch all the way vertical direction; the chart is usually 250px high. Also, charts don't seem to resize themselves when I resize the browser window.
Why is that ? Do I have to enable that somewhere ? Could not find anything about resizing at all in the documentation...

I have created some kind of crude workaround:
Code:
// make jqChart use entire vertical space
$(document).ready(function(){
  $('#chart').attr('style', 'height: ' + window.innerHeight + 'px');
});

// resize the chart canvas when the browser window is resized
$(window).resize(function(){
  var style_string = 'width: ' + window.innerWidth + 'px; height: ' + window.innerHeight + 'px';
  $('#chart > canvas').attr('style', style_string);
});

This basically works, but it seems that instead of (or in addition to) resizing the chart canvas, the chart itself should be redrawn, so fonts, labels, axis intervals, etc. are adapted to the new size: When I e.g. resize the browser window from very large to very small, axis labels get so small they are barely legible. When I reload the page then, they're shown ok and also the intervals get updated.
Is there a way to explicitely trigger a chart redraw ?

I tried storing the jqChart object in a global variable to make it available in a resize handler and then call the chart update function with the data the chart already has, but I can't seem to get the data out of a chart:
Code:
var data = g_chart.data();
updateChart(data); // <-- doesn't work, data is not a simple array

Is chart auto-resize (and auto-redraw) somewhere on the product roadmap / todo list ?
Is there any workaround I can implement myself ?
Back to top
Dragan
#2 Posted : Sunday, February 19, 2012 3:42:26 PM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

You can use 'width' and 'height' settings of the jqChart:

Code:
$('#jqChart').jqChart({
            width: window.innerWidth,
            height: window.innerHeight,...


The chart needs to be recreated on every size change, so you might call the jqChart initialization on the window resize method.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
ssc
#3 Posted : Monday, February 20, 2012 10:28:36 PM(UTC)
Rank: Member

Groups: Registered
Joined: 2/19/2012(UTC)
Posts: 10

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Thanks, that makes the code a little cleaner. It does not solve the actual problem though: If I just set the chart to the new size in the resize handler like
Code:
function onWindowResize()
{
    $('#chart').jqChart
    ({
        width  : window.innerWidth,
        height : window.innerHeight
    });
}

then the chart seems to lose its data. It is drawn with the right size (from all I can tell), but axis and the chart itself are missing. As said earlier, one way would be to get the data from an existing graph and re-create the graph with the new size and the data, but I don't see how to access existing chart data. A much cleaner solution would anyway be to call resize on the chart with the new dimensions.
Back to top
Dragan
#4 Posted : Tuesday, February 21, 2012 2:57:52 PM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
I agree that the best approach here should be just set the new size and updating the jqChart. We’re working on improving jqChart with providing functionality for easy changing chart settings.

In a meantime when you configure the jqChart get a variable to it:

Code:
var jqChart = $('#chart').jqChart({…


after that change the onWindowResize function to:

Code:
function onWindowResize()
{
       var options = jqChart.options;
       options.width = window.innerWidth;
       options.width = window.innerHeight;

       $('#chart').jqChart(options);
}


Best Regards,
Dragan Matek
jqChart Inc.
Back to top
ssc
#5 Posted : Tuesday, February 21, 2012 7:03:20 PM(UTC)
Rank: Member

Groups: Registered
Joined: 2/19/2012(UTC)
Posts: 10

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Great, works for me, problem solved.
(The second line in the sample code should be options.height, though ;-)
Thank you very much for your help! :-)
Back to top
Users browsing this topic
Guest (3)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.107 seconds.