Lemonade Recipes with Wines theme

Lemonade Recipes

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/wines.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('wines');
      // Create table to place gauges
      var layoutTable = anychart.standalones.table();
      layoutTable
        .hAlign('center')
        .vAlign('middle')
        .useHtml(true)
        .fontSize(16)
        .cellBorder(null);

      // Put gauges into the layout table
      layoutTable.contents([
        [null, 'Lemonade recipes', null, null, null],
        [
          null,
          'Quick Lemonade',
          'Strawberry Lemonade',
          'Ginger Lemonade',
          null
        ],
        [
          null,
          createGauge([
            {
              name: 'Water',
              volume: '1500',
              low: '0',
              high: '1500'
            },
            {
              name: 'Lemon',
              volume: '160',
              low: '1500',
              high: '1660'
            },
            {
              name: 'Sugar',
              volume: '350',
              low: '1660',
              high: '2010'
            }
          ]),
          createGauge([
            {
              name: 'Water',
              volume: '1250',
              low: '0',
              high: '1250'
            },
            {
              name: 'Lemon',
              volume: '120',
              low: '1250',
              high: '1370'
            },
            {
              name: 'Sugar',
              volume: '250',
              low: '1370',
              high: '1620'
            },
            {
              name: 'Strawberry',
              volume: '400',
              low: '1620',
              high: '2020'
            }
          ]),
          createGauge([
            {
              name: 'Water',
              volume: '2000',
              low: '0',
              high: '2000'
            },
            {
              name: 'Lemon',
              volume: '160',
              low: '2000',
              high: '2160'
            },
            {
              name: 'Sugar',
              volume: '150',
              low: '2160',
              high: '2310'
            },
            {
              name: 'Ginger',
              volume: '50',
              low: '2310',
              high: '2360'
            }
          ]),
          null
        ]
      ]);

      // Set height for first row in layout table
      layoutTable.getCol(0).width('10%');
      layoutTable.getCol(4).width('10%');
      layoutTable
        .getRow(0)
        .height(30)
        .fontSize(16)
        .fontColor('#212121')
        .vAlign('bottom');
      layoutTable.getRow(1).height(30).fontSize(13);
      layoutTable.getCell(1, 1).border().bottom('3 #EAEAEA');
      layoutTable.getCell(1, 2).border().bottom('3 #EAEAEA');
      layoutTable.getCell(1, 3).border().bottom('3 #EAEAEA');

      // Merge cells in layout table where needed
      layoutTable.getCell(0, 1).colSpan(3).border().bottom('3 #EAEAEA');

      // Set container id and initiate drawing
      layoutTable.container('container');
      layoutTable.draw();

      // Helper function to define color
      function defineColor(name) {
        switch (name) {
          case 'Water':
            return '#64b5f6';
          case 'Lemon':
            return '#ffd740';
          case 'Sugar':
            return '#eeeeee';
          case 'Strawberry':
            return '#f48fb1';
          case 'Ginger':
            return '#ffccbc';
          default:
        }
      }

      // Helper function to create gauge
      function createGauge(data) {
        // Create new gauge
        var gauge = anychart.gauges.linear();
        gauge.data(anychart.data.set(data).mapAs({ value: 'high' }));
        gauge.padding([0, 0, 15, 0]).tooltip(false);
        gauge.scale().maximumGap(0.05).ticks([]);

        // Create bar and marker points for gauge
        for (var i = 0; i < data.length; i++) {
          // Create bar point
          var bar = gauge.rangeBar(i);
          bar.width('30%').color(defineColor(data[i].name));

          // Set label for bar point
          bar
            .labels()
            .enabled(true)
            .position('center')
            .fontColor('#212121')
            .anchor('center')
            .format(function () {
              return this.getData('volume') + ' ml.';
            });
          bar
            .hovered()
            .labels()
            .enabled(true)
            .fontColor('#212121')
            .fontWeight('600');
          bar
            .selected()
            .labels()
            .enabled(true)
            .fontColor('#212121')
            .fontWeight('600');

          // Create marker point
          var marker = gauge.marker(i);
          marker.color('#545f69').offset('31%').type('triangle-left');

          // Set label for marker point
          marker
            .labels()
            .enabled(true)
            .position('right-center')
            .anchor('left-center')
            .format('{%Name}');
          marker
            .hovered()
            .labels()
            .enabled(true)
            .fontColor('#212121')
            .fontWeight('600');
          marker
            .selected()
            .labels()
            .enabled(true)
            .fontColor('#212121')
            .fontWeight('600');
        }

        return gauge;
      }
    });
  
</script>
</body>
</html>

We usually use Linear Gauges in cases when it is necessary to demonstrate a single value or measurement like the temperature, strength or loading progress. Those gauges can use no elements besides the gauge - or pointer - itself: some gauges like a loader or a battery charger have no axes, no tooltips or labels, no grid or markers. Though, all of these can be used if necessary.

This dashboard is a demonstration of three lemonade types cooking scheme. Three linear gauges looking like stacked columns represent the Quick, Strawberry and Ginger Lemonades' compositions. For example, the first bar pointer consists of three components: water, lemon and sugar. Each component has a marker with its name and a label with the amount of this component should be put into the drink. It is possible to select the components. The dashboard is built through the Table Layout, so the text elements above the bar pointers are no more than a part of HTML code.

Warning!

Lemonade Recipes

Lemonade Recipes