Question

I am looking for jQuery Solution to display the 4 values on a horizontal scale line. The values are Minimum, Maximum, Average, and Current. It is not a 2 Dimensional Graph. Just a simple 4 points on a single horizontal line with the markers pointing to those points.

To show what I am trying to achieve, here is a sketch

Answer 1

The first thing that came to my mind was the jQuery UI slider. It supports multiple handles, and you can make it disabled if its for display purposes only.

$(function() {
    $mySlider = $("#slider-range");
    $mySlider.slider({

      min: 0,
      max: 1000,
      values: [ 75, 125, 175, 225 ],
      slide: function( evt, ui ) {
          a = [];
          for(var i=0; i<ui.values.length; i++) {
              a.push(ui.values[i]);
          }

          $( "#amount" ).val( "$" + a.join(" - " + "$") );
      }
    });

    $( "#amount" ).val(
      ["$" + $mySlider.slider("values", 0),
       "$" + $mySlider.slider("values", 1),
       "$" + $mySlider.slider("values", 2),
       "$" + $mySlider.slider("values", 3)].join(" - ")
    );
});

Fiddle