Flotr2.js | xaxis labels not showing

I am trying to reproduce an introductory example from the book Data Visualization with JavaScript by Stephen A. Thomas (No Starch Press, 2015)

JSFIDDLE.

Here is the code:

HTML

<div id="chart" style="width:600px;height:300px;"></div>

var wins = [[
    [2006, 13],
    [2007, 11],
    [2008, 15],
    [2009, 15],
    [2010, 18],
    [2011, 21],
    [2012, 28]
]];
var years = [
    [0, "2006"],
    [1, "2007"],
    [2, "2008"],
    [3, "2009"],
    [4, "2010"],
    [5, "2011"],
    [6, "2012"]
]

Flotr.draw(document.getElementById("chart"), wins, {
    bars: {
        show: true,
        barWidth: 0.5
    },
    yaxis: {
        min: 0,
        tickDecimals: 0
    },
    xaxis: {
        ticks: years
    }
});

The problem I am facing is that the label (years) are not showing for the xaxis.

What is causing the years data not to populate?

EDIT: The years are not showing in Firefox, and the screen is completely blank in Chrome.

Solution

You have to change the wins data so that it uses the same 0-6 indexing that years uses so that the two data sets are mapped together correctly. Changing that will get the years to show up on the x-axis.

var wins = [[[0, 13], [1, 11], [2, 15], [3, 15], [4, 18], [5, 21], [6, 28]]];
var years = [[0, "2006"], [1, "2007"], [2, "2008"], [3, "2009"], [4, "2010"], [5, "2011"], [6, "2012"]];

Flotr.draw(
	document.getElementById("chart"),
	wins,
	{
		title: "Manchester City Wins",
		colors: ["#89AFD2"],
		bars: {
			show: true,
			barWidth: 0.5,
			shadowSize: 0,
			fillOpacity: 1,
			lineWidth: 0
		},
		yaxis: {
			min: 0,
			tickDecimals: 0
		},
		xaxis: {
			ticks: years
		},
		grid: {
			horizontalLines: false,
			verticalLines: false
		}
	}
);

<script src="https://rawgit.com/HumbleSoftware/Flotr2/master/flotr2.min.js"></script>
<div id="chart" style="width:600px; height:300px;"></div>

Chrome was giving me an error that said that Flotr wasn't defined, so I changed the source to point to https://rawgit.com/HumbleSoftware/Flotr2/master/flotr2.min.js and it was imported correctly on JSFiddle and here on the Stack Snippet above.