Charts With css3 transform: matrix(...)

4 posts, 1 answers
  1. Gord
    Gord avatar
    21 posts
    Member since:
    Jul 2014

    Posted 14 Nov 2014 Link to this post

    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.
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 18 Nov 2014 Link to this post

    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!
     
  3. Gord
    Gord avatar
    21 posts
    Member since:
    Jul 2014

    Posted 12 Jan 2015 in reply to Dimo Link to this post

    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.
  4. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 13 Jan 2015 Link to this post

    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!
Back to Top