jQRangeSlider set max greater than 100 - javascript

I am using jQRangeSlider and try to set the max to a number greater than 100. This does not work as the slider's max remains 100:
function initSlider() {
$("#slider").rangeSlider();
$("#slider").rangeSlider("min", 0);
$("#slider").rangeSlider("max", 500);
}
Result:
How do I set the max to be greater than 100?
Or is a max value greater than 100 not supported? I looked on http://ghusse.github.io/jQRangeSlider/documentation.html but didn't see anything.

From documentation:
The method values([min, max]) can be used for getting current selected
values, and setting new values.
// Edit slider
$("#editSlider").editRangeSlider("values", 20, 100);

Figured it out. One needs to use bounds:
To initialize:
$("#slider").rangeSlider({ bounds: { min: 0, max: 500 } });
To change it later:
$("#slider").rangeSlider('bounds', 0, 500);
See: http://ghusse.github.io/jQRangeSlider/methods.html#boundsMethod

documentation states you can set the values in the following way:
// Basic slider
$("#slider").rangeSlider("values", 10, 20);
so your code would be:
function initSlider() {
$("#slider").rangeSlider("values", 0, 500);
}

Related

How to set a function to the max value in boxplot highcharts

I am using Angular with highcharts boxplot API.
I know I could set the max value of y-axis in the chart config, something like this.
max: 100,
tickInterval: 10.
But now I need to change the max value by the return value.
For example, if the maximum return value is around 60%, then I should set the max to 60.
max:60,
tickInterval: 10.
Is there any way to add some method/function to fit the maximum return value?
For example:
max: funticon(){ xxxxx; return A},
tickInterval: 10
The above function is a method by myself to check the API maximum value.
After checking then return to the chart config to set the max.
Using chart.events.load you will be able to update and set these values for yAxis.max:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Chart#update
Demo:
https://stackblitz.com/edit/highcharts-angular-basic-line-wtoktb
chart: {
events: {
load: function() {
const chart = this;
chart.update({
yAxis: {
max: (chart.yAxis[0] as any).dataMax
}
})
}
}
}

Ways to limit Phaser3 update rate?

In my Phaser3 game there is a global gameTick variable that is incremented every update. I am using this to spawn in enemies in my game every 100th update.
Here is a simplifed example of what is going on in my scene class:
update () {
global.gameTick++;
if (global.gameTick % 100 === 0) {
this.spawnAlien();
}
}
This works fine but as soon as a user plays the game on a monitor with a refresh rate >60hz the update timing breaks and causes the aliens to spawn more frequently.
I have checked this.physics.world.fps and it is 60. I can also modify this.physics.world.timescale but then I would have to do a giant switch statement for every refresh rate.
Either I am missing an obvious solution or my global.gameTick method is not an effective way to accomplish this task.
This is what I have in my config so far
let config = {
type: Phaser.AUTO,
backgroundColor: "#000",
scale: {
parent: "game",
mode: Phaser.Scale.FIT,
width: 1900,
height: 600,
},
physics: {
default: "arcade",
arcade: {
debug: true,
fps: 60 // doesn't fix update frequency
},
fps: { // not sure if this is even doing anything
max: 60,
min: 20,
target: 60,
}
},
pixelArt: true,
};
You can also set the following property in your game's config object:
fps: {
target: 24,
forceSetTimeOut: true
},
Source: https://phaser.discourse.group/t/how-to-limit-fps-with-phaser-3/275/14?u=saricden
To limit the update rate, use the following method.
// The time and delta variables are passed to `update()` by Phaser
update(time, delta) {
this.frameTime += delta
if (this.frameTime > 16.5) {
this.frameTime = 0;
g.gameTick++;
// Code that relies on a consistent 60hz update
}
}
This accumulates the miiliseconds between the last frame and the current frame. It only runs the update() code if there has been 16.5ms of delay.
The example above works for 60fps, but if you want to limit the FPS to a different value use the formula: delay = 1000/fps.

Having certain behavior occur within the ranges between array values?

