Max value

[SergeC]

As I can see max value is hardcoded to 100. I'd like to use this script in time countdown where I have 365 days, 23 hours, 12 minutes, 30 seconds left to some event. We know that in day we have 24 hours. Is it possible to have changeable max value?

[rendro]

Currently this is not possible, but you can implement the math yourself before calling the update method

[Deleted user]

If you want to update the upper bound of the chart but still maintain control of the detailed value shown see the following.

In my case, I wanted the control to have a range from 0-10 (e.g a value of 5 would result in the control being 50% full). The advice above will update the scale, but also the value being displayed (e.g. 5/10 -> 50/100. If you want to maintain the value (5) but adjust the scale (100->10), see the following.

Note, I've also included a sample of how to update the value color separately from the control color. If you'd like to add units or additional content to the value see the 'content' option for the percent:after css class below.

.simple-pie {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center
}
.simple-pie canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.percent {
    display: inline-block;
    line-height: 110px;
    z-index: 2;
}
.percent:after {
    content: "";
    margin-left: .1em;
    font-size: .8em;
}

<script src="jquery.easypiechart.min.js"></script>

<span id="gauge" class="simple-pie" data-percent="100">
    <span id="gauge-value" class="percent"></span>
</span>

      var cur = foo();
      var scaledValue = (100 * cur / 10);
      var elem = $("#gauge");
      if (elem) {
        elem.easyPieChart({
            animate: 2000,
            barColor: "#26B99A",
            trackColor: "#D3D3D3",
            scaleColor: false,
            lineWidth: 20,
            trackWidth: 16,
            lineCap: "butt",
            percent: scaledValue,
            onStep: function (from, to, percent) {
                $(this.el).find('.percent').text(Number((percent / 10).toFixed(1)));
            }
        });

        setTimeout(function() {
            elem.data("easyPieChart").update(scaledValue);
        }, 1000);

        $("#gauge-value").css("color", getRiskScoreColor(cur));
      }