Canvas context is not recognized by RangeSlider

[m-oliv]

I'm trying to use Chart.js-RangeSlider in order to create a chart similar to the one in your examples. However, I get this error: Cannot read property 'addClass' of null at new RangeSliderChart (RangeSlider-all.min.js:14767)

Upon further inspection, I realized that the error occurs in this line of RangeSlider-all.min.js: return ranger.sliderElement.addClass("range-slider").width(opts.chartCTX.canvas.width),

I am obtaining my canvas context as: graphicContextLines = $('graphicLines').getContext('2d');

And I am creating my chart using this code:

var options = {responsive: true};

$scope.chartGraphicLines = Chart.Bar(graphicContextLines, {
                                data: $scope.data[1],
                                options: options
     }
);

I'm creating a RangeSlider object using this block of code:

var sliderOpts = {
                            chartData: $scope.data[1],
                            chartOpts: options,
                                chartType: 'Bar', 
                                chartCTX: graphicContextLines, 
                                initial: [3, 10] 
};

rs = new RangeSliderChart(sliderOpts);

I re-checked my code and verified that my canvas context does indeed contain info and thus is not null. So, the bug might be in RangeSlider-all.min.js.

If I am doing anything wrong, please let me know so I can refactor my code and try again.

Thanks in advance!

[schme16]

Looking at your example above it looks like you've got a couple of syntax issues that solving should fix things up.

The first is how you're getting the canvas $('graphicLines') that's the tag selector, not a class ($'. graphicLines')) or id $('#graphicLines') selector. Which more than likely means jQuery ins't returning anything.

Second is how you're getting the context, jQuery doesn't actually have a built in for getting canvas context, you'd need to do something like this: $('. graphicLines')[0].getContext('2d'), which selects the actual DOM element out of the jQuery array, then gets the context.

The rest seems ok at first glance

Here's a altered version of the demo that is clearer for your situation: https://jsfiddle.net/schme16/g2q1fLfo/1/

Hope this helps!

[m-oliv]

@schme16 thanks for answering!

I tried to get the context using $('#graphicLines')[0].getContext('2d'), as you suggested. However, I still got an error (Cannot read property '0' of null).

I forgot to mention before, but I do have this function:

var $ = function (id) {
    return document.getElementById(id);
};

that is the reason why I can access the canvas context using graphicContextLines = $('graphicLines').getContext('2d');

I triple checked using Chrome's dev tools, and graphicContextLines is not null or undefined:

Unfortunately, I still get the exact same error as before...

Is there any other trick that I can try in order to get RangeSliderChart to work?

Thanks in advance!

[schme16]

You might have to post a more complete example of how you're using it, before I can really tell where things go wrong: http://codepen.io/