Available only in PRO Edition
The widget is available in the Webix Pro edition.
The Gage widget allows visualizing alteration of data values with the help of color representation of the displayed value.
Basic configuration for Gage initialization looks like this:
webix.ui({
view: "gage",
id: "gage1",
value: 60,
minRange: 0,
maxRange: 100,
label: "Speed",
placeholder: "km/hour",
smoothFlow: false,
scale:5,
stroke:10
});
Main Properties
The full list of available configuration properties is given in the Gage API.
You can specify custom colors for the Gage widget, using the color property. There are two possible options:
webix.ui({
view: "gage",
minRange: 0,
maxRange: 100,
color:"green"
});
var color = function(val){
if (val < 40) return "green";
if (val < 80) return "orange";
return "red";
};
webix.ui({
view: "gage",
minRange: 0,
maxRange: 100,
color:color,
label: "Pressure"
});
Related sample: Gage Chart - Custom Colors
It is possible to load data into Gage from an external data source and get data from gage as well.
You can choose one of two ways to load data into Gage (set the gage value):
webix.ui({
view:"form",
id:"form1",
width: 500,
elements:[
{ view:"gage", name:"value"}
]
});
$$("form1").load(url);
webix.ui({
view:"gage",
id: "gage2"
});
webix.ajax(url).then(function(data){
// console.log(data.json());
$$("gage2").setValue(data.json().value)
});
To get data from Gage (the set value), you can use the getValue method:
webix.ui({
view:"gage",
id: "gage3"
});
webix.ajax(url).then(function(data){
$$("gage3").setValue(data.json().value)
var gageValue = $$("gage3").getValue(data.json().value);
// console.log("gage value is " + gageValue);
});
If you need to change the speed of animation, you can do this via CSS by addressing the following classes:
.webix_gage_gradient_point_animated {
transition: transform 1.3s linear;
}
.webix_gage_animated {
animation: gage_dash 1.3s linear forwards;
transition: stroke 1.3s linear, stroke-dasharray 1.3s linear;
}
@keyframes gage_dash {
to {
stroke-dashoffset: 0;
}
}
Back to top