example.html

<!doctype html>
<html> 

  <head>
    <meta charset="utf-8"/>
    <title>Guage</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    
  </head>


  <body>
    
    <div id="ttfb" style="width: 600px; height: 400px;"></div>
    <div id="conversion" style="width: 600px; height: 400px;"></div>
    <div id="apiRequests" style="width: 600px; height: 400px;"></div>
    
    
    <script src="raphael.js"></script>
    <script src="justgage.js"></script>
    <script>
      var ttfb = new JustGage({
        id: "ttfb", 
        value: 0.9, 
        min: 0,
        max: 5,
        targetValue: 0.8,
        thresholdUpper: 1.2,
        title: "Time to first byte"
      }); 
      
      var conversion = new JustGage({
        id: "conversion", 
        value: 55, 
        min: 0,
        max: 100,
        targetValue: 58,
        thresholdLower: 50,
        title: "User conversion"
      });
      
      var load = new JustGage({
        id: "apiRequests", 
        value: 1100, 
        min: 0,
        max: 3000,
        targetValue: 1500,
        thresholdLower: 1000,
        thresholdUpper: 2000,
        title: "Database load"
      });

    </script>
  </body>
</html>