Problems with variables in dynamic Morris.js graph building

Question

I'm trying to build a Graph using Morris.js and Raphael.js Basically I would like JQuery to get a value from a in my page, calculate the difference between 100 and that value and build the graph…

My html:

<div id="donut-example">81</div>

My jquery:

var perc = $('div#donut-example').text();
var perc2 = 100 - perc;
Morris.Donut({
element: 'donut-example',
data: [
{label: "Abbiamo raccolto il", value: perc},
{label: "Ci resta da raccogliere il", value: perc2},
],
colors: ['#D58025','#37619d']
});

Please check this jsfiddle: http://jsfiddle.net/HeNCQ/5/

Basically, if I force the values in the Morris.donut function as numbers it works beautifully and constructs the complete donut graph, but if I get the values into variables, the graph just doesn't make sense, as the two values are tiny.

Answer 1

You should give integers to the value-variable. Thus a quick and dirty fix would be to convert the perc to an integer:

perc = parseInt(perc);