Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show data value instead of percentage in Flot pie chart

I'm using http://github.com/krzysu/flot.tooltip. It shows percentages of data as below. But i need to show actual values instead of percentages. How can i do this ?

chart

Json data

[{"data":350,"label":"Transport"},{"data":250,"label":"Meals"},{"data":250,"label":"Kitchen"},{"data":7280.5,"label":"Construction"},{"data":3725,"label":"Fuel"},{"data":160,"label":"Stationary"}]

Script

function make_chart() {

    $.ajax({
        cache : 'false',
        type : 'GET',
        dataType : 'json',
        url : "piechart",
        success : function(json) {

            var plotObj = $.plot($("#flot-pie-chart"), json, {
                series: {
                    pie: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true
                },
                tooltip: true,
                tooltipOpts: {
                    content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                    shifts: {
                        x: 20,
                        y: 0
                    },
                    defaultTheme: false
                }
            });             

        }
    });
}
like image 283
Bishan Avatar asked Dec 25 '22 07:12

Bishan


1 Answers

Just modify the the tooltipOpts: content property; replacing the %p with %y:

tooltipOpts: {
  content: "%y.0, %s", // show value to 0 decimals
  shifts: {
      x: 20,
      y: 0
  },
  defaultTheme: false
}

Fiddle here.

Or use a function for more flexibility:

content: function(label,x,y){
    return y+", "+label;
},

Fiddle here.

like image 53
Mark Avatar answered Jan 07 '23 01:01

Mark