Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rounding results in highcharts jquery script

I know this is a bit out there... but gonna ask anyways. I'm using highcharts jquery script (http://www.highcharts.com/) to generate a pie chart. I am trying to round off the number results in the pie chart and cannot find any documentation to do so. I'm stuck!

My data looks something like this:

data: [
    ['Equity',   3],
    ['Cash',     6]
]

And the pie chart outputs: 33.333333333333 and 66.666666666666

I'd rather get the results rounded up and down respectively so it reads and shows 33 and 64. Does anyoone know how this can be set up in highcharts?

like image 834
Robert E Avatar asked Jan 31 '12 19:01

Robert E


5 Answers

In in the tooltip option in the configuration object use Math.round() in the formatter function.

   tooltip: {
     formatter: function() {
        return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
     }
  },
like image 65
Yanofsky Avatar answered Oct 31 '22 00:10

Yanofsky


tooltip: {
  valueDecimals: 2
},
like image 24
caktux Avatar answered Oct 31 '22 00:10

caktux


There's a numberFormatfunction available in the Highcharts API that you can use (see http://www.highcharts.com/ref/#highcharts-object).

Quoted from API doc:

numberFormat (Number number, [Number decimals], [String decimalPoint], [String thousandsSep]) : String

Formats a JavaScript number with grouped thousands, a fixed amount of decimals and an optional decimal point. It is a port of PHP's function with the same name. See PHP number_format for a full explanation of the parameters.

tooltip: {
    formatter: function() {
        return ''+ this.series.name +''+
            this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions';
    }
}, ...

Parameters

  • number: Number The raw number to format.
  • decimals: Number The desired number of decimals.
  • decimalPoint: String The decimal point. Defaults to "." or to the string specified globally in options.lang.decimalPoint.
  • thousandsSep: String The thousands separator. Defaults to "," or to the string specified globally in options.lang.thousandsSep.

Returns

A string with with the input number formatted.

like image 38
eolsson Avatar answered Oct 31 '22 00:10

eolsson


Instead of use formatter you can set yDecimals as 2:

tooltip: {
    yDecimals: 2
}

yDecimals: Number
How many decimals to show in each series' y value. This is overridable in each series' tooltip options object. The default is to preserve all decimals.

like image 6
Ricardo Alvaro Lohmann Avatar answered Oct 31 '22 00:10

Ricardo Alvaro Lohmann


tooltip: {
    formatter: function() {
        return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 +' %';
    }
},
like image 4
Batjaa Avatar answered Oct 31 '22 02:10

Batjaa