0

I am trying to display a morris bar graph using two colors which represent the state of the items (bars). For example, lets say I have 5 members (A, B, C, D, E). On the left side I have their heights. The javascript code that accomplishes this for me is the following. 

Morris.Bar({
    element: 'members-chart',
    data: [
        <c:forEach items="${Members}" var="member">
            {
                member_name: "${member.name}",
                height: "${member.height}",
                active: "${member.active}"
            },
        </c:forEach>
            ],
    xkey: 'member_name',
    ykeys: ['height'],
    labels: ['Height'],
    pointSize: 2,
    hideHover: 'auto',
    resize: true
});

Now you will see that I have placed active: "${member.active}" in there however it isn't really doing anything. I would like to change the color based on whatever value this is. For example, if the memberA.active = true, the color should be Blue and if memberB.active = false, the color should be grey. I am unsure if I can somehow use barColors functions to solve my issue but believe me that I have tried it.

also looked at Varying bar colors with morris.js bar chart?

Any help will be greatly appreciated. Just point me in the right direction! Thank you!

Community
  • 1
  • 1
Bhavik P.
  • 905
  • 3
  • 10
  • 28

1 Answers1

0

Your data array is invalid since you add a comma after the last entry. Use varStatus on forEach and check for the last iteration to set the comma.

        <c:forEach items="${Members}" var="member" varStatus="status">
            {
                member_name: "${member.name}",
                height: "${member.height}",
                active: "${member.active}"
            }${!status.last ? ',' : ''}
        </c:forEach>
Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102