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> </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> </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> </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
Big thank you to @WillParky93
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:
The change is in
.text(label['label'])
which is now.text(label['value']+" "+label['label'])