This is a migrated thread and some comments may be shown as answers.

can't change the fill color for shape

2 Answers 145 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Mazen
Top achievements
Rank 1
Mazen asked on 12 Mar 2019, 12:13 PM

I am trying to change the color of the shape by using the below code. but not working by any way.

please advice what I need to change to set new color to the shape

 

<!DOCTYPE html>
<html>
<head>
</head>
<body>


  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.1.220/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script></head>



<div id="diagram"></div>
<script>
    function createDiagram() {
        $("#diagram").kendoDiagram({
            editable: {
                rotate: false,
                resize: false
            },
            pannable: false,
            zoomMax: 1,
            zoomMin: 1,
            shapeDefaults: {
                visual: visualTemplate,
                connect: false
            },
            connectionDefaults: {
                editable:
                {
                    drag: false
                }
            }
        });
    }

  
  
  function Data() {
        try {
           var diagram_data = $("#diagram").data("kendoDiagram");
           var diagram = $("#diagram").getKendoDiagram();
           diagram_data.dataSource.add({
                                    mac_id: "#12345",
                                    power_of_battry_value: "100",
                                    humidity: "60%",
                                    temperature: "33",
                                   
                                });
          //working fine
          diagram.shapes[0].position(new kendo.dataviz.diagram.Point(50, 50));
                      
           // working fine
          diagram.shapes[0].dataItem.mac_id = "mac_id";
          diagram.shapes[0].dataItem.humidity = "humidity";
          diagram.shapes[0].dataItem.temperature = "temperature";
          diagram.shapes[0].redrawVisual();
         
         
          
          // not working  
          diagram.shapes[0].options.fill.color =  "black";
          diagram.shapes[0].redraw();

          // not working  
          diagram.shapes[0].options.fill.color =  "black";
          diagram.shapes[0].redrawVisual(); 
          
          // not working 
          diagram.shapes[0].redraw({
            fill: {
              color: "black"
            }
          });
          
                       
             
        }
        catch (e)
        { alert(e); }
    }
    $(document).ready(function () {
        createDiagram();
        Data();
    });


    

    function visualTemplate(options) {
        var dataviz = kendo.dataviz;
        var dataItem = options.dataItem;
        
        
        var g = new dataviz.diagram.Group({ id: dataItem.mac_id.trim() } );
        g.append(new  kendo.dataviz.diagram.Rectangle({
            id: dataItem.mac_id.trim(),
            width: 140,
            height: 75,
            x: 0,
            y: 0,
            fill: {
                color: "blue"
            }
        }));

        g.append(new dataviz.diagram.TextBlock({
            text: dataItem.mac_id.trim(),
            x: 10,
            y: 10,
            fill: "#fff"
        }));
        g.append(new dataviz.diagram.TextBlock({
            text: "T: " + dataItem.temperature,
            x: 10,
            y: 25,
            fill: "#fff"
        }));
        g.append(new dataviz.diagram.TextBlock({
            text: "H: " + dataItem.humidity,
            x: 10,
            y: 40,
            fill: "#fff"
        }));
       

        return g;
    }

</script></body>
</html>

2 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 14 Mar 2019, 09:18 AM
Hi Mazen,

This happens because the visualTemplate function uses a hard-coded 'blue' color for the fill of the shape Rectangle, so no matter what parameter is passed, it will always be blue.

In general, this is a correct approach:
diagram.shapes[0].options.fill.color =  "black";
diagram.shapes[0].redrawVisual();

You just need to adjust the visualTemplate logic:
g.append(new  kendo.dataviz.diagram.Rectangle({
    id: dataItem.mac_id.trim(),
    width: 140,
    height: 75,
    x: 0,
    y: 0,
    fill: {
        color: options.fill.color
    }
}));

Here, you can test the updated example:
https://dojo.telerik.com/OLiqurAd

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mazen
Top achievements
Rank 1
answered on 14 Mar 2019, 07:48 PM

thanks for your help. working fine

regards

Tags
Diagram
Asked by
Mazen
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Mazen
Top achievements
Rank 1
Share this question
or