Flotr2.js | xaxis labels not showing

Question

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>

JS

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.

Answer 1

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.