cancel
Showing results for 
Search instead for 
Did you mean: 

CSS-Customizing of Column-Combination chart

Former Member
0 Kudos

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

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi Sebastian,

unfortunately it seems like the CSS transform property is not supported for SVG elements in IE:

  • IE9-11 seemingly does not apply CSS transforms to SVG elements in the DOM.
  • However, SVG supports transforms via the "transform" attribute directly on SVG elements.

(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

Former Member
0 Kudos

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;

}

Former Member
0 Kudos

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

Former Member
0 Kudos

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,

Former Member
0 Kudos

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

Former Member
0 Kudos

Dear David,

I'was wrong, my case where I used ms-filter was outside the SVG.

Why is MS not able to implement the standard... .

Sorry.

Daniel

Answers (0)