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>