Search code examples
javascriptd3.jsrickshaw

Error when attempting to initialize range slider on graph

I'm sure this was working yesterday and can't for the life of me work out what's changed.

I initialize a Rickshaw range slider with this code:

var preview = new Rickshaw.Graph.RangeSlider( {
graph: graph,
element: document.getElementById('preview'),
} );

But so long as those lines are present, I trigger this chain of errors (and my slider doesn't show up):

Uncaught TypeError: Cannot read property 'x' of undefined rickshaw.js:487
  (anonymous function) rickshaw.js:487
  dataDomain rickshaw.js:487
  Rickshaw.Graph.RangeSlider.Rickshaw.Class.create.build Rickshaw.Graph.RangeSlider.js:23
  Rickshaw.Graph.RangeSlider.Rickshaw.Class.create.initialize Rickshaw.Graph.RangeSlider.js:12
  klass rickshaw.js:182
  (anonymous function) chart:356

Based on my very limited JS knowledge it looks like it's hitting an issue when it tries to determine the min / max of the chart... which seems odd, given that the y-axis presumably does the same thing and it works fine. Any ideas what's going on?

You can see the code live here: http://azteccloud.com/chart

Solution

  • I was facing the same issue and after looking into the problem i have found the actual problem.

    When you initialize "Rickshaw.Graph.RangeSlide", you should have your "Rickshaw.Graph" initialized with some series data. Even if you don't have any data yet. you can initialize it with 0. e.g

    var seriesData = [{x:0,y:0}];

    This will resolve your error. Thanks