Adding variable to javascript function not working

Question

I am working on a little dashboard overview of a ticket system which runs a little graph on the side. This graph is rendered via the jqx graphs. The rendering itself works fine, but its the tooltip that causes me some headaches.

$(document).ready(function() {

  var over = <?php echo '100'; ?>;
  var totaal = <?php echo '400'; ?>;

  $('#bar-gauge-uren').jqxBarGauge({

    colorScheme: "scheme04",
    values: [over],
    max: [totaal],
    relativeInnerRadius: 0.8,
    tooltip: {

      visible: true,
      formatFunction: function(over, totaal) {

        var realVal = parseInt(over);
        var totaalVal = parseInt(totaal);
        alert(totaalVal);
        return ('Totaal aantal uren: ' + totaalVal + ' <br/>Price Index:' + realVal);
        
      },
    }
  });
});

I am trying to acces in my function 2 variables. The totaal variable and the over variable. The over variable works fine, which is being displayed in the overview just fine, but the totaal variable isn't. I tried to alert it out, but it returns 0, while it works fine when it's being called in the graph rendering (it displays 400 on the bar as a total, since my red bar is only filled to 100 see image )

I am not sure what i do wrong. Do I pass my variable wrong in the function?

Mike Cluck · Accepted Answer · 2017-04-11 18:33:07Z

3

The problem is that the formatFunction function also passes in a variable with the same name. It shadows any other variables of the same name.

Example:

var x = 10;
function f() {
  console.log(x); // 10
}

function g(x) {
  console.log(x); // Whatever was passed to g
}

f();
g(123);

If you want to capture the outer variable, either remove totaal from the formatFunction definition or name it something else.

formatFunction: function(over) {
    ...
}

or

formatFunction: function(over, anotherVariableName) {
    ...
}

answered Apr 11, 2017 at 18:33

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dorvalla Over a year ago

I removed both variables from the function and it seems to work fine. I am a php scripter by heart so I am confused to not add a variable to a function, hence I think I approached this function the wrong way. Thanks for clearing this up to me @Mike C

luispa · Accepted Answer · 2017-04-11 18:41:11Z

0

Convert to int before,

 $(document).ready(function (){

        var over = <?php $num = "100"; echo (int)$num; ?>;

        var totaal = <?php $num = "400"; echo (int)$num; ?>;

        $('#bar-gauge-uren').jqxBarGauge({

            colorScheme: "scheme04", values: [over], max: [totaal],  relativeInnerRadius: 0.8, tooltip: {

                visible: true, formatFunction: function (over, totaal){

                    var realVal = parseInt(over);

                    var totaalVal = parseInt(totaal);

                    alert(totaalVal);

                    return ('Totaal aantal uren: ' + totaalVal +' <br/>Price Index:' + realVal);
                },

            }

        });

    });

answered Apr 11, 2017 at 18:41

luispa

3515 silver badges8 bronze badges

Comments

andreim · Accepted Answer · 2017-04-11 18:43:00Z

The "values" property refers to each arc in the gauge that will be drawn. So having values: [over] will draw you one arc like in your image filled in red proportional to the amount of "over" variable value. But in order to know how much red to draw inside that arc you need a range of values, thus the "max" property defining the maximum bound.

The formatFunction is called for each arc that is hovered. The 1st argument will be the actual value - "over", and the 2nd value will be the index inside the array. Therefore having function(over, totaal) { ... } will be similar to having function(value, index) { ... }. So "totaal" will become 0 which is the index of "over" inside the "values" array.

The specs are available here

Felix Haeberle · Accepted Answer · 2017-04-11 18:43:13Z

You have to pass the two variables into the function :)

$('#Working').click(
function(over, totaal) {
  var over = '100';
  var totaal = '400';
  var realVal = parseInt(over);
  var totaalVal = parseInt(totaal);
  alert ('Totaal aantal uren: ' + totaalVal + ' Price Index:'           + realVal);
});

var over = '100';
var totaal = '400';

$('#notWorking').click(
function(over, totaal) {
  var realVal = parseInt(over);
  var totaalVal = parseInt(totaal);
  alert ('Totaal aantal uren: ' + totaalVal + ' Price Index:'           + realVal);
});

#Working {
  height: 20px;
  width: 20px;
  background-color: green;
}
#notWorking {
  margin-top: 30px;
  height: 20px;
  width: 20px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Working"> Working </div>
<div id="notWorking">notWorking</div>

Collectives™ on Stack Overflow

Adding variable to javascript function not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related