Can we change the position of legends from default left side to right or bottom?
How can we implement hover on mouse pointer that is the content should be shown on the mouse pointer and not in other DIV
The legend option takes a "position" attribute to specify it's location:
legend: {
position: "ne" or "nw" or "se" or "sw"
}
What do you mean by "on the mouse pointer". Would you like the "content" to follow the pointer?
Here's the documentation of the library you're using:
https://github.com/flot/flot/blob/master/API.md#customizing-the-legend
legend: {
show: boolean
labelFormatter: null or (fn: string, series object -> string)
labelBoxBorderColor: color
noColumns: number
position: "ne" or "nw" or "se" or "sw"
margin: number of pixels or [x margin, y margin]
backgroundColor: null or color
backgroundOpacity: number between 0 and 1
container: null or jQuery object/DOM element/jQuery expression
sorted: null/false, true, "ascending", "descending", "reverse", or a comparator
}
Related
Usually, when we create a Rect shape in JointJS, we specify a size.
var cell = new joint.shapes.basic.Rect({
size: size,
attrs: {
text: {
text: text
}
}
});
graph.addCell(cell);
Is there a way to not provide a size property, but have the shape take on the dimensions required to fit the text?
I am aware of joint.util.breaktext, but I do not wish to break text in this case.
I want to limit the clickable area of all the icons from a KML file, and I'm a little stumped about how to make that happen. The icons are all the same typical-style pointer, and I'd like to limit the clickable area to the circle encompassed by the top of the pointer. The icon is 19x32, so I think I want a circle centered 9px from the top, 9px from the left, with a radius of 9px. If geoxml3 will do that, I figure that would be specified in the parser object, though maybe it would be in the IconStyle in the KML file. If in fact that would be in the parser object I haven't found the right syntax. It is apparently not:
var blues = new geoXML3.parser({map: map, singleInfoWindow: true, zoom: false, markerOptions: {shape: {type:circle, coords: [9px,9px,9px]}}});
blues.parse('allbluesdance.kml');
The markerOptions option to GeoXml3 is exactly a Google Maps Javascript API v3 markerOptions object.
Your icon is 49x32 pixels, the center of the circle is defined from the top left, so you probably want 24,9 for the center and a radius of 9:
var blues = new geoXML3.parser({
map: map,
singleInfoWindow: true,
suppressDirections: true,
markerOptions: {
shape: {
type: 'circle',
coords: [24,9,9]
}
},
zoom: false
});
From the documentation on Complex Icons:
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
The HTML area circle shape, looks like what you have should work if you remove the "px" (the documentation says an array of numbers), except that it is off to the left of the icon.
working example
I'm using jquery flot library to plot a bar chart. The bars in my chart are consistantly too thin, about 2px in width. But when I set
lineWidth: 15
the bars become the width I want, but the first and the last bars spill over the graph border. I found a simple test flot bar chart with a limited number of points, which looks fine when implemented locally. My conclusion is that maybe I have way too much data, and so the bars are thin in contrast to the amount of points. But I'm hoping there is a way to get the bars to be wider some other way and for them not to spill over the graph border.
Any suggestions are much appreciated. Here is what I have:
$.plot(this.get('datasets'), {
bars: {
show: true,
align: "center",
fill: true,
//lineWidth: 15
},
xaxis: {
mode: "time", //"categories",
timezone: "browser",
tickLength: 0
}
});
You're using lineWidth instead of barWidth. So your bars are the same width; they just look thicker (and spill over the border) because the lines around them are thick.
The reason why your bars are so narrow are because the width is expressed in axis units, not pixels. In your case, where you're using a time-mode axis, the bar width will be quite large. If you want a bar to cover one hour, then your barWidth should be 60 * 60 * 1000 = 3600000.
I'm doing an animated transform in Raphael (and Snap.svg, which does the same).
If I apply a rotation to a basic element, it rotates normally as I would expect. However, if I already have a previous transform applied (even if its t0,0 or r0), the element seems to scale down and back up, as though it always has to fit in its previous bounding box or something.
Here is an example fiddle
var r1 = s.rect(0,0,100,100,20,20).attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" });
r1.transform('t0,0'); // any transform leads to shrink on rotate...
r1.animate({ transform: 'r90,50,50' }, 2000);
var r2 = s.rect(150,0,100,100,20,20).attr({ fill: "blue", opacity: "0.8", stroke: "black", strokeWidth: "2" });
r2.animate({ transform: 'r90,200,50' }, 2000);
Is there something obvious I'm missing on animated transforms as to what is happening ?
There are a couple different things you need to understand to figure out what's going on here.
The first is that your animating transform is replacing your original transform, not adding on to it. If you include the original transform instruction in the animation, you avoid the shrinking effect:
var r1 = s.rect(0,0,100,100,20,20)
.attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" });
r1.transform('t0,0');
// any transform leads to shrink on rotate...
r1.animate({ transform: 't0,0r90,50,50' }, 5000);
//unless you repeat that transform in the animation instructions
http://jsfiddle.net/96D8t/3/
You can also avoid the shrinking effect if your original transformation is a rotation around the same center:
var r1 = s.rect(0,0,100,100,20,20)
.attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" });
r1.transform('r0,50,50'); // no shrinking this time...
r1.animate({ transform: 'r90,50,50' }, 2000);
http://jsfiddle.net/96D8t/4/
But why should it make a difference, seeing as a translation of 0,0 or a rotation of 0 doesn't actually change the graphic? It's a side effect of the way the program calculates in-between values when you ask it to convert between two different types of transformations.
Snap/Raphael are converting your two different transformations into matrix transformations, and then interpolating (calculating intermediate values) between each value in the matrix.
A 2D graphical transformation can be represented by a matrix of the form
a c e
b d f
(that's the standard lettering)
You can think of the two rows of the matrix as two algebra formulas for determining the final x and y value, where the first number in the row is multiplied by the original x value, the second number is multiplied by the original y value, and the third number is multiplied by a constant 1:
newX = a*oldX + c*oldY + e;
newY = b*oldX + d*oldY + f;
The matrix for a do-nothing transformation like t0,0 is
1 0 0
0 1 0
Which is actually represented internally as an object with named values, like
{a:1, c:0, e:0,
b:0, d:1, f:0}
Either way, it just says that the newX is 1 times the oldX, and the newY is 1 times the oldY.
The matrix for your r90,50,50 command is:
0 -1 100
1 0 0
I.e., if your old point is (50,100), the formulas are
newX = 0*50 -1*100 + 100*1 = 0
newY = 1*50 + 0*100 + 0 = 50
The point (50,100) gets rotated 90degrees around the point (50,50) to become (0,50), just as expected.
Where it starts getting unexpected is when you try to transform
1 0 0
0 1 0
to
0 -1 100
1 0 0
If you transform each number in the matrix from the start value to the end value, the half-way point would be
0.5 -0.5 50
0.5 0.5 0
Which works out as the matrix for scaling the rectangle down by half and rotating it 45degrees around (50,50).
All of that might be more math than you needed to know, but I hope it helps make sense of what's going on.
Regardless, the easy solution is to make sure that you always match up the types of transforms before and after the animation, so that the program can interpolate the original values, instead of the matrix values.
I have a path in SVG defining a clipPath. Lines (tick marks) are drawn and clipped to the path.
When I perform an animation of the lines, they retain the original clipping. I would like them to be 're-clipped' at each stage of the animation.
Question: Is there an easy way to have the clipping performed during the transition?
Sample problem code:
http://jsfiddle.net/Q29TA/
When you click on the svg, it demonstrates the animation.
Relevant snippets:
d3.select( "#g-container" )
.selectAll( "line" )
.data( y.ticks( 10 ) )
.enter()
.append( "line" )
.attr( "x1", 0 ).attr( "x2", width )
.attr( "y1", y ).attr( "y2", y )
.attr( "class", "tick-marks" )
.attr( "clip-path", "url(#myclip)" );
d3.select( "svg" )
.on("click", function() {
d3.selectAll(".tick-marks")
.transition().duration( 2500 )
.attr( "transform", "translate(0,30)" )
} )
I am open to new ways of doing this, but I can't hardcode an animation that recomputes the line's x1 and x2, since the clipPath could be anything.
Sample picture showing the aftermath of animation (I want the horizontal lines to meet the blue, diagonal line of the container):
It's better to use a single clip-path, just move the clip-path up to the container g element instead:
http://jsfiddle.net/dxZyq/
So (as you've discovered) it seems that clipping paths disregard the elements' transform properties. You could see it also happening – even without animation – if you apply your transform right when the elements are created:
.enter()
.append( "line" )
.attr( "transform", "translate(0,30)" )// <-- Same, "wrong" (i.e. undesired) clipping
.attr( "x1", 0 ).attr( "x2", width )
.attr( "y1", y ).attr( "y2", y )
.attr( "class", "tick-marks" )
.attr( "clip-path", "url(#myclip)" );
From messing around, I've found that one way around this issue is grouping all the elements that need to move and translating just the group. You can see it here: http://jsfiddle.net/Q29TA/2/ (note, I'm just translating the group you created, which also has the blue path in it, so it's not quite right).
The other way of getting around it is not to apply the transform, and instead, move the lines by animating their y1 and y2: http://jsfiddle.net/Q29TA/1/