Place decimals on Chart Gauge JS

Asked

Viewed 114 times

2

I need help with a code. At Stackoverflow gringo, I got a code I’d been looking for for for a while and I just thought it paid off. Which in this case is the Chart Gauge. ChartGauge

The problem I’m finding is that he doesn’t recognize numbers with decimal places after the comma. When I put a value for example: 3.5 it rounds to 4 and does not show where this value 3.4 and nor does the arrow go to 3.5 and yes to 4 (round).

I wonder if anyone can help me with the code. I’ve reviewed and I haven’t noticed. I’m an amateur in JS yet. Please if anyone can help

/// ### ---- ### sample level workaround ### ---- ### ///
var fn1 = $.fn.roundSlider.prototype._setProperties;
$.fn.roundSlider.prototype._setProperties = function () {
  fn1.apply(this);
  var o = this.options, r = o.radius, d = r * 2,
      r1 = r - (o.width / 2) - this._border(true),
      svgNS = "http://www.w3.org/2000/svg";
  this._circum = Math.PI * (r1 * 2);

  var $svg = $(document.createElementNS(svgNS, "svg"));
  $svg.attr({ "height": d, "width": d });

  this.$circle = $(document.createElementNS(svgNS, 'circle')).attr({
    "fill": "transparent", "class": "rs-transition", "cx": r, "cy": r, "r": r1,
    "stroke-width": o.width, "stroke-dasharray": this._circum
  }).addClass("path-bg");
  this._setDashOffset(this.$circle, this.options.counterClockwise ? this._start : this._end);
  $svg.append(this.$circle);

  this.$svg_box = $(document.createElement("div")).addClass("rs-transition rs-svg").append($svg).css({
    "height": d, "width": d, "transform-origin": "50% 50%",
    "transform": "rotate(" + (o.startAngle + 180) + "deg)"
  }).appendTo(this.innerContainer);
}

$.fn.roundSlider.prototype._setDashOffset = function ($ele, deg) {
  var flagValue = this.options.counterClockwise ? 0 : 1;
  var pct = (flagValue - (deg / 360)) * this._circum;
  $ele.css({ strokeDashoffset: pct });
}
/// ### ---- ### --------------------- ### ---- ### ///

$("#slider").roundSlider({
  //showTooltip: false,
  circleShape: "half",
  width: 16,
  radius: 125,
  value: 60,
  handleSize: "24,6"
});
.slider_container {
  display: inline-block;
}
.rs-border {
  border-width: 0px;
}
.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-bg-color {
  background-color: transparent;
}
.rs-control circle.path-bg {
  stroke: url(#gradient1);	
  stroke-dashoffset: 0 !important;
  stroke-dasharray: 24 14.1;
}
.slider_label {
  margin-top: 4px;
}
.minl {
  float: left;
  color: #66cc33;
}
.maxl {
  float: right;
  color: #cc0000;
}
.rs-tooltip-text {
  font-size: 34px;
  color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.js"></script>


<h2><a target="_blank" href="http://roundsliderui.com/">roundSlider - v1.3.3</a></h2>

<div class="slider_container">

  <!-- define your gradient values here -->
  <svg width="0" height="0">
    <defs>
      <linearGradient id="gradient1">
        <stop offset="0%" stop-color="#cc0000"/>
        <stop offset="25%" stop-color="#ff6600"/>
        <stop offset="50%" stop-color="orange"/>
        <stop offset="75%" stop-color="#FFFf00"/>
        <stop offset="100%" stop-color="#66cc33"/>
      </linearGradient>
    </defs>
  </svg>

  <div id="slider"></div>
  
  <div class="slider_label">
    <div class="minl">LOW</div>
    <div class="maxl">HIGH</div>
  </div>

</div>

javascript

1 answer

1


Looking at the documentation, just put the option step with a decimal value (eg., .1) that will accept decimal numbers:

/// ### ---- ### sample level workaround ### ---- ### ///
var fn1 = $.fn.roundSlider.prototype._setProperties;
$.fn.roundSlider.prototype._setProperties = function () {
  fn1.apply(this);
  var o = this.options, r = o.radius, d = r * 2,
      r1 = r - (o.width / 2) - this._border(true),
      svgNS = "http://www.w3.org/2000/svg";
  this._circum = Math.PI * (r1 * 2);

  var $svg = $(document.createElementNS(svgNS, "svg"));
  $svg.attr({ "height": d, "width": d });

  this.$circle = $(document.createElementNS(svgNS, 'circle')).attr({
    "fill": "transparent", "class": "rs-transition", "cx": r, "cy": r, "r": r1,
    "stroke-width": o.width, "stroke-dasharray": this._circum
  }).addClass("path-bg");
  this._setDashOffset(this.$circle, this.options.counterClockwise ? this._start : this._end);
  $svg.append(this.$circle);

  this.$svg_box = $(document.createElement("div")).addClass("rs-transition rs-svg").append($svg).css({
    "height": d, "width": d, "transform-origin": "50% 50%",
    "transform": "rotate(" + (o.startAngle + 180) + "deg)"
  }).appendTo(this.innerContainer);
}

$.fn.roundSlider.prototype._setDashOffset = function ($ele, deg) {
  var flagValue = this.options.counterClockwise ? 0 : 1;
  var pct = (flagValue - (deg / 360)) * this._circum;
  $ele.css({ strokeDashoffset: pct });
}
/// ### ---- ### --------------------- ### ---- ### ///

$("#slider").roundSlider({
  //showTooltip: false,
  circleShape: "half",
  width: 16,
  radius: 125,
  value: 3.5,
  handleSize: "24,6",
  step: .1
});
.slider_container {
  display: inline-block;
}
.rs-border {
  border-width: 0px;
}
.rs-control .rs-range-color,
.rs-control .rs-path-color,
.rs-control .rs-bg-color {
  background-color: transparent;
}
.rs-control circle.path-bg {
  stroke: url(#gradient1);	
  stroke-dashoffset: 0 !important;
  stroke-dasharray: 24 14.1;
}
.slider_label {
  margin-top: 4px;
}
.minl {
  float: left;
  color: #66cc33;
}
.maxl {
  float: right;
  color: #cc0000;
}
.rs-tooltip-text {
  font-size: 34px;
  color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.js"></script>


<h2><a target="_blank" href="http://roundsliderui.com/">roundSlider - v1.3.3</a></h2>

<div class="slider_container">

  <!-- define your gradient values here -->
  <svg width="0" height="0">
    <defs>
      <linearGradient id="gradient1">
        <stop offset="0%" stop-color="#cc0000"/>
        <stop offset="25%" stop-color="#ff6600"/>
        <stop offset="50%" stop-color="orange"/>
        <stop offset="75%" stop-color="#FFFf00"/>
        <stop offset="100%" stop-color="#66cc33"/>
      </linearGradient>
    </defs>
  </svg>

  <div id="slider"></div>
  
  <div class="slider_label">
    <div class="minl">LOW</div>
    <div class="maxl">HIGH</div>
  </div>

</div>

  • 1

    Damn SAM, what a wonderful friend. In such a short time someone to help. I thank you so much for the strength. I’m glad there are people like you. Thank you very much. Hug

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.