I am new to meteor , but from want I understand its draggable object has jquery under the hood. I added the draggable object by using
li id="data-item-sortable-id"
I would like to be able to contain the area the draggable object can move in.
In jquery you would do something like
var containmentTop = $("#stop-top").position().top;
var containmentBottom = $("#stop-bottom").position().top;
$('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });
Does anyone have a good example of how to make meteor contain where its draggable object can go?
In jQuery UI, Containment is usually based on an Element, Selector, or a specific string value.
Constrains dragging to within the bounds of the specified element or region.
Element: An element to use as the container.
Selector: A selector specifying an element to use as the container.
String: A string identifying an element to use as the container. Possible values: "parent", "document", "window"
Array: An array defining a bounding box in the form [ x1, y1, x2, y2 ]
I have not used Meteor, but I suspect that you can get the containment you want by the following:
var cTop = $("#stop-top").position();
var cBottom = $("#stop-bottom").position();
$('#bar').draggable({
axis: 'y',
containment: [ cTop.left, cTop.top, cBottom.left, cBottom.top ]
});
Personally, I would just use something like "parent".
If this doesn't work, may need to see a more complete example.
Remember that left is the X-Axis and top is the Y-Axis.
Related
I'm attempting to change edgeColor property for a series in a 3d column chart after the chart is drawn, based on some user input (like selecting a certain series). I was able to do this was a 2d column chart using the borderColor property. My data loading snippet looks like this:
$.each(seriesDataArray,function(i,val){
console.log (val);
chartDetails.series.push({ "size" : val.datasetSizeVerified , "data" : val.data});
};
And I'm trying to modify the edgeColor in a function later on in code:
function highlightChartSeries(currentTableDisplayIndex){
if (myChart){
$.each(myChart.series,function(i,val){
val.edgeColor = "green" ;
val.redraw();
});
myChart.series[currentTableDisplayIndex].edgeColor = "red";
myChart.series[currentTableDisplayIndex].redraw();
}
}
Again, this works great in 2D with a column chart using the borderColor property. I can set the edgeColor in the original series object during chart construction, and that edgeColor is reflected in my original graph. However, I can't change it later. Any help is appreciated!
To add (or change) some value to existing series, you should use Chart.Series function called update(), and pass to it new configuration options object, because it is a function specially created to executing actions like that. Please take a look at code below:
chart.series.forEach(series => {
series.update({
edgeColor: 'black'
})
})
I prepared for you live example how to use that function.
Best regards!
How to add markers at particular points (x,y) in high-chart line graph?
I have tried this:-
marker: {
symbol: 'square'
}
Am adding x and y values as dynamic array.I need to iterate the array in a loop and plot markers manually at certain points .Is it possible?
probably the best way to do it is to add a data series that represents the marker, so it would be something like this (pseudo-code):
var myMarkerPosition = myValueFromArray;
mychart.addSeries(myMarkerPosition);
and you can then do something like:
mychart.series[1].update({ symbol: square });
later on if you want to. Don't forget to replace your marker if you want to move it to another position by updating it.
Is there a way to get Mapbox.js tooltips to show when you're hovering over a marker without following the mouse around? I just want it to stay put when I hover.
I am using the following code on my map:
var map = L.map("impact-map")
.setView([20, 80], 3)
.addLayer(L.mapbox.tileLayer("hotchkissmade.in_impact", {
detectRetina: true
}));
var myGridLayer = L.mapbox.gridLayer('hotchkissmade.in_impact').addTo( map );
var myGridControl = L.mapbox.gridControl(myGridLayer, {
follow: true
}).addTo( map );
I am using the follow:true from the example here.
Disclaimer: I know there may be more flexibility outside of gridControl but I like having my tooltips from Tilemill as I don't want to load the data in the browser twice, since I'm basing the tooltip data off the layer making the markers on my map in Tilemill
This isn't possible with a gridControl - you can have tooltips either follow the mouse or stay in a specific location, but unlike L.mapbox.featureLayer, there is no actual marker, polygon, or feature you're hovering over - the geometry is not pushed to the client - so, there would be no 'anchor' for the tooltip to stay on.
I am showing two lines in a single graph updating them each second with a value that is saved into a global variable (both have different global variables). An example of the code can be found here: jsFiddle example.
As you can see the two lines are on top of each other, even though they have different values when the ymin and ymax are added to the lines (you can see this in the console).
The cause appears to be in the first addPoint call (line 118). If the first boolean is set to true (like the second addPoint call) the lines are shown correctly but the animation is wrong: jsFiddle example.
Does anyone know why the lines are on top of each other while their values are obviously different? And more importantly: how can I fix this while keeping the smooth animation?
Previous (possibly related) question: Chart not moving fluently when adding value to two lines on interval.
The problem is with using the same variable emptyarray for both series. This is known issue with Highcharts (roported on github) that Highcharts overwrites some of options passed to the chart. Possible solution is to use function which will return that empty array, for example:
function generateArray(){
var emptyarray = [],
time = (new Date()).getTime(),
i;
for (i = -50; i <= 0; i++) {
emptyarray.push({
x: time + i * 1000,
y: 230
});
}
return emptyarray;
}
chartinfo.series = [{
name: 'Minimum Voltage',
data: generateArray(),
color: '#FFFFDD'
}, {
name: 'Maximum Voltage',
data: generateArray(),
color: '#B72E8D'
}];
Working jsFiddle: http://jsfiddle.net/XAHa4/2/
It looks like strange with your setInerval functions, because minified example http://jsfiddle.net/DxqUj/ works properly.
I have a HighStock chart that is pulling in some OHLC data and creating a chart with 3 series - 1 candlestick, 1 volume, and 1 set of flags. This all works fine.
I want to add some custom trend lines to the chart. I will determine the points and do the paths based on custom logic.
The problem is that when I use the Renderer from the Chart to draw my path, the path is not connected to the underlying chart. As the chart date range is modified and/or new points are added to the primary series, the placement and size of my custom path remains unchanged. It is constant.
I need the location/endpoints of the custom path to be tied to the datapoints of the chart, not the coordinates of the svg drawing. Is there a way to accomplish this?
Here is the portion of the code that is adding a simple path from pointa to pointb. The path renders as expected but is then static:
buildPath: function(pointa, pointb){
this.myChart.renderer.path(this.buildPathArray(pointa,pointb))
.attr({
'stroke-width': 2,
stroke: 'red'
}).add();
},
buildPathArray: function(pointa, pointb){
var pathArray = [];
pathArray.push('M');
pathArray.push(pointa.plotX);
pathArray.push(pointa.plotClose);
pathArray.push('L');
pathArray.push(pointb.plotX);
pathArray.push(pointb.plotClose);
pathArray.push('Z');
return pathArray;
}
Per request, I created a JS Fiddle that demonstrates the general issue.
Any help is much appreciated.
SOLVED
This doesn't seem to come for free with Highcharts. Or if it does I did not find out the technique.
I had to use both the load and redraw events of the chart object contained in my StockChart.
On load, I draw the initial paths, aligned with the Point objects involved in my trending lines. As I build these path objects (SVGElement objects containing the genuine SVG path elements) I keep track of them in an array.
On redraw, I have to both destroy the old trend lines and create new ones. So I loop over my array of old elements and remove each from their own parentNode. Then I draw a fresh version of my trend lines based on the newly plotted location of each of my relevant Point objects.
The end result is that on each redraw event, the lines appear to move with the chart, when they're really being destroyed and recreated.