jQuery flot pie resize

Question

I have got the resize thing working but when i use the pie chart at first everyting is oke but when i resize the container i get a big sqaure chart instead of the round pie.

How is this possible to fix?

The JS code:

$("table.chart-pie").each(function() {
    var colors = [];
    $("table.chart-pie thead th:not(:first)").each(function() {
        colors.push($(this).css("color"));
    });
    $(this).graphTable({
        series: 'columns',
        position: 'replace',
        width : '100%',
        height: '250px',
        colors: colors
    }, {
        series: {
            pie: {
                show: true,
                pieStrokeLineWidth: 0, 
                pieStrokeColor: '#FFF',
                radius: 100,
                label: {
                    show: true,
                    radius: 3/4,
                    formatter: function(label, series){
                    return '<div style="font-size:11px; padding:2px; color: #FFFFFF;"><b>'+label+'</b>: '+Math.round(series.percent)+'%</div>';
                },
                    background: {
                        opacity: 0.5,
                        color: '#000'
                    }
                }
            }
        },
        legend: {
            show: false
        },
        grid: {
            hoverable: false,
            autoHighlight: false
        }
    });
});

When i set the width to 250px or someting then its working correct but i want that it be able to resize the chart

Answer 1

Well, have you tried to put the chart rendering into a function with parameters "width" and "height" in the resize function you said you managed to create?. So, every time your resize function is triggered, it will also trigger the graphic rendering. Make sure you destroy your graphic before rendering again.

Something like this:

$(window).resize(function(){
    var container_id = $('#your_container_id');
    container_id.empty();
    renderGraphic(container_id.width(),container_id.height());
})
function renderGraphic(gwidth,gheight){
   var colors = [];
   $("table.chart-pie thead th:not(:first)").each(function() {
    colors.push($(this).css("color"));
   });
   $(this).graphTable({
    series: 'columns',
    position: 'replace',
    width : gwidth, //<- parameter width
    height: gheight, //<- parameter height
    colors: colors
   }, {
    series: {
        pie: {
            show: true,
            pieStrokeLineWidth: 0, 
            pieStrokeColor: '#FFF',
            radius: 100,
            label: {
                show: true,
                radius: 3/4,
                formatter: function(label, series){
                return '<div style="font-size:11px; padding:2px; color: #FFFFFF;"><b>'+label+'</b>: '+Math.round(series.percent)+'%</div>';
            },
                background: {
                    opacity: 0.5,
                    color: '#000'
                }
            }
        }
    },
    legend: {
        show: false
    },
    grid: {
        hoverable: false,
        autoHighlight: false
    }
}); 
}