I have done this using jquery draggable. Demo
$("img").draggable({ containment: [-99, -119, 0, 0], scroll: false });
How can I get the values of x, y of the visible portion of image.
I want to click and drag the image some times, when i move cursor, image is moving, i do not want this to happen.
Thank you.
Constrain the movement with the axis option.
{ axis: "y" }
Related
is possible to to add an image that it rotates when I I rotate the 3D chart?
My chart is "3d scatter draggable chart"
and i add an image in this way:
events: {
load: function() {
this.renderer.image("http://maps.googleapis.com/maps/api/staticmap?center=64.775,-17&zoom=7&size=320x320&maptype=satellite", "0%", "50%", 60, 20).add();
}
},
the image must be at the top of chart, and must follow the chart.. :
http://i59.tinypic.com/25focd2.png
http://i61.tinypic.com/23ma81w.png
the black rect will be my image..
i'm going crazy, for me it is too difficult and I do not know if it is realizable.
Please help me :(
I have a highstock chart witch candlestick data type.
When I mouseover the data point, I want to highlight the background of the point.
This is what tooltip -> crosshairs do:
tooltip: {
crosshairs: true
}
But the only width option to set is the fixed width. See http://jsfiddle.net/8YBd7/.
This fixed width works with initial zoom, but when I change the zoom, the width is not updated with new point width.
When I set 100% width, the crosshair would fill entire chart area:
tooltip: {
crosshairs: {
width: '100%'
}
}
Is there another option how to highlight current data point by changing its background or setting the width to the pointPixelInterval or something else?
Meanwhile, I produced a dirty workaround, so improvements are welcomed:
xAxis: {
events: {
afterSetExtremes: function() {
this.chart.tooltip.crosshairs = [];
this.chart.options.tooltip.crosshairs.width = (this.width / (this.series[0].points.length-1));
}
}
}
http://jsfiddle.net/QbdEu/1/
Whenever the zoom is changed, the width is recounted according to chart width and number of displayed data points. The width is not updated when calling redraw(), so the old crosshair needs to be removed.
Have you tried to use Renderer http://api.highcharts.com/highstock#Renderer.rect() which allows to plot any shapes and defined width? Only what you need is getting point width in pixels frpm(chart.series[0].data[0].graphic) and then setting correct widht of "shape".
How to set scrollbar position to Left in highcharts/highstock ?
As shown in image when the chart loads,
The scrollbar is automatically aligned to right.
Is there a way to position it to Left ?
We can do this thing using setting min to 0
xAxis: {
min: 0, //setting min to 0
max: 5
},
here is Jsfiddle link .
You can use setExtremes http://api.highcharts.com/highstock#Axis.setExtremes() and define range for scrollbar.
I've set up a jquery draggable, which can be moved around the entire document, it's not contained by anything, and this is acceptable, as when the user drags, I want them to be able to drag as far down the page (or left or right) as they wish.
Indeed, the only restriction I want - is that they should be prevented dragging the element outside of the top of the page.
Is it possible to prevent dragging outside only one edge of a container?
You could overwrite the position of the element being dragged.
This fiddle is an example of the position overwriting : http://jsbin.com/ufarif/7/edit
Here is an example to not permit to be more close than 80 px of the left border
$('[id^="drag-"]').each(function() {
$(this).draggable({
opacity: 0.7,
cursorAt: { top: 15, left: 50 },
scroll: true,
stop: function(){},
drag : function(e,ui){
//Do not permit to be more close than 80 px of the left border
console.log(ui.position.left);
if(ui.position.left < 80)
ui.position.left = 80;
});
});
You can use the containment option to prevent dragging outside the window :
$("#id").draggable({
handle: tr_top,
containment: "window"
});
How to combine simple d3.js chart (for example http://bl.ocks.org/2579599) with jQuery.ui range slider?
With this slider I'd to control x-axis scale (begging and end of data series). I expect that my chart will contain large data set and ideally it should be done without redrawing the whole chart.
If you do not mind redrawing the points, then controlling the beginning and end of the x-axis with a scale can be achieved by changing the domain of x in the callback methods of the jQuery range slider.
To make this pretty you can do this using a transition and by adding a clipping rectangle.
The range slider callbacks would look something like this:
<div id="slider">
<script>
$(function() {
$( "#slider" ).slider({
range: true,
min: 0,
max: data.length-1,
values: [0,6],
slide: function( event, ui ) {
var maxv = d3.min([ui.values[1], data.length]);
var minv = d3.max([ui.values[0], 0]);;
//this is the main bit where the domain of x is readjusted
x.domain([minv, maxv-1]);
//apply the change in x to the x-axis using a transition
graph.transition().duration(750)
.select(".x.axis").call(xAxis);
//apply the change in x to the path (this would be your svg:path)
graph.transition().duration(750)
.select(".path").attr("d", line(data));
}});
});
</script>
</div>
I added this together with the clipping to get bl.ocks.org/3878029. Is this the kind of scaling of the x-axis that you imagined? It does redraw the path and the x-axis but I am not sure how you can avoid redrawing that seeing how you want it to change.