Morris js Display values in percentage format

Question

I am drawing some charts for a school project pulling data from a mysql database. Here is what I've done so far:

DONUT CHARTS

JS CODE:

Morris.Donut({
    element: 'donut-quanti',
    data: [
    {label: "USE FACEBOOK", value: <?php echo $fb_yes;?> },
    {label: "DON'T USE FACEBOOK", value: <?php echo $fb_no;?>}
    ]
    });

BAR CHARTS

JS CODE:

Morris.Bar({
        element: 'bars-status',
        data: [
        {x:'RARELY',a:<?php echo $fb_rar;?>},
        {x:'EV WEEK.',a:<?php echo $fb_ew;?>},
        {x:'EV DAY',a:<?php echo $fb_ed;?>},
        {x:'MULT. TIMES PER DAY',a:<?php echo $fb_mtd;?>}                   
        ],
        xkey:'x',
        ykeys:'a',
        labels:['TOTAL']
        });

Is there a way to display the numeric values (rapresented by the php variables $fb_*) IN PERCENTAGE FORMAT from javascript code (not echoing variable/total * 100 in php ) ?

Gallicanism

are you trying to format the axis, or the number that shows up when the mouse hovers over a point? – Dx

the number that shows up when the mouse hovers – Gallicanism

Answer 1

For the donut you need to use the formatter parameter

formatter: function (value, data) { return (value/total *100) + '%'; }

See: http://morrisjs.github.io/morris.js/donuts.html

---

For the bar you need to use hover callback

hoverCallback: function (index, options, content) {
  var row = options.data[index];
  //assumes you have already calculated the total of your own dataset
  return (value/total *100)+'%';
}

See: http://morrisjs.github.io/morris.js/bars.html

Dx

I read the documentation but I can't understand that part...what is y referring to in the donut chart example? – Gallicanism

its just a function argument referring to the "value" part of a donut {"label":"value"} pair, it could be anything but the function docs use y. I've edited that one to maybe make it clearer – Dx

Morris.Donut({ element: 'donut-quanti', data: [ {label: "USANO FACEBOOK", value: <?php echo $fb_si;?> }, {label: "NON USANO FACEBOOK", value: <?php echo $fb_no;?>} ] formatter:function(value,data){return 'value*<?php echo $v_android;?>/100'+'%';} }); – Gallicanism

There is an error in your answer for the donut, it should be formatter: function (value, data) { return value/100 + '%'; } (remove the strings around value / 100) – Paramilitary

@DiamondFox thanks, you are correct there. Also, I'm looking at this, shouldn't it be something like (value/total * 100)+'%'? – Dx

Yes you also need the brackets. I had put them in on mine without even thinking! Good spot. – Paramilitary

For both examples you need to calculate the 'total' somewhere first. – Oldest

Answer 2

To add the percentage symbol, please use this property. I did not find this in the docs but it works perfectly. postUnits: ["%"]

Boyes

Answer 3

donutChartOptions = {
    resize: true,
    colors: ["#8e54e9", "#4776e6"],
    formatter: function (value) { return (value) + '%'; }
}

Pittman

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. – Shelba