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?

Answer 1

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) {
    ...
}

Answer 2

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);
                },

            }

        });

    });

Answer 3

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

Answer 4

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>