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

[Solved] dataviz.diagram shapes are blurred

3 Answers 197 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Casper
Top achievements
Rank 1
Casper asked on 15 Mar 2016, 07:47 AM

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>

3 Answers, 1 is accepted

Sort by
0
Niko
Telerik team
answered on 17 Mar 2016, 09:59 AM
diagram.png

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!
 
0
Casper
Top achievements
Rank 1
answered on 17 Mar 2016, 11:45 AM
blurred.jpg

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.

0
Niko
Telerik team
answered on 18 Mar 2016, 04:46 PM

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!
 
Tags
Diagram
Asked by
Casper
Top achievements
Rank 1
Answers by
Niko
Telerik team
Casper
Top achievements
Rank 1
Share this question
or