Creating Bootstrap Popover content based on javascript value

Question

I use JustGage and Bootstrap and want to display some variable contents in Popover based on the value in Javascript JustGage.

For example, if the value in the gauge is in the range from 0 to 50, they get "Try harder", if it is between 50 and 200, they get "Well done" pop-up in the contents of the popover. - (You can see this by clicking on Caliber 1).

    $(window).load(function() {

      var gageValue1 = getRandomInt(0, 200)
      var gageValue2 = getRandomInt(0, 200)
      var gageValue3 = getRandomInt(0, 200)
      var colorGradientRYG = ["#991D1D", "#9D1F1F", "#A22222", "#A62424", "#AB2727", "#B02929", "#B42C2C", "#B92E2E", "#BE3131", "#C23333", "#C73636", "#CC3939", "#CE4236", "#D14B33", "#D35530", "#D65E2D", "#D8672A", "#DB7127", "#DD7A24", "#E08321", "#E28D1E", "#E5961B", "#E8A019", "#E9A619", "#EBAD1A", "#ECB41A", "#EEBB1B", "#F0C21C", "#F1C81C", "#F3CF1D", "#F5D61E", "#F6DD1E", "#F8E41F", "#FAEB20", "#F4EB25", "#EEEB2B", "#E9EC31", "#E3EC36", "#DEEC3C", "#D8ED42", "#D3ED48", "#CDED4D", "#C8EE53", "#C2EE59", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BDEF5F", "#BBED5C", "#B9EC59", "#B8EA56", "#B6E954", "#B4E851", "#B3E64E", "#B1E54B", "#AFE449", "#AEE246", "#ACE143", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#ABE041", "#AAE03E", "#A9E03C", "#A8E03A", "#A8E037", "#A7E035", "#A6E033", "#A5E031", "#A5E02E", "#A4E02C", "#A3E02A", "#A3E028", "#A4E224", "#A5E520", "#A6E81D", "#A7EB19", "#A8EE15", "#A9F012", "#AAF30E", "#ABF60A", "#ACF907", "#ADFC03", "#AEFF00"]
      var g1 = new JustGage({
        id: "g1",
        title: "Gage 1",
        value: 92,
        min: 0,
        max: 200,
        showMinMax: false,
        levelColors: colorGradientRYG,
        levelColorsGradient: false,
      });
      var g2 = new JustGage({
        id: "g2",
        title: "Gage 2",
        value: 98,
        min: 0,
        max: 200,
        showMinMax: false,
        levelColors: colorGradientRYG,
        levelColorsGradient: false,
      });
      var g3 = new JustGage({
        id: "g3",
        title: "Gage 3",
        value: 77,
        min: 0,
        max: 200,
        showMinMax: false,
        levelColors: colorGradientRYG,
        levelColorsGradient: false,
      });

      $(document).ready(function() {
        $('#g1_refresh').bind('click', function() {
          g1.refresh(getRandomInt(0, 200));
          g2.refresh(getRandomInt(0, 200));
          g3.refresh(getRandomInt(0, 200));
          return false;
        });
      });
    });


    $(document).ready(function() {
      $('[data-toggle="popover"]').popover();
    });

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  
  <script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
  <script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>

<h3>How am i doing?</h3>

<div class="row-fluid">
  <div class="span4">
    <a class="tipsPopover" title="Tips" data-toggle="popover" data-placement="bottom" text-align="center" data-content="This will be some content including a helpful tip on how to improve, based on the value given.">
      <div id="g1">
      </div>
    </a>

  </div>
  <div class="span4">
    <div id="g2"></div>
  </div>
  <div class="span4">
    <div id="g3"></div>
  </div>
</div>

Run codeHide result

Here is what I still have ... https://jsfiddle.net/e4v62nh6/1/

Answer 1

, JustGauge xPath
//*[@id="someid"]/svg/text[2]/tspan - popovers :

$("svg").each(function() {
    var value = +this.querySelector('text:nth-of-type(2)')
                     .querySelector('tspan')
                     .textContent;             

    function getContent() {
        if (value<20) return "Dont quit your dayjob"
        if (value<40) return "Try harder"
        if (value<60) return "Room for improvement"
        if (value<80) return "You passed the test"
        return "Well done"
    }    

    $(this).popover({
      trigger : 'hover',  
      placement : 'top', 
      content : getContent()
    });    
});

forked fiddle → https://jsfiddle.net/0zdtkz2a/