Is it possible to update the gauge without "starting from 0"
Closed this issue · 3 comments
wmmihaa commented
Hi, great widget and thanks for the work you've put in,
Two questions:
- Would it be possible to update the Gauge from the current position rather than from "0"?
- Would be great if I could use knockout and data bind the data-percent valud to a view model rather than using $("#aGauge").gaugeMeter({ percent: 42 });
Again, thanks
Mictronics commented
With your first question you probably mean the behavior that the bargraph will be redrawn from 0 to value on update. This is what parameter "data-animationstep" sets. A value of 0 will stop animation and the bargraph will be just update to value without being redrawn.
I will look at knockout and try to get this implemented. May take a while.
Mictronics commented
A possible solution for your problem is the usage of custom bindings in KO. You can extent this for any other data attribute that changes dynamically through your view model.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GaugeMeter.js - jQuery Plugin</title>
<meta name="description" content="Easy to use guage meter JavaScript plugin using jQuery">
<meta name="author" content="Mictronics">
<style>
.GaugeMeter{
Position: Relative;
Text-Align: Center;
Overflow: Hidden;
Cursor: Default;
}
.GaugeMeter SPAN,
.GaugeMeter B{
Margin: 0 23%;
Width: 54%;
Position: Absolute;
Text-Align: Center;
Display: Inline-Block;
Color: RGBa(0,0,0,.8);
Font-Weight: 100;
Font-Family: "Open Sans", Arial;
Overflow: Hidden;
White-Space: NoWrap;
Text-Overflow: Ellipsis;
}
.GaugeMeter[data-style="Semi"] B{
Margin: 0 10%;
Width: 80%;
}
.GaugeMeter S,
.GaugeMeter U{
Text-Decoration:None;
Font-Size: .60em;
Font-Weight: 200;
Opacity: .6;
}
.GaugeMeter B{
Color: Black;
Font-Weight: 200;
Font-Size: 0.85em;
Opacity: .8;
}
BODY{
Margin: 0;
Padding: 0;
Width: 100%;
}
#Header{
min-Height:360px;
}
HEADER,
FOOTER{
Width: 100%;
z-Index: 1;
Top: 0;
Margin: 0;
Padding: 10px 0 0 0;
Text-Align: Center;
Background: #21B4F9;
Background: #2C94E0;
Background: Linear-Gradient(45deg, #2C94E0, #21B4F9), URL(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAnCAQAAAAmqpm+AAAAUUlEQVR4AWMgDvyXJEoV7/AwjnckGzdq3Khxo8apDQvj/kuCIS9OqIYCefFD4tzG+F+NGFW0Mo7ysBvNFaPGjRo3apzkIDfuP89/XipASQgEAF4fpQGYXVnnAAAAAElFTkSuQmCC);
Background-Blend-Mode: Lighten;
Box-Shadow: 0 0 20px 0 rgba(0,0,0,.4);
-Moz-Animation: BluePrint 60s Infinite;
-Webkit-Animation: BluePrint 60s Infinite;
Animation: BluePrint 60s Infinite;
}
@-moz-keyframes BluePrint{
0% {Background-Position: 0 0;}
100% {Background-Position: 1100% 100%;}
}
@-webkit-keyframes BluePrint{
0% {Background-Position: 0 0;}
100% {Background-Position: 1100% 100%;}
}
@keyframes BluePrint{
0% {Background-Position: 0 0;}
100% {Background-Position: -100% 100%;}
}
HEADER H1{
Color: White;
Font: Normal 400 28px/28px "Helvetica", Arial;
Margin: 30px Auto 20px Auto;
Text-Shadow: 0 2px 10px rgba(0,0,0,.3);
}
HEADER P{
Color: White;
Font: Normal 200 18px/22px "Helvetica", Arial;
Margin: 0 Auto;
Text-Shadow: 0 1px 5px rgba(0,0,0,.3);
}
HEADER P.SubTitle{
Color: White;
Font: Normal 200 15px/22px "Helvetica", Arial;
Margin: 0 Auto;
Text-Shadow: 0 1px 5px rgba(0,0,0,.3);
}
HEADER .Preview{
Overflow: Auto;
Margin-Top: 30px;
Display: Inline-Block;
}
HEADER .Preview .GaugeMeter{
Margin: 0 10px;
}
</style>
<script type='text/javascript' Xsrc="jquery-3.3.1.min.js" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type='text/javascript' src='knockout-3.4.2.js'></script>
<script type='text/javascript' src="GaugeMeter.js"></script>
</head>
<body>
<header id="Header">
<div class="Preview">
<div class="GaugeMeter" id="PreviewGaugeMeter" data-bind="gaugeValue: Percent" data-append="mph" data-size=200 data-theme="White" data-width=15 data-style="Arch" data-label="Speed" data-animationstep="0"></div>
</div>
</header>
<script>
$(document).ready(function () {
// Initialize GaugeMeter plugin
$(".GaugeMeter").gaugeMeter();
// Bind new handler to init and update gauges.
ko.bindingHandlers.gaugeValue = {
init: function(element, valueAccessor) {
$(element).gaugeMeter({ percent: ko.unwrap(valueAccessor()) });
},
update: function(element, valueAccessor) {
$(element).gaugeMeter({ percent: ko.unwrap(valueAccessor()) });
}
};
// Create view model with inital gauge value 12%
// Use observable for easy update.
var myViewModel = {
Percent: ko.observable(12)
};
ko.applyBindings(myViewModel);
// Update gauge value through observable.
myViewModel.Percent(33);
});
</script>
</body>
</html>
wmmihaa commented
Thanks mate, that worked beautiful!