CODEWITHSUNDEEP
javascriptdata-visualizationflotr2
Nathan
Nathan

Reputation: 2387

Flotr2 colors not working

I just got a book called Data Visualization With Javascript by Stephen A. Thomas, and I'm working through the exercises. The first chapter is on Flotr2. Here is what the book told me to do:

var wins = [[[0, 13], [1, 11], [2, 15], [3, 15], [4, 18], [5, 21], [6, 28]]];
var wins2 = [[[0,28], [1,28], [2, 21], [3,20], [4,19]]];
var years = [[0, "2006"], [1, "2007"], [2, "2008"], [3, "2009"], [4, "2010"], [5, "2011"], [6, "2012"]];
var teams = [[0, "MCI"], [1, "MUN"], [2, "ARS"], [3, "TOT"], [4, "NEW"]];
window.addEventListener('load', function() {
    Flotr.draw(document.getElementById('chart2'), wins2, {
        title: "Premier League Wins (2011-2012)",
        colors: ['#89afd2', '#1d1d1d', '#df021d', '#0e204b', '#e67840'],
        bars: {
            show: true,
            barWidth: 0.5,
            shadowSize: 0,
            fillOpacity: 1,
            lineWidth: 0
        },
        yaxis: {
            min: 0,
            tickDecimals: 0
        },
        xaxis: {
            ticks: teams
        },
        grid: {
            horizontalLines: false,
            verticalLines: false
        }
    });
});

Now the only difference between this and what was in the book is that the book told me to do window.onload, and I used addEventListener instead. The book says that this should make a bar graph with multiple colors (the colors listed) but all my bars are the same color, which is the first color listed. I've tried everything, but nothing seems to make it work. Has anyone else encountered this problem with Flotr2? I'm using the latest version, so is it just a problem with Flotr2 that's new since the book came out? Or am I doing something wrong?

Upvotes: 2

Views: 367

Answers (2)

kangaechu
kangaechu

Reputation: 21

try this.

var wins2 = [[[0,28]],[[1,28]],[[2,21]], [[3,20]],[[4,19]]];

Upvotes: 2

chris van hooser
chris van hooser

Reputation: 388

I think it may have to do with your arrays...

var wins2 = [[[0,28], [1,28], [2, 21], [3,20], [4,19]]];

That makes an array of 1 array that has 4 arrays. So flotr is seeing you only have 1 index, which is why it uses just 1 color.

try

var wins2 = [[0,28], [1,28], [2, 21], [3,20], [4,19]];

Upvotes: 0

Related Questions