Create Bootstrap Popover content based on a javascript value

Question

I'm using JustGage and Bootstrap and want to display some variable content in a Popover based on the value in the Javascript JustGage.

For example, if the value in the gauge is between 0 - 50, they get "Try harder", if it's between 50 - 200, they get "Well done", surfaced in the popover content. - (You can see this by clicking on Gauge 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>

Here's what I have so far... https://jsfiddle.net/e4v62nh6/1/

davidkonrad · Accepted Answer · 2015-07-14T10:53:31.990

1

It seems that the value of the initialised JustGauge always can be found at the xPath
//*[@id="someid"]/svg/text[2]/tspan - so you can create all the popovers in a single loop :

$("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/

edited Jul 14 '15 at 10:53

answered Jul 14 '15 at 09:31

davidkonrad

83,997
17
205
265

Thank you so much for this. You're a life saver! As an extension - how would I simply add more options to "Well done and "Try harder"? Say I wanted 5 different options for example? Thank you again – Jona Turner Jul 14 '15 at 10:23
@JonaTurner, see update. Have made it as a function for readbility, but you could also have a if .. else .. else construct, or similar. – davidkonrad Jul 14 '15 at 10:53
Ok, one last question and then I'll leave you alone - I've updated the fiddle with a refresh button (for testing purposes), this however then doesn't also update the popovers... Is there a way to refresh both? https://jsfiddle.net/0zdtkz2a/9/ – Jona Turner Jul 14 '15 at 12:20
@JonaTurner, place the code in a `updatePopovers` function you call both upon initialisation and refresh. To reset the popovers, use `$(this).popover('destroy')`, see it working here -> https://jsfiddle.net/n7o2reek/ . You could, BTW, consider upvoting and accepting the answer when you are done :) – davidkonrad Jul 14 '15 at 12:30

Create Bootstrap Popover content based on a javascript value

1 Answers1