Need help with diagram calling remote api

2 posts, 0 answers
  1. B Narahari
    B Narahari avatar
    5 posts
    Member since:
    May 2013

    Posted 18 Oct Link to this post

    Hi,

    I am trying to display a diagram with the following code. I took this from the "Editing" sample posted in Telerik site. After ensuring that it works with the Telerik's data services on my page, I am trying to use it with my own service. This doesn't work. Can someone please help?

    Please note: I have intentionally commented the connection piece to first debug the data source piece. I am also attaching a sample of my connections service which returns connections between two entities using LE_Code & F_LE_Code (whose values can be same sometimes. So, we need to add a filter to filter out the items where LE_Code & F_LE_Code are the same). Please suggest how should I specify the connections code and schema? 

     

    Code

     
     function visualTemplate(options) {
                            var dataviz = kendo.dataviz;
                            var g = new dataviz.diagram.Group();
                            var dataItem = options.dataItem;
                             
                                g.append(new dataviz.diagram.Rectangle({
                                    width: 240,
                                    height: 67,
                                    stroke: {
                                        width: 0
                                    },
                                    fill: "#e8eff7"
                                }));
     
                            return g;
                        }
     
                        function onDataBound(e) {
                            var that = this;
                            setTimeout(function () {
                                that.bringIntoView(that.shapes);
                            }, 0);
                        }
     
                        //function createDiagram() {
                            //var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
     
                            var shapesDataSource = {
                                batch: false,
                                transport: {
                                    read: {
                                        url: "Server/SQLService.svc/GetLEData",
                                        dataType: "jsonp"
                                    }//,
                                    //update: {
                                    //    url: serviceRoot + "/DiagramShapes/Update",
                                    //    dataType: "jsonp"
                                    //},
                                    //destroy: {
                                    //    url: serviceRoot + "/DiagramShapes/Destroy",
                                    //    dataType: "jsonp"
                                    //},
                                    //create: {
                                    //    url: serviceRoot + "/DiagramShapes/Create",
                                    //    dataType: "jsonp"
                                    //}
                                },
                                schema: {
                                    model: {
                                        id: "id",
                                        fields: {
                                            id: { from: "PID", type: "number", editable: false },
                                            LE_Code: { type: "string" },
                                            LE_Country: { type: "string" }
                                        }
                                    }
                                }
                            };
     
                            var connectionsDataSource = {
                                batch: false,
                                transport: {
                                    read: {
                                        url: serviceRoot + "/DiagramConnections",
                                        dataType: "jsonp"
                                    }
                                },
                                schema: {
                                    model: {
                                        id: "id",
                                        fields: {
                                            id: { from: "Id", type: "number", editable: false },
                                            from: { from: "FromShapeId", type: "number" },
                                            to: { from: "ToShapeId", type: "number" },
                                            fromX: { from: "FromPointX", type: "number" },
                                            fromY: { from: "FromPointY", type: "number" },
                                            toX: { from: "ToPointX", type: "number" },
                                            toY: { from: "ToPointY", type: "number" }
                                        }
                                    }
                                }
                            };
     
                            $("#diagram").kendoDiagram({
                                dataSource: shapesDataSource,                           
                                layout: {
                                    type: "tree",
                                    subtype: "tipover",
                                    underneathHorizontalOffset: 140
                                },
                                shapeDefaults: {
                                    visual: visualTemplate,
                                    content: {
                                        template: "#= dataItem.JobTitle #",
                                        fontSize: 17
                                    }
                                },
                                connectionDefaults: {
                                    stroke: {
                                        color: "#586477",
                                        width: 2
                                    }
                                },
                                dataBound: onDataBound
                            });

     

    Sample JSON data returned from my GetLEData service

    [{"LE_Code":"CO001","LE_Country":"USA","PID":1},{"LE_Code":"CO002","LE_Country":"Canada","PID":2},{"LE_Code":"CO100","LE_Country":"USA","PID":3},{"LE_Code":"CO101","LE_Country":"China","PID":4},{"LE_Code":"CO105","LE_Country":"United States","PID":5},{"LE_Code":"CO110","LE_Country":"United States","PID":6},{"LE_Code":"CO180","LE_Country":"Canada","PID":7},{"LE_Code":"CO210","LE_Country":"Brazil","PID":8}]

     

    Sample JSON data returned from my connections service

    [{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":1,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":2,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":58,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":59,"Performed":1,"Return":20,"Treatment":"% Sales","TreatmentID":1},{"AccountID":5,"Country":"Isle Of Man","F_LE_Code":"CO790","Function":2,"LE_Code":"CO790","Label":"CSP","PID":60,"Performed":1,"Return":1,"Treatment":"Cost +","TreatmentID":2},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":61,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":62,"Performed":1,"Return":-2,"Treatment":"% Sales","TreatmentID":1}]

     

    Appreciate your help!

    Thanks,

  2. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 23 Oct Link to this post

    Hello, Narahari,

    Thank you for the provided information.

    The shapes data an schema looks good, if I used the same data the shapes are correctly shown. Only the template should be changed to "#= dataItem.LE_Country #", or "#= dataItem.LE_Code#".

    For the connections properties, depending on the logic all of the properties in the returned JSON has to be mapped to the schema properties like:

    schema: {
        model: {
            id: "id",
            fields: {
                id: { from: "Id", type: "number", editable: false },//Field form the JSON which is the 'ID'
                from: { from: "FromShapeId", type: "number" },//Field form the JSON which is 'from'
                to: { from: "ToShapeId", type: "number" }, //Field form the JSON which is the 'to'
                fromX: { from: "FromPointX", type: "number" },//Field form the JSON which is the 'fromX'
                fromY: { from: "FromPointY", type: "number" },//Field form the JSON which is the 'fromY'
                toX: { from: "ToPointX", type: "number" },//Field form the JSON which is the 'toX'
                toY: { from: "ToPointY", type: "number" },//Field form the JSON which is the 'toY'
            }
        }
    }

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top