Gauge

    Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.

    Because Gauge SVG is generated by JavaScript its HTML layout is as simple as possible:

    Gauge App Methods

    Now we need to create/initialize the Gauge. Let’s look at related App methods to work with Gauge:

    app.gauge.create(parameters)- create Gauge instance

    • parameters - object. Object with gauge parameters

    Method returns created Gauge’s instance

    • el - HTMLElement or string (with CSS Selector) or object. Gauge element or Gauge instance to destroy.

    app.gauge.get(el)- get Gauge instance by HTML element

    • el - HTMLElement or string (with CSS Selector). Gauge element.

    Method returns Gauge’s instance

    app.gauge.update(parameters)- update/rerender Gauge SVG according to passed parameters

    • parameters - object. Object with gauge parameters

    Method returns gauge value

    Now let’s look at list of available parameters we need to create Gauge:

    Gauge Methods & Properties

    1. var gauge = app.gauge.create({ /* parameters */ })

    After that we have its initialized instance (like gauge variable in example above) with useful methods and properties:

    Gauge will fire the following DOM events on gauge element and events on app and gauge instance:

    App and Gauge Instance Events

    Gauge instance emits events on both self instance and app instance. App instance events has same names prefixed with gauge.

    Gauge Auto Initialization

    If you don’t need to use Gauge API and your Gauge is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional gauge-init class, and specifying all parameters with data- attributes:

    1. <!-- Add gauge-init class, and specify parameters in data- attributes -->
    2. <div
    3.   class="gauge gauge-init my-gauge"
    4.   data-type="circle"
    5.   data-value="0.44"
    6.   data-value-text="44%"
    7.   data-value-text-color="#ff9800"
    8.   data-border-color="#ff9800"
    9. ></div>

    In this case if you need to access automatically created Gauge instance you can use the app.gauge.get app method:

    1. var gauge = app.gauge.get('.my-gauge');
    3. gauge.update({
    4.   value: 0.9,
    5. });
    1. // Init top demo gauge
    2. var demoGauge = app.gauge.create({
    3.   el: '.demo-gauge',
    4.   type: 'circle',
    5.   value: 0.5,
    6.   size: 250,
    7.   borderColor: '#2196f3',
    8.   borderWidth: 10,
    9.   valueText: '50%',
    10.   valueFontSize: 41,
    11.   valueTextColor: '#2196f3',
    12.   labelText: 'amount of something',
    15. $$('.button').on('click', function () {
    16.   var value = $$(this).attr('data-value');
    17.   demoGauge.update({
    18.     value: value / 100,
    19.     valueText: value + '%'
    20.   });
    21. });
    1. <div class="block-title">Circle Gauges</div>
    2. <div class="block block-strong">
    3.   <div class="row">
    4.     <div class="col text-align-center">
    5.       <div
    6.         class="gauge gauge-init"
    7.         data-type="circle"
    8.         data-value="0.44"
    9.         data-value-text="44%"
    10.         data-value-text-color="#ff9800"
    11.         data-border-color="#ff9800"
    12.       ></div>
    13.     </div>
    14.     <div class="col text-align-center">
    15.       <div
    16.         class="gauge gauge-init"
    17.         data-type="circle"
    18.         data-value="0.12"
    19.         data-value-text="$120"
    20.         data-value-text-color="#4caf50"
    21.         data-border-color="#4caf50"
    22.         data-label-text="of $1000 budget"
    23.         data-label-text-color="#f44336"
    24.         data-label-font-weight="700"
    25.       ></div>
    26.     </div>
    27.   </div>
    28. </div>
    1. <div class="block-title">Customization</div>
    2. <div class="block block-strong">
    3.   <div class="row">
    4.     <div class="col text-align-center">
    5.       <div
    6.         class="gauge gauge-init"
    7.         data-type="circle"
    8.         data-value="0.35"
    9.         data-value-text="35%"
    10.         data-value-text-color="#4caf50"
    11.         data-value-font-size="51"
    12.         data-value-font-weight="700"
    13.         data-border-width="20"
    15.         data-bg-color="#ffeb3b"
    16.       ></div>
    17.     </div>
    18.     <div class="col text-align-center">
    19.       <div
    20.         class="gauge gauge-init"
    21.         data-type="circle"
    22.         data-value="0.67"
    23.         data-value-text="$670"
    24.         data-value-text-color="#000"
    25.         data-border-color="#ff9800"
    26.         data-label-text="of $1000 spent"
    27.         data-label-text-color="#4caf50"
    28.         data-label-font-weight="800"
    29.         data-label-font-size="12"
    30.         data-border-width="30"
    31.       ></div>
    32.     </div>
    33.   </div>
    34.   <br>
    35.   <div class="row">
    36.     <div class="col text-align-center">
    37.       <div
    38.         class="gauge gauge-init"
    39.         data-type="semicircle"
    40.         data-value="0.5"
    41.         data-value-text="50%"
    42.         data-value-text-color="#ffeb3b"
    43.         data-value-font-size="41"
    44.         data-value-font-weight="700"
    45.         data-border-width="10"
    46.         data-border-color="#ffeb3b"
    47.         data-border-bg-color="transparent"
    48.       ></div>
    49.     </div>
    50.     <div class="col text-align-center">
    51.       <div
    52.         class="gauge gauge-init"
    53.         data-type="semicircle"
    54.         data-value="0.77"
    55.         data-border-color="#ff9800"
    56.         data-label-text="$770 spent so far"
    57.         data-label-text-color="#ff9800"
    58.         data-label-font-weight="800"
    59.         data-label-font-size="12"
    60.         data-border-width="10"
    61.       ></div>
    62.     </div>
    63.   </div>