Change color of shapes dynamicaly

2 posts, 0 answers
  1. Alex
    Alex avatar
    4 posts
    Member since:
    Feb 2014

    Posted 30 Jun 2014 Link to this post

    Hello all,

    I tried to change the color of the shapes by code, but I tried 10 different things and non of them are working.
    The diagramm has a visualTemplate! Without this template it works.

    The color is "blue" for all shapes, and is not changing!!

    Here are the code snippet! Everything is experimental so do not comment the code ^^

     var diagram = $("#diagram").kendoDiagram().data("kendoDiagram");

      

        var visualTemplate = function(options) {
            var dataviz = kendo.dataviz,
            dataItem = options.dataItem;

            var g = new dataviz.diagram.Group({
                autoSize: true
            });

            g.append(new dataviz.diagram.Rectangle({
                width: SHAPE_WIDTH,
                height: SHAPE_HEIGHT,
                background: "blue"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.title,
                x: 40,
                y: 110,
                color: "#fff",
                fontSize: 52
            }));
            return g;
        };

        var data = [{
            title: "Folienabsauger",
            colorScheme: "#1696d3"
    }];

            var thediagramm = $("#diagram").kendoDiagram({
                dataSource: new kendo.data.HierarchicalDataSource({
                    data: data
                }),
                shapeDefaults: {
                    visual: visualTemplate
                }
            });

            var diagram = $("#diagram").data("kendoDiagram");
          

            var dataItem = diagram.dataSource.insert(0, {
                title: "TEST!" + i,
                colorScheme: "#FF0000"
            });

          
            var curRow = 0;
            var curCol = 0;

            var diagram2 = $("#diagram").getKendoDiagram();

            for (var i = 0; i < diagram.shapes.length; i++) {
                curRow = Math.floor(i / ROWS);
                curCol = i % COL;
                prevShape = diagram.shapes[i - 1];
                shape = diagram.shapes[i];
                shape.position({ x: X_OFFSET + SHAPE_WIDTH * curCol + X_Seperator * curCol, y: Y_OFFSET + SHAPE_HEIGHT * curRow + Y_Seperator * curRow });
                var options = {
                    background: "#00FF00",
                    stroke: {
                        color: "#00FF00",
                        width: 12
                    },
                    visual: []
                }
                shape.options.dataItem.colorScheme = "red";
                shape.redraw(options);
                diagram2.shapes[0].options.visual = [];
            }
  2. Alex
    Alex avatar
    4 posts
    Member since:
    Feb 2014

    Posted 30 Jun 2014 Link to this post

    Here are a workaround:

    shape = model.getDiagramm().shapes[n];

    $(shape.shapeVisual.domElement).find(

    "rect"

    ).attr(

    "fill"

    ,"red");​​

     

    With best regards,
    Alex​​​​

     

  3. Kendo UI is VS 2017 Ready
Back to Top