Skip to content
Advertisement

How can I add a number to my morris.js donut chart legend?

Sam

I have several morris.js charts that populate from my databases depending on certain search terms. Im using the following code to build a “Legend” for my donut charts. The code works fine but Im struggling with adding both a number and text, I’m getting a console error:

ReferenceError: value not defined

Here is the code I’m currently using (works great):

// Build the Donut:
var donut = Morris.Donut({
    element: 'donut',
    data   : donutParts,
    colors: color_array
});
// Build the Legend:
donut.options.data.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label['label']).prepend('<i>&nbsp;</i>');
    legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
    $('#legend').append(legendItem)
})

This will give me a legend with matching color squares with the appropriate labels eg:

[red] UK

But I want:

[red] # UK

I’ve tried using .integer and other variations like so:

// Build the Donut:
var donut = Morris.Donut({
    element: 'donut',
    data   : donutParts,
    colors: color_array
});
// Build the Legend:
donut.options.data.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label['label']).integer(['value']).prepend('<i>&nbsp;</i>');
    legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
    $('#legend').append(legendItem)
})

But this gives me the error that value is not defined, i want to take the value(v) from donutParts

Here is my donutParts variable:

// Fetch the data to populate the donut chart:
var chartData = JSON.parse( $('#chartData').val() );

// Break up the object into parts of the donut:
var donutParts = [];
$.each( chartData, function(k,v){
    donutParts.push({
        label: k,
        value: v
    });
});

Any help? cheers!

ANSWER

The following code produces the desired output:

// Build the Legend:
    donut.options.data.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label['value']+" "+label['label']).prepend('<i>&nbsp;</i>');
    legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
    $('#legend').append(legendItem)
    })

This is a SS of the legend output after implementing the given answer https://ibb.co/cYMCbk

Big thank you to @WillParky93

Advertisement

Answer

So what I said in the comments was technically wrong but after further reading this is what the ‘donut.options.data.forEach’ is doing.

Create an object dom of <span></span> -> add the text from label[‘label’] (which appears to be UK in your example) -> add some <i> tags.
THEN
Find the newly created tags -> add the CSS rule for background colour
THEN
add it to your #legend

So the solution was actually more simple when thinking of it like this; the answer be just this: 

    // Build the Legend:
    donut.options.data.forEach(function(label, i){
    var legendItem = $('<span></span>').text(label['value']+" "+label['label']).prepend('<i>&nbsp;</i>');
    legendItem.find('i').css('backgroundColor', donut.options.colors[i]);
    $('#legend').append(legendItem)
    })

The change is in .text(label['label']) which is now .text(label['value']+" "+label['label'])

Advertisement