How to add jqplot pie chart labels with lines?

Question

I have a pie chart and I can add labels for it normal way.But I want to add labels with line as following.

I took this image from web as a example. here is my code ,

drawPieCharts = function(dev,title,data){
    $('#'+dev).empty();

    var plot = $.jqplot(dev, [data], {
        title: {
            text: title,   
            fontWeight: 'bold',
            fontSize : '16',
            show: true
        },
grid: {
    drawBorder: false, 
    drawGridlines: false,
    background: '#ffffff',
    shadow:false,
    //diameter : 30
},
axesDefaults: {

},
highlighter: {
      show: true,
      formatString:'%s , P%', 
      tooltipLocation:'n', 
      useAxesFormatters:false
    },
seriesDefaults:{
    renderer:$.jqplot.PieRenderer,
    rendererOptions: {
        showDataLabels: true,
        dataLabelThreshold: 0, 
         dataLabelPositionFactor: 1.05,
         dataLabels : mapSeperater(data)[0],
        padding: 2
    }
},

}); 

}

And also I have another problem I want to bold the title of the chart and in this way it doesn't work. Is there a way to do that?

Thank you.

Answer 1

i'm looking for the same, not successful yet. but for the title maybe you can try to style the div with the class "jqplot-title", that's where the title is rendered.

in jquery would be something like that:

$(".jqplot-title").wrap("<b></b>")

EDIT:

sorry i had no time to jsfiddle it, but you can try it and get the idea. looks a little awful but you can make it better.

what i did was putting labels of the slices outside the pie and draw some lines from the center to these labels.

..i came with something like this:

                series: [{
                renderer: $.jqplot.PieRenderer,
                rendererOptions: {
                    diameter: 140,
                    showDataLabels: true,
                    dataLabelThreshold: 0, //minimum area to show a label, (i want all the labels)
                    dataLabelPositionFactor: 2.3, //in function of the radius, how far show the label
                    dataLabels: 'label',
                    dataLabelFormatString: '%s',

                    //(just more options, etc, etc)


            plot = $.jqplot("myDivHere", [data], options).replot(); // <-- that's for me


            // ******************************
            // HERE COMES THE MAGIC:
            //


            var w = $("#myDivHere .jqplot-series-shadowCanvas").width();
            var h = $("#myDivHere .jqplot-series-shadowCanvas").height();
            x1 = (w/2);
            y1 = (h/2);


            var canvas = $("#myDivHere .jqplot-series-shadowCanvas")[0];
            var context = canvas.getContext('2d');

            $(".jqplot-pie-series.jqplot-data-label").each(
                function(){

                    var l = $(this).position().left;
                    var t = $(this).position().top;

                    console.log("x1, y1 are: ["+x1+", "+y1+"]\n l, t are ["+l+", "+t+"]");
                    context.beginPath();
                    context.moveTo(x1, y1);
                    context.lineTo(l, t);
                    context.stroke();
                });

I have no more time to work on this this week, so you could use it as awful it is and make it better. or wait for a better solution to show up.

Greetings!!

Ahh, and if you can make it better, please share it with me.