jquerygraphc3.jsmeter

Is it possible to create the speedometer like this?

Is it possible to create the speedometer like this with any of the jquery library. , like c3.js or canvas.js or any libraries.if yes can anyone give the idea of creating it. can anyone please help mespeedometer

Solution

  • Questions asking us to recommend tools can be seen as off-topic, so I suggest you rephrase your question to ask for a list of tools instead of asking for a recommendation of such tools. Even then it will be controversial.

    Still, I find this topic interesting and since there is nothing wrong with your question (imo) I decided to make a search to help you out. These were my findings:

    http://codepen.io/tag/speedometer/

    var needle = $('needle');
var el = $('el');

var measureDeg = function() {
  // matrix-to-degree conversion from http://css-tricks.com/get-value-of-css-rotation-through-javascript/
  var st = window.getComputedStyle(needle, null);
  var tr = st.getPropertyValue("-webkit-transform") ||
           st.getPropertyValue("-moz-transform") ||
           st.getPropertyValue("-ms-transform") ||
           st.getPropertyValue("-o-transform") ||
           st.getPropertyValue("transform") ||
           "fail...";

  var values = tr.split('(')[1];
      values = values.split(')')[0];
      values = values.split(',');
  var a = values[0];
  var b = values[1];
  var c = values[2];
  var d = values[3];

  var scale = Math.sqrt(a*a + b*b);

  // arc sin, convert from radians to degrees, round
  var sin = b/scale;
  var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
  
  el.set('data-value', angle);
};

var periodicalID = measureDeg.periodical(10);
    @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);

body {
  background: #fff;
}

#el:before {
  background: #fbfbfb;
  border-radius: 200px 200px 0 0;
  box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15) inset;
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
}

#el {
  border-radius: 200px 200px 0 0;
  height: 100px;
  margin: 50px auto 0;
  overflow: hidden;
  position: relative;
  width: 200px;
}

#el:after {
  background: #fff;
  border-radius: 140px 140px 0 0;
  bottom: 0;
  box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
  color: rgba(255, 80, 0, 0.7);
  content: attr(data-value);
  font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 3.5em;
  font-weight: 100;
  height: 70px;
  left: 30px;
  line-height: 95px;
  position: absolute;
  text-align: center;
  width: 140px;
  z-index: 3;
}

span {
  background: rgba(255, 80, 0, 0.7);
  border-radius: 4px;
  bottom: -4px;
  box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4);
  display: block;
  height: 8px;
  left: 10px;
  position: absolute;
  width: 90px;
  transform-origin: 100% 4px;
  transform: rotate(0deg);
  transition: all 1s;
}

#el:hover span {
  transform: rotate(180deg);
}

h1,
p,
strong {
  display: block;
  font-family: Lato;
  text-align: center;
}

h1 {
  margin-bottom: 0.4em;
}

p {
  margin-top: 0;
}

strong {
  color: #efefef;
  font-size: 2.5em;
}
    <div id="el" data-value="0">
  <span id="needle"></span>
</div>
<strong>hover</strong>

<h1>speedometer experiment</h1>
<p>Have fun with this little speedometer experiment. <br>The javascript is only needed to update the text!</p>

    Hope this helps !!