Battery with Light Glamour theme

Battery

Select a theme:

                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-linear-gauge.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-table.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/light_glamour.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
	// set chart theme
anychart.theme('lightGlamour');
      // Helper function to create gauge
      function createGaugeBase() {
        // Create gauge
        var gauge = anychart.gauges.linear();
        gauge
          .layout('horizontal')
          .background({ stroke: '10 #545f69', fill: '#ffffff' })
          .margin([30, 45, 30, 30])
          .padding(0);

        // Set gauge tooltip
        gauge.tooltip().useHtml(true).format('Value: {%Value}%');

        // Create label to make gauge look like battery
        var label = gauge.label();
        label
          .text(null)
          .position('right-center')
          .anchor('right-center')
          .width(20)
          .height('30%')
          .offsetX('20px')
          .background({ enabled: true, fill: '#545f69' });

        // Set axis scale
        var scale = gauge.scale();
        scale.minimum(0).maximum(100).ticks({ interval: 10 });

        return gauge;
      }

      function batteryBar(value) {
        // Create gauge
        var gauge = createGaugeBase();
        gauge.data([value]);

        // Create bar pointer
        var batteryEnergy = gauge.bar(0);
        batteryEnergy
          .name('Energy')
          .width('90%')
          .offset(0)
          .fill(function () {
            if (gauge.data().get(0, 'value') >= 25) return '#545f69';
            return '#D81F05';
          })
          .stroke(null)
          .zIndex(11);
        return gauge;
      }

      function batteryLED(value) {
        // Create gauge
        var gauge = createGaugeBase();
        gauge.data([value]);

        // Create LED pointer
        var batteryEnergy = gauge.led(0);

        batteryEnergy
          .size(null)
          .name('Energy')
          .width(90)
          .count(10)
          // Set gap
          .gap(1)
          // Color settings
          .dimmer(function () {
            return '#ffffff';
          });

        if (value < 25) {
          batteryEnergy.colorScale().colors(['#D81F05', '#D81F05']);
        } else {
          batteryEnergy.colorScale().colors(['#545f69', '#545f69']);
        }

        return gauge;
      }

      // Create layout table and set some settings
      var layoutTable = anychart.standalones.table();
      layoutTable
        .hAlign('center')
        .vAlign('middle')
        .useHtml(true)
        .fontSize(16)
        .cellBorder(null);

      // Put gauges into the layout table
      layoutTable.contents([
        ['Battery', null],
        [
          'Gauge with Bar Pointer<br>' +
          '<span style="color: #212121; font-size: 12px">Charged 5%</span>',
          'Gauge with Bar Pointer<br>' +
          '<span style="color: #212121; font-size: 12px">Charged 75 %</span>'
        ],
        [batteryBar(5), batteryBar(75)],
        [
          'Gauge with LED Pointer<br>' +
          '<span style="color: #212121; font-size: 12px">Charged 20%</span>',
          'Gauge with LED Pointer<br>' +
          '<span style="color: #212121; font-size: 12px">Charged 100%</span>'
        ],
        [batteryLED(20), batteryLED(100)]
      ]);

      // Set height for first row in layout table
      layoutTable.getRow(0).height(40).fontSize(18);
      layoutTable.getRow(1).height(50);
      layoutTable.getRow(3).height(50);

      // Merge cells in layout table where needed
      layoutTable.getCell(0, 0).colSpan(2);

      // Set container id and initiate drawing
      layoutTable.container('container');
      layoutTable.draw();
    });
  
</script>
</body>
</html>

Linear Gauges are supposed to imitate real gauges that measure a single value - like thermometers measure temperature. It is evident that such a gauge has no need in complicated charting elements, though, they might be added in some cases.

There are four linear pointers, two of them are of bar pointer type and another pair is of LED pointer type. All four pointers imitate battery chargers with different charge level: 5%, 75%, 20% and 100%. This chart is built as the Table Layout. There are neither legend nor labels on the chart, but there are titles with the pointer types defined and the chart title. Tooltips display the main information about the pointer - the battery charge level.

Warning!

Battery

Battery