I have a JQuery knob that's displaying a value that can range from -5000 to 5000. I want it to have 0 be straight up, highlight going cw if the value is positive, highlight going ccw if the value is negative. Is there a simple way to do this with JQuery Knob?
I have done your requirement with roundSlider plugin, here you can completely customize this further. Check the below demo:
Demo -JSFiddle
Related
I am using ios-charts library to draw charts on a swift2 app. I am wondering if, for a given X value, I can change its Y associated value by a drag and drop gesture on the chart.
If this is not possible on this library, is it possible to do such a thing using another library?
technically you can. Every time you scroll/zoom the chart, it will trigger a redraw, so everything is redrawing, you can decide your own logic how you want the y axis value changed.
It has two parts:
In computeAxisValues in y axis renderer, the y axis labels(values) are determined. Then in renderAxisLabels, it is drawn using the calculated values.
So you can take a look at these functions and implement your logic. Note, it's your responsibility to make sure what you are doing is valid in your scenario, because if something weird happens, you may not get support on github, because it's not a bug, and sometimes not easy to answer.
The problem is that, if I try to change the lowest point to somewhere higher, the entire chart will be lowered severely.
How do I adjust each point with no above mentioned issue?
P.S. I use Highchart's Highstock.
It would be helpful if you could show a JsFiddle with the actual working code. Without knowing what exactly is going on with your chart it's difficult to figure out what the issue is and how to fix it.
Have a look at the yAxis - Highstock API Reference, you could potentially make use of min or max to counteract the scaling. Again though, without seeing your code it's tough to know.
If I understand your problem, you are trying to set the 7th point from currently at ~150 to something really high, say 5000? I did not notice any real change in the position of other points if the new value was under 1500 (or something around twice the first point)
Appears that your chart is set to comparison mode, hence, I believe, the default max and min are (100% & -100%) by default, this is w.r.t. to first point of the series. Highcharts would auto adjust these extremes if any of the points were to lie outside this range, you could force an override using yAxis.min & max.
For instance, you can set yAxis.min to -100 and yAxis.max to 100 like this
yAxis: {
min:-100,
max:100
}
Play around with the min and max to get to the values that suits your data the most, do remember these are % comparison to the first point. Any points outside these ranges would not show in the chart.
#jsFiddle
Linear Dataseries Say all y axis is 0, Autoscaling on y axis is not working as desired.
High stock version - 1.3.1
DataSeries to be plotted,
[[1149724800000,0],[1149811200000,0],[1150070400000,0],[1150156800000,0],[1150243200000,0],[1150329600000,0],[1150416000000,0],[1150675200000,0],[1150761600000,0],[1150848000000,0],[1150934400000,0],[1151020800000,0],[1151280000000,0],[1151366400000,0],[1151452800000,0],[1151539200000,0],[1151625600000,0]]
OR
[[1149724800000,20],[1149811200000,20],[1150070400000,20],[1150156800000,20],[1150243200000,20],[1150329600000,20],[1150416000000,20],[1150675200000,20],[1150761600000,20],[1150848000000,20],[1150934400000,20],[1151020800000,20],[1151280000000,20],[1151366400000,20],[1151452800000,20],[1151539200000,20],[1151625600000,20]]
Try Above series with Y min set to 0 and Y Min to Auto.
I had the same issue with 0 values displayed in the center.
The only way I found to get round it was to either use tickPositions and pass range values across to it for the data based of min/max values and ones in between or to use the tickPositioner call back function to return to go through the data and return the tick values based on these.
Still fairly new to highcharts so there is probably another way I don't know of. If anyone knows how to have 0 values displayed at the bottom of the chart while it auto-scales then please post as I would love to know how/if its possible.
Edit: turns out this isn't really possible currently, only way to get around it is to set min/max values and that won't allow auto scaling but at least it stop there from being any middle 0 values.
I have a jQuery UI slider here.
http://jsfiddle.net/DrR7s/7/
I have animate attribues value as "true". When I place my mouse pointer somewhere on the bar and click there, it is giving a slide visual effect. But if I drag the slider pointer to a different point, I am not getting the animated slide effect which I got in the other case. It looks like its jumping from one point to another. Is there any way I can have the slide effect here too ?
Below is my script:
$(function(){
$('#slider').slider({
animate: true,
step:1,
min:0,
max:5
});
});
You're using the "Snap to Increments" version of the slider. If you take of the min, max, step or just set your step to something like .1, you'll get smoother sliding. But if you want to snap to those increments, you can't get smooth dragging.
If you really wanted the smooth sliding and the forced incremental values, you could just round the numbers when you go to handle them.
You need to raise your max number, if you put it to max:100, it has a smoother dragging. The max tells the slider how many points to place on the slider itself. So going from point 0 to point 1 is big jump.
I've noticed that the CSS3 scale attribute does really bad things to jquery ui, specifically to sortable. The problem is that the mouse still needs to move as much as if the elements were not scaled. Check out this jsfiddle example.
Does anybody have thoughts on how to fix this? Is it possible to change the speed that the mouse moves? I'm going to look into the html5 native drag and drop next, and try to write my own sortable function.
UPDATE:
Jquery ui draggable works ok with CSS3 scaled elements, here is a fiddle for it.
It turns out the real answer does not require writing special move functions. Jquery ui sortable can be used as long as the items being sorted have been wrapped in a div of the appropriate size with overflow hidden. Check this jsfiddle for an example.
The problem was that I had forced the scaled divs to be close to one another using a negative margin. Then when I started to drag an item it was taking up the wrong amount of space. With the scaled item wrapped in a non-scaled div everything works as expected.
I don't have a solution for working with jquery ui but I do have a solution for working with Raphael and by extension other svg objects.
First, using chrome or firefox, go drag the dots around in this jsfiddle. Be sure to drag both dots and to use the slider at the bottom to change the scale of the box. The slider has a default scale range of .4 to 1.2. In Chrome the slider is actually a slider but in Firefox it shows up as a textbox. If you are using firefox enter values that are 100 x the scale, i.e. 70 => 0.7.
What you should have just experienced is that the black dot tracks with the mouse regardless of the scale and the red dot only tracks when the scale is 1.0.
The reason for this is the two dots are using different 'onMove' functions. The black dot moves according to 1/scale while the red dot moves normally.
var moveCorrected = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + (1/scale)*dx,
cy: this.oy + (1/scale)*dy
});
}
var move = function (dx, dy) {
// move will be called with dx and dy
this.attr({
cx: this.ox + dx,
cy: this.oy + dy
});
}
So, in answer to my original question. You can't (and shouldn't) be able to change how the mouse moves, that is clearly user defined behavior, but you can change the move function of the object being moved to track with the mouse.