Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Charts With css3 transform: matrix(...)

3 Answers 203 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Gord
Top achievements
Rank 1
Gord asked on 14 Nov 2014, 09:44 PM
I'm trying to use a kendo chart in a dynamically sized environment. 

To make sure that everything scales properly, I have applied a css transform to the bounding container.

The problem is that when you mouse-over any of the series in the chart, only the series that sit over top of the original size of the chart (before CSS transform is applied) will show the tooltip.  If you mouse over any other series that is scaled outside of the original bounds of the chart, the bar flashes with the highlight color beiefly, then goes back to normal and no tooltip appears at all.

I used the Kendo UI Dojo to generate a sample that exhibits the issue I am seeing:
I copied the chart generation from one of the demos, and applied a transform to the DIV it is inside.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  <div id="wrapper" style="width: 300px; height: 300px; position: relative; transform: matrix(1.5,0,0,1.5,150,150)">
    <div id="example">
    <div class="demo-section k-content">
        <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Gross domestic product growth /GDP annual %/"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    name: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
                }, {
                    name: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                }, {
                    name: "Germany",
                    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
                },{
                    name: "World",
                    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
                }],
                valueAxis: {
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
                    line: {
                        visible: false
                    },
                    labels: {
                        padding: {top: 135}
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }
 
        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>
 
  </div>
</body>
</html>

Are there any work-arounds that can be done to address this, aside from setting the actual size of the chart?  The reason we are not setting the dimensions on the chart explicitly, is because the text does not scale along with the increase in chart size.

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 18 Nov 2014, 09:39 AM
Hi Gord,

Browser support for SVG CSS transforms is buggy. I recommend you to use standard width and height styles to resize the Chart, according to your needs. After each resize, the Chart's resize() method must be called, as explained in the documentation.

http://docs.telerik.com/kendo-ui/using-kendo-in-responsive-web-pages

http://jsbin.com/nahevuyeta/1/edit

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Gord
Top achievements
Rank 1
answered on 12 Jan 2015, 06:29 PM
Hello,

Thank you for the suggestions.

The problem with setting standard width & height sizes, is that we want to provide an interface that retains the same aspect ratio for all components and a scaled font size regardless of screen size (within reason).  We tried setting the size manually on components, but the biggest problem we came across was that we couldn't keep the font sizes properly scaled.  One approach was to use "em" sizes for all components, however when we resized the component and applied a new font size to the outer container, the font sizes would  properly scale, but the components would have the text overlapping instead of repositioning and redrawing with the new font size.

Is there any approach we could take that would achieve this desired result?  I have an algorithm that sets appropriate font sizes based on height & width so that the font scales dynamically with the size of the window.  But when redrawing the components, the text still overlaps with other portions of the chart, especially in the legend section.
0
Dimo
Telerik team
answered on 13 Jan 2015, 09:55 AM
Hi Gord,

The only thing, which comes to my mind is that you can create the Chart with a larger initial size, so that the labels do not overlap. Then, reduce the Chart size with a zoom style or CSS3 transform. In this way the Chart size will change, but the labels will not overlap. The problem now is that the labels overlap initially, and no matter how you resize the widget, they will continue to overlap.

I have no other suggestions at this point.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Gord
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Gord
Top achievements
Rank 1
Share this question
or