flot pie chart with long labels rendering issue

3
votes

i plotted a flot pie chat with long labels, and it came out ugly, i thought it is possible to display the label far right away from the pie char or below the pie chart. the javascript am using is

function onSuccess(series) {
            var tickLabels = [];
            var pieData= [];
            for (var i =0;i<series.length;i++){
                tickLabels.push([i,series[i][0]]);
                var obj = {};
                obj['label']=series[i][0];
                obj['data']=series[i][1];
                pieData.push(obj);
                series[i][0] = i;
            }
            var data = [series];
        var pieArea = $("#pieChart");  

        pieArea.css("height", "400px");  
        pieArea.css("width", "600px"); 


            $.plot( $("#barChart"), data, {
        series: {
         bars: {
            show:true,
            barWidth: 0.5,
            align: "center"
         },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        xaxis: {
            labelWidth:12,
            labelAngle: 45,
            ticks: tickLabels
        }
        } );

The chart the ugly pie chart

does anyone know of any solution to this

2
javascriptjquerychartsflotpie-chart

2 Answers

8
votes

You can put the legend in a different container and place it wherever you want, using CSS.

legend: {
    container: '#graphLegend'     
}

From the API documentation:

If you want the legend to appear somewhere else in the DOM, you can specify "container" as a jQuery object/expression to put the legend table into. The "position" and "margin" etc. options will then be ignored. Note that Flot will overwrite the contents of the container.

I updated Mark's fiddle to demonstrate this alternative.

4
votes

You can do this with a combination of the legend's position and margin properties:

For instance, this would push it 400 pixels to the right of the northwest corner.

legend: {
    position: 'nw',
    margin: [400,0]     
}

See fiddle here.