We Keep Coding

How we can add transform rotate and scale simultaneously in .setAttribute

I'm working on an SVG an I want to add a scale and rotation transform. The rotate value is dynamic and the scale value is constant.
I tried like this:
boxElem.setAttribute("transform", "rotate(" + rotation + "), scale(0.9)");
It is not working. Only the scale value is having an effect. Can anyone tell me how to add multiple properties inside transform in JS.

setAttribute will result in adding the attribute transform like this :
<div transform="rotate(rotation) scale(0.9)"></div>
you need to update the style of the element :
boxElem.style.transform = "rotate(" + rotation + ") scale(0.9)";

Vertically inverting Raphael SVG shape not working

I have created a fiddle of a bar chart, which is a part of a series of charts I'm creating using Raphael SVG. The other charts are vertically inverting perfectly using scale(1,-1). However, if you apply scale on this fiddle as given here:
SVGpaper.rect((-50 / 2), 0, 50, barHeight).attr({
transform: "t" + t1 + "," + t2 + "s1,-1",
"stroke-width": 1
});
and inspect the bars, the scale is working but the transform for the y-axis is changing and thus not creating any change in the SVG itself.
What is the problem here?

I think with Raph each rect is scaling around its own centre of origin, so in effect there is no visible difference. Whereas you want to scale around a specific centre. So if you use a specific centre of origin for them all like..
Swap
transform: "t" + t1 + "," + t2 + "s1,-1"
for
transform: "t" + t1 + "," + t2 + "s1,-1,0,0"
I think it will do what you are after, eg http://jsfiddle.net/Qru24/14/

How to get the correct mouse position in relation to a div that has has a scale transform applied

I am using CSS transform scale to create a smooth zoom on a div. The problem is that I want to be able to get the correct mouse position in relation to div even when scaled up, but I can seem figure out the correct algorithm to get this data. I am retrieving the current scale factor from:
var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;
When I read the position of the div at various scale settings it seems to report the correct position, i.e. when I scale the div until is is larger the the screen the position left and top values are negative and appear to be correct, as does the returned scale value:
$("#zoom_div").position().left
$("#zoom_div").position().top
To get the current mouse position I am reading the x and y position from the click event and taking away the offset. This works correctly at a scale value of 1 (no scale) but not when the div is scaled up. Here is my basic code:
$("#zoom_div").on("click", function(e){
var org = e.originalEvent;
var pos = $("#zoom_div").position();
var offset = {
x:org.changedTouches[0].pageX - pos.left,
y:org.changedTouches[0].pageY - pos.top
}
var rel_x_pos = org.changedTouches[0].pageX - offset.x;
var rel_y_pos = org.changedTouches[0].pageY - offset.y;
var rel_pos = [rel_x_pos, rel_y_pos];
return rel_pos;
});
I have made several attempts at multiplying dividing adding and subtracting the scale factor to/from from the pageX / Y but without any luck. Can anyone help me figure out how to get the correct value.
(I have simplified my code from the original to hopefully make my question clearer, any errors you may find in the above code is due to that editing down. My original code with the exception for the mouse position issue).
To illustrate what I am talking about I have made a quick jsfiddle example that allows the dragging of a div using translate3d. When the scale is normal (1) the div is dragged at the point where it is clicked. When the div is scales up (2) it no longer drags correctly from the point clicked.
http://jsfiddle.net/6EsYG/12/

You need to set the webkit transform origin. Basically, when you scale up it will originate from the center. This means the offset will be wrong. 0,0 will start in the center of the square. However, if you set the origin to the top left corner, it will keep the correct coordinates when scaling it. This is how you set the origin:
#zoom_div{
-webkit-transform-origin: 0 0;
}
This combined with multiplying the offset by the scale worked for me:
offset = {
"x" : x * scale,
"y" : y * scale
}
View jsFiddle Demo

dont use event.pageX - pos.left, but event.offsetX (or for some browser: event.originalEvent.layerX
div.on('click',function(e) {
var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
});
see my jsFiddle exemple: http://jsfiddle.net/Yukulele/LdLZg/

You may embed the scaled content within an iframe. Scale outside the iframe to enable scaled mouse events within the iframe as mouse events are document scope.

Long labels in jqplot

I am dynamically generating some charts using jqplot.
Some of my labels are very long text strings that don't display very nicely - I have printed them at a 30 degree angle along the x axis but the long labels run off to the right of the page.
Is there a way of setting a maximum width for the label (ideally same as it's bar on the chart) and making the text of the label wrap?

I think you can do it using CSS.
Ticks from xaxis are customizable thanks to .jqplot-xaxis-tick{ width: xxx px;} (respectively jqplot-yaxis-tick, jqplot-y2axis-tick...)

I had the same problem some months ago. Here is the question with a nice solution from #boro :
JqPlot : Set a fix height value for the graph area not including y axe labels

I resolved with a javascript. You need to execute the script on window.onload, otherwise you can't get DOM elements of the charts.
window.onload = function() {
var xAxisLabel = document.getElementsByClassName("jqplot-xaxis-tick");
var i;
for (i = 0; i < xAxisLabel.length; i++) {
if(i%2 == 0)
xAxisLabel[i].style.top = "32px";
}
};
Basically I change the vertical position of the elements in 2%0 position.
Than you need to adjust some css property
.jqplot-xaxis{margin-top:10px; height: 50px !important;}
.jqplot-xaxis is the class of the xaxis label bar.

Using Raphael.js is it possible to position an element relatively and then offset it by an absolute unit?

I have an issue where I have to produce a fluid visualisation but while keeping certain aspects of the design with fixed units. E.g. I have a horizontal bar drawn with a label inside and aligned to the right. I want to position the label exactly 10px from the right hand side of the 38% width rect. Is this possible? I've tried all sorts and can't seem to figure out a nice way of doing it...

Figured it out! So i'm still positioning the label with relative units and then im using a Raphael transform to offset it with absolute units. E.g.
todayLabel = paper.text(
(i * filters.timelineDayWidth) + '%', // x
24, // y
'Today ' + today.getUTCDate() + ' ' +today.getMonthNameShort()
);
todayLabel.attr({
'text-anchor': 'end'
});
todayLabel.transform('t-10,0');