CODEWITHSUNDEEP
javascripthtmlgaugejsgauge
Antonio Pose
Antonio Pose

Reputation: 21

Javascript: How to update the max value of a gauge chart?

My current code will only change dynamically the total. I would like to change the Max value dynamically as well, since the max value will change depending on the filter you apply.

The code is the following

    resource1=[
 "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
 "//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"
]

//add scripts to head
$.getScript(resource1[0],function(){
 $.getScript(resource1[1],init1)
})

init1 = function(){
  var h = new JustGage({
    id: "gaugeHoras", 
    value: parseInt($("TOTAL").text()), 
    min: 0,
    max: 30,
    title: "Horas"
  });  


    $("LISTBOX").click(function(){
    h.refresh(parseInt($("TOTAL").text()))

  })

}

Upvotes: 2

Views: 2230

Answers (1)

user2314737
user2314737

Reputation: 29397

The newest version of the library implements refresh(val, max, config) so h.refresh(value,maxValue); will set max to maxValue (source: https://github.com/toorshia/justgage)

resource1 = [
  "//cdn.jsdelivr.net/raphael/2.1.0/raphael-min.js",
 "https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.min.js"
];

//add scripts to head
$.getScript(resource1[0], function() {
  $.getScript(resource1[1], init1)
});

init1 = function() {
  var h = new JustGage({
    id: "gaugeHoras",
    value: parseInt($("TOTAL").text()),
    min: 0,
    max: 30,
    title: "Horas"
  });


  $("#LISTBOX").click(function() {
    var value = Math.floor(Math.random() * 31);
    var maxValue = Math.floor(Math.random() * 40 +30);
    h.refresh(value,maxValue);   
  })

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>

<div class="container">
  <div id="gaugeHoras" class="gauge"></div>
  <button id="LISTBOX">click</button>
</div>

Upvotes: 1

Related Questions