Viewed   66 times

I am using Chart.js for drawing pie chart in my php page.I found tooltip as showing each slice values.

But I wish to display those values like below image.

I do not know how to do this with chart.js.

Please help me.

My Javascript code:

function drawPie(canvasId,data,legend){
    var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");

    var piedata = [];
    var options =
        tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
    var pie = new Chart(ctx).Pie(piedata,options);
    if(legend)document.getElementById("legend").innerHTML = pie.generateLegend();

php code:

echo '<td style="text-align: right;"><canvas id="pie-canvas-'
    . $canvasId
    . '" width="256" height="256" ></canvas></td><td style="text-align: left;width:360px;height:auto" id="legend" class="chart-legend"></td></tr></table>';

     echo '<script type="text/javascript">drawPie('
    . $canvasId
    . ', '
    . $data3
    .', '
    . $legend
    . ');</script>';



From what I know I don't believe that Chart.JS has any functionality to help for drawing text on a pie chart. But that doesn't mean you can't do it yourself in native JavaScript. I will give you an example on how to do that, below is the code for drawing text for each segment in the pie chart:

function drawSegmentValues()
    for(var i=0; i<myPieChart.segments.length; i++) 
        // Default properties for text (size is scaled)
        var textSize = canvas.width/10;
        ctx.font= textSize+"px Verdana";

        // Get needed variables
        var value = myPieChart.segments[i].value;
        var startAngle = myPieChart.segments[i].startAngle;
        var endAngle = myPieChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        // Compute text location
        var posX = (radius/2) * Math.cos(middleAngle) + midX;
        var posY = (radius/2) * Math.sin(middleAngle) + midY;

        // Text offside to middle of text
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);

A Pie Chart has an array of segments stored in PieChart.segments, we can look at the startAngle and endAngle of these segments to determine the angle in between where the text would be middleAngle. Then we would move in that direction by Radius/2 to be in the middle point of the chart in radians.

In the example above some other clean-up operations are done, due to the position of text drawn in fillText() being the top right corner, we need to get some offset values to correct for that. And finally textSize is determined based on the size of the chart itself, the larger the chart the larger the text.

Fiddle Example

With some slight modification you can change the discrete number values for a dataset into the percentile numbers in a graph. To do this get the total value of the items in your dataset, call this totalValue. Then on each segment you can find the percent by doing:


The section here myPieChart.segments[i].value/totalValue is what calculates the percent that the segment takes up in the chart. For example if the current segment had a value of 50 and the totalValue was 200. Then the percent that the segment took up would be: 50/200 => 0.25. The rest is to make this look nice. 0.25*100 => 25, then we add a % at the end. For whole number percent tiles I rounded to the nearest integer, although can can lead to problems with accuracy. If we need more accuracy you can use .toFixed(n) to save decimal places. For example we could do this to save a single decimal place when needed:

var value = myPieChart.segments[i].value/totalValue*100;
if(Math.round(value) !== value)
    value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
value = value + '%';

Fiddle Example of percentile with decimals

Fiddle Example of percentile with integers

Monday, August 29, 2022

There is an exmaple on the highcharts website showing something similar. You can use the point/events/click function to trigger a new page load:

 plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        location.href = this.options.url;

Note, in this example, the URL is added to the series data:

 data: [{
            y: 29.9,
            url: ''
        }, {

You could replace this with generating a URL based on the point y value.

Wednesday, November 16, 2022

You can get the ID by this way, for more details and ajax part, check this fiddle, good luck.

$("#userMenu").children('li').click( function() {
    var rssId = $(this).children('a').attr('id');
Thursday, November 17, 2022

Convert to dataframe and then plot

socialIssue =
socialIssue$percent = round(100*socialIssue$Freq/sum(socialIssue$Freq), digits = 1)
socialIssue$label = paste(socialIssue$Var1," (", socialIssue$percent,"%)", sep = "")
pie(socialIssue$Freq, labels = socialIssue$label, col = cols)

Saturday, November 12, 2022

To "paint" a graph on android you can use a third-party-lib. All libs supports different types of charts.

There are some graph-libs for Android:

  1. afreechart is based on jfreechart. License: LGPL Version: 0.0.4

  2. AChartEngine
    License: Apache Version: 1.2.0 Maven: yes. (custom repo?)

  3. AndroidPlot License: Apache Version: 0.6.0 Maven: yes

  4. GraphView
    License: Apache? Version: ? Maven: ?

I've found not so much about it. But it seems to be free.

  1. DroidCharts License: LGPL Version: r2? Maven: ?

  2. Chartdroid
    License: Apache Version: 2.0.0 Maven: ?

Or you implements your own :) It's not the perferct answer, but maybe a good hint.

Wednesday, August 17, 2022
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :