dataviz.diagram shapes are blurred

4 posts, 0 answers
  1. Casper
    Casper avatar
    9 posts
    Member since:
    Feb 2015

    Posted 15 Mar Link to this post

    Hi

    I'm having a problem where some shapes are blurred which reduces the visible appeal of my page. Again, I can't seem to be able to create a snippet with Dojo. I just get an error message saying "Can't create snippet. Retry"

    In the example I posted below, you will see the line underlying the names show perfectly for some nodes and blurred for others.

    The problem seems to occur when the number of levels is 3 or more.

    Please help!

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.moonlight.min.css" />
     
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
    <body>
    <div id="example">
        <div id="diagram"></div>
        <script>
            var data = [{
                firstName: "Antonio",
                lastName: "Moreno",
                image: "antonio.jpg",
                title: "Team Lead",
                colorScheme: "#FFF",
                items: [{
                    firstName: "Elizabeth",
                    image: "elizabeth.jpg",
                    lastName: "Brown",
                    title: "Design Lead",
                    colorScheme: "#ef6944",
                    items: [{
                        firstName: "Ann",
                        lastName: "Devon",
                        image: "ann.jpg",
                        title: "UI Designer",
                        colorScheme: "#ef6944"
                    }]
                }, {
                    firstName: "Diego",
                    lastName: "Roel",
                    image: "diego.jpg",
                    title: "QA Engineer",
                    colorScheme: "#ee587b",
                    items: [{
                        firstName: "Fran",
                        lastName: "Wilson",
                        image: "fran.jpg",
                        title: "QA Intern",
                        colorScheme: "#ee587b"
                    }]
                }, {
                    firstName: "Felipe",
                    lastName: "Izquiedro",
                    image: "felipe.jpg",
                    title: "Senior Developer",
                    colorScheme: "#75be16",
                    items: [{
                    firstName: "Elizabeth",
                    image: "elizabeth.jpg",
                    lastName: "Brown",
                    title: "Design Lead",
                    colorScheme: "#ef6944",
                    items: [{
                        firstName: "Ann",
                        lastName: "Devon",
                        image: "ann.jpg",
                        title: "UI Designer",
                        colorScheme: "#ef6944"
                    }]
                }, {
                    firstName: "Diego",
                    lastName: "Roel",
                    image: "diego.jpg",
                    title: "QA Engineer",
                    colorScheme: "#ee587b",
                    items: [{
                        firstName: "Fran",
                        lastName: "Wilson",
                        image: "fran.jpg",
                        title: "QA Intern",
                        colorScheme: "#ee587b"
                    }]
                }, {
                    firstName: "Felipe",
                    lastName: "Izquiedro",
                    image: "felipe.jpg",
                    title: "Senior Developer",
                    colorScheme: "#75be16",
                    items: [{
                        firstName: "Daniel",
                        lastName: "Tonini",
                        image: "daniel.jpg",
                        title: "Developer",
                        colorScheme: "#75be16"
                    }]
                }]
                }]
            }];
     
            function visualTemplate(options) {
                var dataviz = kendo.dataviz;
                var g = new dataviz.diagram.Group();
                var dataItem = options.dataItem;
     
                g.append(new dataviz.diagram.Rectangle({
                    width: 210,
                    height: 75,
                    stroke: {
                        width: 0
                    },
                    fill: {
                        gradient: {
                            type: "linear",
                            stops: [{
                                color: "#293540",
                                offset: 0,
                                opacity: 0.5
                            }, {
                                color: "#293540",
                                offset: 1,
                                opacity: 0.6
                            }]
                        }
                    }
                }));
              g.append(new dataviz.diagram.Rectangle({
                        width: 110,
                        height: 1,
                        x: 80,
                        y: 60,
                        stroke: {  
                            width: 0,
                            color: "#293540"
                        },
                        fill: {
                            gradient: {
                                type: "linear",
                                stops: [{
                                    color: "#FFF",
                                    offset: 0,
                                    opacity: 0.1
                                }, {
                                    color: "#FFF",
                                    offset: 1,
                                    opacity: 1
                                }]
                            }
                        }
                    }));
                g.append(new dataviz.diagram.TextBlock({
                    text: dataItem.firstName + " " + dataItem.lastName,
                    x: 85,
                    y: 20,
                    fill: "#fff"
                }));
     
                g.append(new dataviz.diagram.TextBlock({
                    text: dataItem.title,
                    x: 85,
                    y: 40,
                    fill: "#fff"
                }));
     
                g.append(new dataviz.diagram.Image({
                    source: "../content/dataviz/diagram/people/" + dataItem.image,
                    x: 3,
                    y: 3,
                    width: 68,
                    height: 68
                }));
     
                return g;
            }
     
            function createDiagram() {
                $("#diagram").kendoDiagram({
                    dataSource: new kendo.data.HierarchicalDataSource({
                        data: data,
                        schema: {
                            model: {
                                children: "items"
                            }
                        }
                    }),
                    layout: {
                        type: "layered"
                    },
                    shapeDefaults: {
                        visual: visualTemplate
                    },
                    connectionDefaults: {
                        stroke: {
                            color: "#979797",
                            width: 2
                        }
                    }
                });
     
                var diagram = $("#diagram").getKendoDiagram();
                diagram.bringIntoView(diagram.shapes);
            }
     
            $(document).ready(createDiagram);
        </script>
    </div>
     
     
    </body>
    </html>

  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 17 Mar Link to this post

    Hello,

    On my side the diagram does not look blurred. In what browser are you viewing the diagram? Blurs could occur if the diagram is zoomed, but that depends on the SVG rendering of the browser.

    Here is the code in the dojo - http://dojo.telerik.com/@nlazarov/OVeXu and attached you will find the screenshot from by browser.

    Regards,
    Niko
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Casper
    Casper avatar
    9 posts
    Member since:
    Feb 2015

    Posted 17 Mar Link to this post

    Hi Niko

    Thank you for the response.

    I tried Mozilla Firefox 45.0 and Google Chrome Version 49.0.2623.87 (64-bit), both running on Ubuntu 15.10.

    The problem does seem to be related to zooming. My own site now shows correctly after I zoomed in and out a couple of times. On the Dojo example it blurs on alternate zoom levels (including no zoom). I attaches a screenshot - you can clearly see the blurred lines on the bottom 3 nodes.

  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 18 Mar Link to this post

    Hello,

    The blur is related to the zoom of the diagram and it comes from the rendering of SVG in browsers (Firefox and Chrome for Ubuntu in this case). It seems to happen when the diagram is zoomed out.

    Since the issue comes from the browser there is nothing we can do to improve upon the situation.

    Regards,
    Niko
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready