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
});
Related
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
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 have a jQuery plugin progress meter that animates and has a callback function where I animate the text value up to the meter value.
https://github.com/kottenator/jquery-circle-progress
The callback value is in the format of 0.12798798 etc which I format to give 12%.
My problem is if the value is 100% my code returns 00%
$('#circle').circleProgress({
startAngle: 90,
size: 240,
thickness: 22,
fill: { gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4 }
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(2)+'%');
});
I am sure there is a much better approach.
You can simplify as follows:
(stepValue*100).toFixed(0) + '%'
Seems like this should round to the nearest integer:
Math.round(0.12798798*100)
toFixed(2) gives you two decimal places... use 0 and you don't need the substr
$(this).find('strong').text(String(stepValue.toFixed(0))+'%');
I want to make a progress bar from -51 to -113.
How can I do so using javascript or jquery. So far I can only set the max value of the progress bar.
<progress value="-75" max="-51"></progress>
UPDATE: Changed value to a valid value. Sorry
You can't represent negative values with <progress>
Instead you should use <meter> :
<meter min="-113" value="-70" max="-51"></meter>
Demo : http://jsfiddle.net/g7J8F/
----to get or set Minimum values----
Set the min property.
$('#jqxProgressBar').jqxProgressBar({ min: 10 });
Get the min property.
var min = $('#jqxProgressBar').jqxProgressBar('min');
----to get or set Maximum values----
Set the max property.
$('#jqxProgressBar').jqxProgressBar({ max: 150 });
Get the max property.
var max = $('#jqxProgressBar').jqxProgressBar('max');
check this website for more information
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxprogressbar/jquery-progressbar-api.htm
Just make its max 62, substract 113 if you get the progressbars value and add 113 when you set it.
Using Jquery Set min value and max value in Progress
` $("#progressbar").progressbar({ value: parseFloat($('#hdn_Viewbaguserspace').val()) });
$("#progressbar").progressbar("option", "max", parseFloat($('#hdn_viewbagtotalspace').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.