I initialize noUiSlider with data
var settings = {
connect: "lower",
range: {
max: 87654567890,
min: 0
},
start: 30679098762,
step: 1
}
after initialization slider value is 30679098761.50 why?
Demo here - https://jsfiddle.net/serGlazkov/yrppsmvo/5/
Numbers that large cannot be accurately represented on the sliders width (say 300px can't reasonably be divided by 87654567890).
The solution is using a small number range, and doing a looking in an array to find the large value:
var range = ['x','x2','x3',...];
bigValueSlider.noUiSlider.on('update', function ( values, handle ) {
bigValueSpan.innerHTML = range[values[handle]];
});
Have a look at this example in the documentation of how to deal with it.
this is a bug noUiSlider, fixed in 8.4.0 version
Related
Animating with jQuery is straightforward. Here's an example of animating a number from 0 to 1000 over 2 seconds:
var $h1 = $('h1'),
startValue = parseInt($h1.text(), 10),
endValue = parseInt($h1.data('end-value'), 10);
$({ int: startValue })
.animate({
int: endValue
}, {
duration: 2 * 1000,
step: function () {
$h1.text(Math.ceil(this.int));
}
});
Working example: http://codepen.io/troywarr/pen/NpjyJE?editors=1010#0
This animation looks nice, but makes it difficult to read the number at any point during the animation, as the next number replaces it within milliseconds. Ideally, I'd like to animate the number over the same length of time but using fewer steps (increasing the length of the update interval), so that it's easier to read the number at a glance as it animates.
It doesn't appear that jQuery offers direct control over the number of steps in the animation, nor the update interval; it only seems to accept a step function that receives an interpolated value.
Is there a way to adjust the number of steps that jQuery uses to interpolate the animation over its duration?
Here is an approach that I used to simulate this, which probably works well enough for everyday purposes. This isn't ideal from a performance standpoint, though, because jQuery still calls the step function the same number of times as it would have originally.
var $h1 = $('h1'),
startValue = parseInt($h1.text(), 10),
endValue = parseInt($h1.data('end-value'), 10),
stepCounter = 0,
showNthStep = 8;
$({ int: startValue })
.animate({
int: endValue
}, {
duration: 2 * 1000,
step: function () {
if (stepCounter++ === showNthStep) {
$h1.text(Math.ceil(this.int));
stepCounter = 0;
}
},
complete: function () {
$h1.text(Math.ceil(this.int));
}
});
Working example: http://codepen.io/troywarr/pen/NpjYWo?editors=1010#0
This uses the variable stepCounter to count the calls to the step function and only update the number every 8th time (per showNthStep).
Note that the complete function is necessary to update the number one final time if the step function isn't called a multiple of 8 times.
Just use in front of your code
jQuery.fx.interval = 1000;
Default is 13 millisecounds
But the disadvantage is a global setting for all JQuery animations.
Is there any way in ChartJS to change the 0 (1st number on the Y axis Scale) into a dollar sign? -> $
I manage to customize it but I cant figure out how to change 1 number into a different symbol.
var options = {
pointDotRadius : 6,
pointDotStrokeWidth : 2,
datasetStrokeWidth : 12,
scaleOverride: true,
scaleSteps: 2,
scaleStepWidth: 500,
scaleStartValue: 0
}
I ve read somewhere about scaleLabel. But I can't understand how it works or even if thats what I need. Or should I just write scaleStartValue: null and just add it with html and css? (I mean thats the solution if ChartJS doesnt have such feature)
Could someone help me out? In case the scaleLabel is to be used, please do not just write the answer but I will need an explanation for how to use it. It will be needed for my future projects.
Thank you in advance.
You can keep track of the minimum value and set the label to $ if the value passed into the scaleLabel function is the minimum value.
Your code should look something like this :
var min = Infinity;
var myBarChart = new Chart(ctx).Bar(data, {
scaleLabel: function(e) {
if (Number(e.value) < min)
min = Number(e.value);
return (Number(e.value) === min) ? '$' : e.value;
},
});
If you actually know your minimum value, you could just check for that instead.
See also this Fiddle!
I've working on a thumb slider using yui/alloyui. According to the UC, the min and max parameters in the slider should be passed dynamically which means that I cannot hardcode them in the script. Reviewing the specs, it says the slider min, max, value parameters only accept numbers, not expressions. Can anyone help me accomplish this?
<code>
mySlider = new Y.Slider({
//min: 100, This works
//max: 800, This works
//value: 300, This works
min: minValue, //Using a variable does not work
max: maxValue, //Using a variable does not work
value: (maxValue - minValue)/2, //Using an expression does not work
majorStep: 50,
minorStep: 50,
length: Y.one('#sliderParent').getComputedStyle('width')
});
</code>
This is the jsfiddle: http://jsfiddle.net/bpkscskg/
Thanks for your help!
If you use an integer variable it should work. For example
// my Variables
var myMin=+valMinAmount;
var myMax=+valMaxAmount;
xSlider = new Y.Slider({
//min:100,
min: myMin,
max: myMax,
//value:
majorStep: 50, //amount to increment/decrement the Slider value when the page up/down keys are pressed
minorStep: 50, //amount to increment/decrement the Slider value when the arrow up/down/left/right keys are pressed
length: Y.one('#sliderParent').getComputedStyle('width') // for responsiveness
});
I have a product to add into the store, where there are two input fields priceBase and priceFinal. First is without TAX, second is with TAX.
While using this javascript function:
jQuery(function($){
var priceBase = $('input[name="mprices[basePrice][]"]', '#productPriceBody');
var priceFinal = $('input[name="mprices[salesPrice][]"]', '#productPriceBody');
var priceDiff = priceFinal.val() - priceBase.val();
var priceTax = priceDiff / priceBase.val();
alert(priceFinal.val()); // 1.40004
alert(priceBase.val()); // 1.16667
alert(priceDiff); // 0.23333399999999993
alert(priceTax); // 0.19999999999999993
});
How I suppose to round a priceTax value from 0.19999999999999993 to 0.20 ? Like normal math calculation you know, if it's 4 and below, it rounds to lower, if it's 5 it rounds to higher number.
Thanks for suggestions in advance.
You seem to want
alert(priceDiff.toFixed(2));
But you should parse the values before you do maths. It works here because you're lucky :
"33"-"12" => "21"
"33"+"12" => "3312"
So to avoid bugs in the future (when you use + instead of - for example) I'd suggest to always parse the field values :
var priceDiff = parseFloat(priceFinal.val()) - parseFloat(priceBase.val());
I'm trying to set a minimum upper bound, specifically:
The Y axis should start at 0
The Y axis should go to at least 10, or higher (automatically scale)
The upper bound for the Y axis should never be less than 10.
Seems like something Highcharts does, but I can't seem to figure out how. Anybody have experience with this?
Highcharts doesn't seem to have an option for doing this at chart creation time. However, they do expose a couple methods to interrogate the extremes and change the extremes, getExtremes() and setExtremes(Number min, Number max, [Boolean redraw], [Mixed animation]) found in their documentation.
So, a possible solution (after chart creation):
if (chart.yAxis[0].getExtremes().dataMax < 10) {
chart.yAxis[0].setExtremes(0, 10);
}
yAxis[0] references the first y-axis, and I'm assuming that you only have one axis in this case. The doc explains how to access other axes.
This isn't ideal, because the chart has to redraw which isn't too noticeable, but it's still there. Hopefully, Highcharts could get this sort of functionality built in to the options.
A way to do this only using options (no events or functions) is:
yAxis: {
min: 0,
minRange: 10,
maxPadding: 0
}
Here minRange defines the minimum span of the axis. maxPadding defaults to 0.01 which would make the axis longer than 10, so we set it to zero instead.
This yields the same results as a setExtreme would give. See this JSFiddle demonstration.
Adding to Julian D's very good answer, the following avoids a potential re-positioning problem if your calculated max varies in number of digits to your desired upper bound.
In my case I had percentage data currently going into the 20's but I wanted a range of 0 to at least 100, with the possibility to go over 100 if required, so the following sets min & max in the code, then if dataMax turns out to be higher, reassigns max up to it's value. This means the graph positioning is always calculated with enough room for 3-digit values, rather than calculated for 2-digits then broken by squeezing "100" in, but allows up to "999" before there would next be a problem.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function(event) {
thisSetMax = this.yAxis[0].getExtremes().max;
thisDataMax = this.yAxis[0].getExtremes().dataMax;
if (thisDataMax > thisSetMax) {
this.yAxis[0].setExtremes(0, thisDataMax);
alert('Resizing Max from ' + thisSetMax + ' to ' + thisDataMax);
}
}
}
},
title: {
text: 'My Graph'
},
xAxis: {
categories: ['Jan 2013', 'Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2013']
},
yAxis: {
min: 0,
max: 100,
title: {
text: '% Due Tasks Done'
}
}
//Etc...
});
HigtCharts has a really good documentation of all methods with examples.
http://www.highcharts.com/ref/#yAxis--min
In your case I think you should the "min" and "max" properties of "yAxis".
min : Number
The minimum value of the axis. If null the min value is automatically calculated. If the startOnTick option is true, the min value might be rounded down. Defaults to null.
max : Number
The maximum value of the axis. If null, the max value is automatically calculated. If the endOnTick option is true, the max value might be rounded up. The actual maximum value is also influenced by chart.alignTicks. Defaults to null.
If you are creating your chart dynamically you should set
min=0
max=10 , if your all data values are less then 10
and
only min=0, if you have value greater then 10
Good luck.
Try setting the minimum value of the axis and the interval of the tick marks in axis units like so:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
yAxis: {
min: 0,
max: 10,
tickInterval: 10
}
});
Also don't forget to set the max value.
Hope that helps.