epochjs / epoch

A general purpose, real-time visualization library.
http://epochjs.github.io/epoch
MIT License
4.97k stars 278 forks source link

Is to possible to add text inside a gauge ? #206

Closed tarun1188 closed 9 years ago

tarun1188 commented 9 years ago

Hi,

Is it possible to add some text inside the gauge while creating it ? If not, can some one help me obtaining it using css. I have added a sample image which i created using paint.

gauge

rsandor commented 9 years ago

It is possible to do this using Css tricks. Let me send you an example tonight. On Thu, Oct 15, 2015 at 8:15 AM Tarun notifications@github.com wrote:

Hi,

Is it possible to add some text inside the gauge while creating it ? If not, can some help me obtaining it using css. I have add a sample image which i created using paint.

[image: gauge] https://cloud.githubusercontent.com/assets/2683705/10518129/9975dd2c-737d-11e5-8728-2c278f9fe76e.jpg

— Reply to this email directly or view it on GitHub https://github.com/epochjs/epoch/issues/206.

rsandor commented 9 years ago

Here is an example of how to do this with the "gauge-small" type chart:

  <div id="gaugeChart" class="epoch gauge-small">
    <label>Text Here</label>
  </div>
  <script>
    $('#gaugeChart').epoch({
      type: 'time.gauge',
      value: 0.5
    });
  </script>
  <style>
    #gaugeChart label {
      display: block;
      text-align: center;
      position: relative;
      top: 125px;
    }
  </style>

Which results in this:

screen shot 2015-10-17 at 4 36 26 am

The key here is the top attribute. For this I simply took the height of the gauge-small class (135px) and subtracted 10 to get the desired result.

Each size for the gauge has its own pre-defined height, for the exact size for each type see the documentation on the Epoch Github Pages site.