Ivan Nikitin Ivan Nikitin home facebook linkedin rss

Charting Puzzle

Thought today how I can use stacked bar charts and came to this idea. Here I made a little puzzle for you. I painted several cartoon characters using Chart JS library. Are you able to guess them?

The easy part was to configure a stackedbar chart. I made four div containers and initialized four charts. I took a code snippet from ChartJS docs and pasted it into my document four times: one for every div I have.

$("#divId").dxChart({
    dataSource: turtles,
    commonSeriesSettings: {
        argumentField: 'person',
        type: 'stackedBar'
    },
    series: [ ],
    legend: { visible: false },
    valueAxis: {
        grid: { visible: false },
        label: { visible: false }
    },
    argumentAxis: {
        label: { visible: false }
    },
    animation: { enabled: true }
});

Then I made an array of objects describing characters. An object for every character I had.

var turtles = [
    { person: 'michelangelo', green1: 4, orange: 4, green2: 2, yellow: 1, green3: 1 },
    { person: 'donatello', green1: 4, orange: 4, green2: 2, violet: 1, green3: 1 },
    { person: 'leonardo', green1: 4, orange: 4, green2: 2, blue: 1, green3: 1 },
    { person: 'raphael', green1: 4, orange: 4, green2: 2, red: 1, green3: 1 }
];

person is a value for argument axis. I use it to separate objects. If not set, dxChart will sum up values and display a single bar. Other object properties are more interesting.

I have to create a series object for every color I have. If a character uses the same color two or more times, I should have 2 or more series. So, I will make series called green1, yellow1, red2 and so on. You should order series as they appear on screen. If the character doesn't use a color, drop the related property.

So, for turtles series will be.

series: [
    { valueField: 'green1', color: '#33763d' },
    { valueField: 'orange', color: '#f0923d' },
    { valueField: 'green2', color: '#33763d' },
    { valueField: 'yellow', color: '#d2ca58' },
    { valueField: 'blue', color: '#236b83' },
    { valueField: 'red', color: '#954b2d' },
    { valueField: 'violet', color: '#544559' },
    { valueField: 'green3', color: '#33763d' }
]

That's simple.

comments powered by Disqus