We Keep Coding

Change the alpha channel values for multiple entities from a CSS color pattern string in JavaScript

Suppose we have this constant representing a CSS color pattern:
const COLOR = 'rgba(100,100,200, 0) rgb(100, 100, 200) rgba(100,200,250) rgba(100,200,250,0.8) rgba(40, 50, 60, 1)';
What would be the fastest method (match/regexp...?) in JavaScript to add 0.1 to the alpha channel of each rgba(...) and if it is rgb(...), to change it to rgba(...) with the alpha channel (ie: 0.1)? If a rgba(...) already has an alpha channel of 1, it should stay at 1, even though a higher value would not break anything to the computed style.
So the resulting string would be:
rgba(100,100,200, 0.1) rgba(100, 100, 200, 0.1) rgba(100,200,250,0.1) rgba(100,200,250,0.9) rgba(40, 50, 60, 1)

Your first step is to replace rgb with rgba, then add 0.1 to the last number is it's less than 1 and finally replace instances where you only have three values to four (this regex looks weird because some of your parenthesised numbers have spaces and others don't)
COLOR.replace(/rgb\(/g, 'rgba(').replace(/(\d\.\d|[^\d]0)\)/g, (match, p1) => {return String(Number(p1)+0.1) + ')';}).replace(/(\( *\d+ *, *\d+ *, *\d+ *)(\))/g, '$1,0.1$2')
It's important to note this will only work if your third value is ALWAYS bigger than 1.

Add decimal point to the last character

I'm writing something that pulls some data from the internet; the thing is that one of the keys from the object that I get has weight and height and well, they're not formatted; they're like a whole integer; now, for example; if I get a weight key with a value of 1000 that means that it is 100.0kg; not just 1000, same with the height but sometimes I can get something like 10 on height which is 0.99m or 1m; 100 is 10.0m and so on, so, my question is; what can I do here to format these values properly adding a .0 to the final if the value doesn't have it and if it does have it just add the decimal point before the last character? I tried doing some ifs but they were hard coded and I looking very bad, plus it didn't work.
Output that I'm getting
Example:
Weight: 1000
Height: 20
Weight: 69
Height: 7
Weight: 432
Height: 12
Expected output:
Weight: 100.0
Height: 2,0
Weight: 6.9
Height: 0.7
Weight: 43.2
Height: 1.2

You could divide by 10 and use Number#toFixed for formatting a number.
The toFixed() method formats a number using fixed-point notation.
var values = [1000, 20, 69, 7, 432, 12];
values = values.map(function (v) {
return (v / 10).toFixed(1);
});
console.log(values);

YUI thumb slider does not accept variables and expressions

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
});

Show a tick every n value

How can I setup an axis that it shows not 5 or 10 or whatever number of ticks but rather show a tick each n units. In this case if a dataset looks like this:
[2,3,6,7,10,13,17,20]
The ticks will be on 0, 5, 10, 15, 20 if I configure it to show a tick for every 5th step.
How can it be achieved?
Here is a real example I am working on
I want on x axis show a tick after each 20 years, so it should be not 0, 10, 20, 30, ..., n, but 0, 20, 40, 60, 80, ..., n.
For y axis I need values to be 500k stepped, so it should be 0, 500k, 1m, 1.5m, ..., n.
Update
I have found a simple working solution. I call an axis via `.call(yAxis) as usual, then I find go through created ticks and check if their datum has a remainder when I divide their values by the step number I need. If there is no remainder, then I set opacity to 1, otherwise hide them by setting opacity to 0. Here is an example:
yAxisElement
.selectAll('.tick')
.style({
opacity: function (d, i) {
return d % 500000 ? 0 : 1;
}
})
It's not an ideal solution, because it can't add the ticks that are in the middle of existing ones by value, like on this image, if I want to use 0, 15, 30, 45 and so on, just show/hide those that are already there. In the case I need to add ticks for other values, I need to make a custom axis or use the solution suggested by Lars Kotthoff.

How do I set a minimum upper bound for an axis in Highcharts?

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.