I have an array of values, specifically pixel offsets of a certain type of element.
Let's say they are in an array arrScroll[] with values [5, 10, 15, 50, 100, 250].
If my window scrolls past 5 pixels but not past 10 pixels, I get the index 0. If my window scrolls past 15 pixels but not past 50 pixels, I get the index 2. If it scrolls back below 10 pixels but not below 5, I get the index 0 again.
What I'm trying to do is find a graceful way (instead of a ton of conditionals for each possible range, as the number of ranges can change) to always get the lower of the two indexes of the scroll range that I am in, except at the range 0 to arrScroll[0], in which case I pass a different value than the index.
Another example: if I am in the range of arrScroll[3] and arrScroll[4] then I will obtain the index 3. Only once I pass the position of the higher index number do I get its index.
This has nothing to do with sorting as the values are already sorted from smallest to greatest. On a scroll event listener, I simply want to obtain the index of the lower of the two values comprising the index.
What would be the best way to organize this so that it can function for an array of arbitrary length?
More complete example:
I have the colors red, blue, and green. I have an array with values [100, 200, 300]. When my window scrolls past 100 pixels but not past 200 pixels, I will have something like $(element).css('background-color', colorArr[index]) where the color in colorArr[] at index 0 is red.
Then if the window scrolls past 200, but not past 300, I run the same code snippet, but the index is now 1 and the color is blue.
If I scroll back below 200 pixels but not below 100 pixels, the index is once again 0 and the color passed is red.
This is trivial to create with if statements if the length of the array is known, but I don't know how to do it for an array of arbitrary length.
If I'm not mistaken you're seeking to find index based on a value?
let arr = [5, 10, 15, 50, 100, 250];
let colorArr = ["red", "blue", "green", "yellow", "orange", "black"]
//fake listener
let scrollListener = (pixelScrolled) => {
let index = (arr.findIndex((element)=>pixelScrolled<element)+arr.length)%(arr.length+1);
$(document.body).css('background-color', colorArr[index])
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="(()=>scrollListener(9))()">fake scroll toggle : 9</button>
<button onclick="(()=>scrollListener(49))()">fake scroll toggle : 49</button>
<button onclick="(()=>scrollListener(250))()">fake scroll toggle : 250</button>
I'd iterate on your arrScroll values starting from the begining, assuming your offsets are always sorted in a growing order and break as soon as your test position is greater than the tested index
var test = function (position, offsets) {
for (var index = 0; index < offsets.length - 1; index++) {
if (position < offsets[index]) break;
}
return index > 0 ? index - 1 : 'something';
}
// will return index 1 cuz 4 is bw 1 and 5
console.log(test(4, [0, 1, 5, 10, 20, 42]))
// will return 3
console.log(test(12, [0, 1, 5, 10, 20, 42]))
// would return 0, but would return "something" since this is your special case
console.log(test(16, [20, 100]))
That way you iterate only on part of your offset arrays, exiting as soon as possible

jQuery, getting .attr("id"), calling function based on ID [duplicate]

This question already has answers here:
How to execute a JavaScript function when I have its name as a string
(36 answers)
Closed 5 years ago.
I don't want to run a big if, else, else, else type statement. I'm basically looking for an excel INDIRECT() equivalent, where I get the string of the id, and call that string as a function, based on which id I'm iterating over.
I have inputs with classes that jQuery makes spinners based off of.
$(document).ready(function(){
var primary = $(".spinnerPrimary");
var secondary = $(".spinnerSecondary");
primary.spinner({
min: 7,
max: 20,
});
primary.spinner("value", 10);
secondary.spinner({
min: -4,
max: 4
});
secondary.spinner("value", 0);
When doing max, min, etc. I want to do a spin event that calls a function to update various span containers. I could run one function that just updates every span, or run a big if/else/else case-type statement, so I do have options. What I really want is to pull the id with a this.attr("id"), so that each spinner has a spin set to it based off of the id of that input spinner, that is the same string that corresponds to the name of a defined function.
$(document).ready(function(){
var primary = $(".spinnerPrimary");
var secondary = $(".spinnerSecondary");
primary.spinner({
min: 7,
max: 20,
spin: //fancy code
});
primary.spinner("value", 10);
secondary.spinner({
min: -4,
max: 4,
spin: //same fancy code
});
secondary.spinner("value", 0);
function x() {
//fancy equation code
};
function y() {
//fancy equation code
};
In the above example, if the id is "x", then I want it to call function x(), id="y" calls y(), etc. I'm looking for how to do this specific scenario, not how to do it another way (running if/else based on known id's and corresponding function, for example). If the two alternatives I mentioned are the only way to do it, then so be it.
Duplicate of another question: very similar, but also needed help with mapping functions and applying them to spinner. Still new to jQuery, so was a multifaceted(?) question.
Try it this way:
// Setup your functions as a map, so they are easily
// accessible by name.
var fns = {
x: function(){
console.log('running x!');
},
y: function(){
console.log('runnning y!');
}
}
var primary = $(".spinnerPrimary");
primary.spinner = function(options){
// Tie your `spin` function to the spinner.
console.log('spinning');
options.spin();
}
primary.spinner({
min: 7,
max: 20,
// Assign `spin` to one of the `fns` from above
// using `id` as a key.
spin: fns[primary.attr('id')]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="x" class="spinnerPrimary"></div>

AmCharts - set max value axis using dataprovider

I'm trying to set max value axis using dataprovider, since I'm dynamically loading data in my bar chart I need to see the "progress" on one of the bars compared to the one that is supposed to be the total.
How do I achieve this?
I' tried with:
"valueAxes": [
{
"id": "ValueAxis-1",
"stackType": "regular",
"maximum": myDataProviderAttribute
}
But no luck.
Any suggestion will be much apreciated.
I've submited a ticket to AmCharts support and got this feedback:
You can set max before the chart is initialized based on the data you have, inside addInitHandler. Here is an example for a simple column chart:
AmCharts.addInitHandler(function(chart) {
// find data maximum:
var min = chart.dataProvider[0].visits;
for (var i in chart.dataProvider) {
if (chart.dataProvider[i].visits > max) {
max = chart.dataProvider[i].visits;
}
}
// set axes max based on value above:
chart.valueAxes[0].maximum = max + 100;
chart.valueAxes[0].strictMinMax = true;
});
You may need to use strictMinMax as above to enforce the value:
https://docs.amcharts.com/3/javascriptcharts/ValueAxis#strictMinMax
Example of setting minimum inside addInitHandler:
https://codepen.io/team/amcharts/pen/b4be8cb4e3c073909860720e0909a876?editors=1010
If you refresh the data, or use live data, then before you animate or validate the chart to show the updated data, you should recalculate the max and, if you want the axis to change then use chart.valueAxes[0].maximum = max; where max is something you calculate based on data input.
Here is an example:
function loop() {
var data = generateChartData();
chart.valueAxes[0].maximum = max;
// refresh data:
chart.animateData(data, {
duration: 1000,
complete: function () {
setTimeout(loop, 2000);
}
});
}
The lines above were used in this example:
https://codepen.io/team/amcharts/pen/d0d5d03cfdcc2cc256e28ec52ad8b95c/?editors=1010

Categories