on 03-10-2014 2:41 PM
Hi all,
i have a small but annoying problem with the combined column chart in DS 1.2 and hope you can give me some helpful input.
My chart has four data series - two displayed as columns and the others as lines, whereby logically each line-series refers to one column-series.
What i want is, that always only the marker of a line-series is displayed centered above its corresponding column (see Fig.2) .
The following chart shows, what i currently got realized:
Figure 1
By using css styling, i could hide the lines between the markers but the markers are still displayed centered between the column-groups:
.myChart *.v-morphable-line{
visibility: hidden;
}
Now i tried to shift the two line-series horizontally by using -ms-transform:translate(). That works within the MS-Developer tools(F12) (see Figure 2) but it doesn´t work when it´s defined in the css-stylesheet. I tried to get it with the following css-definition:
.myChart * .v-marker{
-ms-transform:translate(12);
}
Figure 2
Unfortunately this has no effect.
I have no ideas how to fix that issue. I hope anybody out there could give the golden hint.
Thanks so far & kind regards,
Sebastian
Hi Sebastian,
unfortunately it seems like the CSS transform property is not supported for SVG elements in IE:
(source)
Also take a look at the Cascading Style Sheets (CSS) properties that you can use with Scalable Vector Graphics (SVG) in IE9+
CSS Attributes: Scalable Vector Graphics (SVG)
So, the following CSS does work for example in Chrome, but doesn't work in IE:
.myChart .v-marker {
-webkit-transform: translate(12px,0px); /* Chrome, Safari 3.1+ */
-moz-transform: translate(12px,0px); /* Firefox 3.5+ */
-ms-transform: translate(12px,0px); /* IE 9 */
-o-transform: translate(12px,0px); /* Opera 10.50-12.00 */
transform: translate(12px,0px); /* Firefox 16+, IE 10+, Opera 12.10+ */
}
To change the positioning via transform in IE, you would probably need to use javascript to add it as an attribute directly on the desired SVG elements.
To achieve what you want to achieve with css only in IE, you need to reevaluate what css properties can be used on SVG elements in IE at all.
Regards,
David
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Dear Sebastian,
I had similar case where i used translate for new browser. At this time I used the IE Transform To Matrix Filter website: CSS3 Transform to Matrix Filter converter
Using translate(12px,0px) the result would be as noted below.
I usually only use the -ms-filter .... working in IE8 and IE9 (ignoring IE6 and IE7)
Please note the margin correction below.
Please let me know if it helps in your case.
best regards,
Daniel
#transformedObject {
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=0,
M21=0,
M22=1,
SizingMethod='auto expand');
/*
* To make the transform-origin be the middle of
* the object. Note: These numbers
* are approximations. For more accurate results,
* use Internet Explorer with this tool.
*/
margin-left: 3px;
margin-top: -3px;
}
Hey guys,
thanks for your worthwhile input. Unfortunately Daniel´s solution also doesn´t work. Like David wrote, it seems that IE really ignores CSS for some SVG-transformations.
But despite my current problem i´m sure i will use that hint for any other problem in the future.
Anyway - thanks for your help guys! But of course i´m still open for further help
Kind regards,
Sebastian
Hi Sebastian,
In CSS transforms are not working, a workaround to achieve your requirement may be , by using multiple charts superimposed on each other and hiding the irrelevant portions of upper charts. You may use fix scales to become sure for proper positioning of markers and columns.
Regards,
Hi Daniel,
can you please share your similar case where using of the "matrix dx filter" in IE worked? How did your actual css selector (or whole css) look like and what did you want to achieve with the filter in your chart?
Does it also work in IE10?
Thanks!
But an important info to note is that dx filters are no longer supported as of IE10 because IE10 finally has some standards-based alternatives, which unfortunately still don't work on svg elements in IE.
Best regards,
David
| User | Count |
|---|---|
| 3 | |
| 3 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.