schme16 / chart.js-rangeslider Goto Github PK

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!

Seems fine in other browsers and when a linear Y axis is used.

Only seems to be a problem when the slider "maximum" is changed. Altering the "minimum" works ok.

I am able to redraw chart by destroying previous chart but the rangeslider is getting overlapped and both rangesliders are visible after chart update. how to remove old rangeslider?

In the description, it seems to indicate that other chart types are available:
chartType: 'Line', //Which Chart.js chart you want (eg. Lie, Bar, Pie, etc.)

Changing this variable appears to have no affect on the actual chart type. Is this intended?

Hi.
In an attempt to update my chart, I'm getting this error that scope.chart.destroy is not a function.
Thanks in advance for the help.

According the demo:
https://jsfiddle.net/schme16/xfyvvup8/20/

I cant retrive back the last value, example 2020 year data. To get it, i need to reset init to [0,20], and then the 2020 year data is showed. After slide to less than 2020, the 2020 year data disapear. What is happend?

Whenerever datasets contain no pointBackgroundColor and pointBorderColor options RangeSlider fails to instantiate.

When i use the following options
responsive:true,
maintainAspectRatio: false

the chart is growing more. just the width is working

If you look at the code of example JSfiddle: https://jsfiddle.net/schme16/xfyvvup8/ you will notice that the last entry in the X axis is 2020.

However, if you slide the rightmost slider to the right you will see you can never reach the year 2020. It is never shown.
This is also happenning to the example I am building.

If you override the code "initial: [3, 10]" to (for example): initial: [3, 10000] initially the year 2020 will appear but that creates another bug because if you try to slide the rightmost slider to the right it will go off chart.

Something is wrong ....

Hi,
Im working with this library in one web project, but i have issues on some mobile devices like iPhone 11, iPhone 11 pro and iPhone X. Nevertheless, in iPhone 11 pro max and all desktop works perfectly.

I have a function that is:
this.rangeSliderChart.sliderElement[0].noUiSlider.on('change', () => {
/* do something*/
}

This function do something everytime that the slide handle is moved. I prove with another noUiSlider events but this is not working in more devices that have worked with 'change' event.

Do you know if this is a bug of this library or is it a conflict between devices?

Thanks in advance.

When creating a chart with a slider, the chart is not displayed in a number of cases until the position of the slider is changed. I think this is due to the creation of two objects of Chart class within the same context (lines 3 and 29 of RangeSlider-core.js):

chartProto: new Chart(opts.chartCTX),

ranger.chart = new Chart(ctx, {

As far as I understand, the first object is created only in order to update width of the corresponding canvas element for the slider element to occupy the corresponding space. If this is the case, then the first Chart is not necessary to create, but instead move line 89 a little back before editing of css:

	ranger._create()

	ranger.sliderElement
		.addClass('range-slider')
		.css({
			width: opts.chartCTX.canvas.width - 50
		})

	//TODO: add rangeslider width adjustment
	$(window).on('resize', function () {
		ranger.sliderElement.css({
			width: opts.chartCTX.canvas.width - 50
		})
	})

	return ranger

In this case width of appropriate canvas element would be properly updated, so the width of the slider element will be the same as it was intended.

I have installed through npm.

but when I try to use it through:
import * as RangeSlider from 'chart.js-rangeslider/dist/RangeSlider-minimal.min'

and try

var sliderOpts = {
  chartData: this.chart.config.data, //The same data you give to Chart.js
  chartOpts: this.chart.config.options, //Your Chart.js options
  chartType: this.chart.config.type, //Which Chart.js chart you want (eg. Lie, Bar, Pie, etc.)
  chartCTX: this.ctx, //your canvas context

  class: 'my-chart-ranger', //Specifies a custom class you want applied to your sliders

  initial: [3, 10] //Which data points to start the sliders on
};

let test = new RangeSlider.RangeSliderChart(sliderOpts)

it can't find RangeSliderChart.
Any solution on how to solve this?
Thanks in advance

Hello,
Here is my code: https://www.podzielsiehistoria.pl/Chart/ParishStatistics?parishId=1

Everything is ok, when there is no tooltip customization properties declared in the 'option' section. After the declaration of "mode: 'index' " a tooltip doesn't work. The same issue is with every other declaration of the tooltip property. Have somebody an idea what is going on?
The same issue is when you try to customize tooltip here: http://jsfiddle.net/schme16/xfyvvup8/

Another issue is a display problem on mobile devices. Loaded chart is not displayed. When you tap on the screen everything starts to be displayed properly. It must be some kind of refreshing problem.

Will be gratefull for your help,

Jacek

I am getting this error when I place data into the rangerslider object. I don't know why it's saying it's circular.

Uncaught TypeError: Converting circular structure to JSON RangeSlider-all.min.js:18617
at JSON.stringify ()
at Object._getData (RangeSlider-all.min.js:18617)
at Object._create (RangeSlider-all.min.js:18617)
at new RangeSliderChart (RangeSlider-all.min.js:18617)
at readings.php?start=2018-06-18T09%3A58&end=2018-06-18T09%3A59:157
_getData @ RangeSlider-all.min.js:18617
_create @ RangeSlider-all.min.js:18617
RangeSliderChart @ RangeSlider-all.min.js:18617

Could you please publish this to the npm packages?

Hi,

When I use the regular new Chart(), my chart has a 'normal' size, but when I use the new RangeSliderChart() with the same chart options, it's a lot taller and spaced out.
What could be the cause?

Best regards,
Tom