FlexBox API Consumption Dashboard

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/30BBXMJI

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
    }

    .dashboard {
      display: flex;
      flex-wrap: wrap;

    }

    .column {
      min-height: 300px;
      min-width: 300px;
      display: flex;
      flex-grow: 1
    }
  </style>
</head>

<body>
  <div class='dashboard'>
    <div id='gaugeChart1' class='column' style='background-color:red'></div>
    <div id='gaugeChart2' class='column' style='background-color:yellow'></div>
    <div id='gaugeChart3' class='column' style='background-color:orange'></div>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];

    function GaugeChart(value, titleText, backgroundColor) {
      return {
        type: 'gauge',
        title: {
          text: titleText,
          mediaRules: [{
            maxWidth: '650px',
            visible: false,
          }, ],
        },
        scaleR: {
          aperture: 130,
          values: '0:40:10',
          center: {
            borderColor: '#23211E',
            borderWidth: '2px',
            mediaRules: [{
              maxWidth: '650px',
              size: 10,
            }, ],
            size: 20,
          },
          guide: {
            alpha: 1,
            backgroundColor: '#E3DEDA',
          },
          item: {
            offsetR: 0,
          },
          tick: {
            visible: false,
          },
          markers: [{
            type: 'area',
            range: [0, 35],
            backgroundColor: backgroundColor,
          }, ],
          ring: {
            backgroundColor: '#E3DEDA',
            mediaRules: [{
              maxWidth: '650px',
              visible: false,
            }, ],
          },
        },
        plot: {
          tooltip: {
            visible: false,
          },
          csize: '3%',
          size: '100%',
        },
        plotarea: {
          marginTop: '35%',
        },
        scale: {
          sizeFactor: 1.2,
          mediaRules: [{
            maxWidth: '650px',
            sizeFactor: 1.6,
          }, ],
        },
        series: [{
          values: [35],
          backgroundColor: '#23211E',
          valueBox: {
            text: '%v',
            fontColor: backgroundColor,
            fontSize: 14,
            mediaRules: [{
              maxWidth: '650px',
              fontSize: 10,
            }, ],
            placement: 'center',
          },
        }, ],
      };
    }

    let gaugeChart1 = GaugeChart(35, 'Energy Output', '#00AE4D');
    let gaugeChart2 = GaugeChart(11, 'Energy Recyled', '#E2D51A');
    let gaugeChart3 = GaugeChart(28, 'Energy Consumed', '#FB301E');

    zingchart.render({
      id: 'gaugeChart1',
      data: gaugeChart1,
      height: '100%',
      width: '100%',
    });

    zingchart.render({
      id: 'gaugeChart2',
      data: gaugeChart2,
      height: '100%',
      width: '100%',
    });

    zingchart.render({
      id: 'gaugeChart3',
      data: gaugeChart3,
      height: '100%',
      width: '100%',
    });

    /*
     * SetInterval is used to simulate live input. We also have
     * a feed attribute that takes in http requests, websockets,
     * and return value from a JS function.
     */

    setTimeout(function() {
      let colors = ['#00AE4D', '#E2D51A', '#FB301E'];
      let Marker = function(bgColor, ceiling) {
        return {
          type: 'area',
          range: [0, ceiling],
          backgroundColor: bgColor,
        };
      };
      let randomOffset0 = [-5, 5, 3, -3, 2, -2];
      let randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
      let output0 = Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)]);
      let output1 = Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)]);
      let output2 = Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)]);

      // 1) update gauge values
      zingchart.exec('gaugeChart1', 'appendseriesdata', {
        plotindex: 0,
        update: false,
        data: {
          values: [output0],
        },
      });
      zingchart.exec('gaugeChart2', 'appendseriesdata', {
        plotindex: 0,
        update: false,
        data: {
          values: [output1],
        },
      });
      zingchart.exec('gaugeChart3', 'appendseriesdata', {
        plotindex: 0,
        update: false,
        data: {
          values: [output2],
        },
      });

      // 2) update guage markers
      zingchart.exec('gaugeChart1', 'modify', {
        update: false,
        data: {
          scaleR: {
            markers: [Marker(colors[0], output0)],
          },
        },
      });
      zingchart.exec('gaugeChart2', 'modify', {
        update: false,
        data: {
          scaleR: {
            markers: [Marker(colors[1], output1)],
          },
        },
      });
      zingchart.exec('gaugeChart3', 'modify', {
        update: false,
        data: {
          scaleR: {
            markers: [Marker(colors[2], output2)],
          },
        },
      });

      // batch update all chart modifications
      zingchart.exec('gaugeChart1', 'update');
      zingchart.exec('gaugeChart2', 'update');
      zingchart.exec('gaugeChart3', 'update');
    }, 1500);
  </script>
</body>

</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>

		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
	<body>
	  <div class='dashboard'>
	    <div id='gaugeChart1' class='column' style='background-color:red'></div>
	    <div id='gaugeChart2' class='column' style='background-color:yellow'></div>
	    <div id='gaugeChart3' class='column' style='background-color:orange'></div>
	  </div>
	</body>
</html>

function GaugeChart(value, titleText, backgroundColor) {
  return {
    type: 'gauge',
    title: {
      text: titleText,
      mediaRules: [
        {
          maxWidth: '650px',
          visible: false,
        },
      ],
    },
    scaleR: {
      aperture: 130,
      values: '0:40:10',
      center: {
        borderColor: '#23211E',
        borderWidth: '2px',
        mediaRules: [
          {
            maxWidth: '650px',
            size: 10,
          },
        ],
        size: 20,
      },
      guide: {
        alpha: 1,
        backgroundColor: '#E3DEDA',
      },
      item: {
        offsetR: 0,
      },
      tick: {
        visible: false,
      },
      markers: [
        {
          type: 'area',
          range: [0, 35],
          backgroundColor: backgroundColor,
        },
      ],
      ring: {
        backgroundColor: '#E3DEDA',
        mediaRules: [
          {
            maxWidth: '650px',
            visible: false,
          },
        ],
      },
    },
    plot: {
      tooltip: {
        visible: false,
      },
      csize: '3%',
      size: '100%',
    },
    plotarea: {
      marginTop: '35%',
    },
    scale: {
      sizeFactor: 1.2,
      mediaRules: [
        {
          maxWidth: '650px',
          sizeFactor: 1.6,
        },
      ],
    },
    series: [
      {
        values: [35],
        backgroundColor: '#23211E',
        valueBox: {
          text: '%v',
          fontColor: backgroundColor,
          fontSize: 14,
          mediaRules: [
            {
              maxWidth: '650px',
              fontSize: 10,
            },
          ],
          placement: 'center',
        },
      },
    ],
  };
}

let gaugeChart1 = GaugeChart(35, 'Energy Output', '#00AE4D');
let gaugeChart2 = GaugeChart(11, 'Energy Recyled', '#E2D51A');
let gaugeChart3 = GaugeChart(28, 'Energy Consumed', '#FB301E');

zingchart.render({
  id: 'gaugeChart1',
  data: gaugeChart1,
  height: '100%',
  width: '100%',
});

zingchart.render({
  id: 'gaugeChart2',
  data: gaugeChart2,
  height: '100%',
  width: '100%',
});

zingchart.render({
  id: 'gaugeChart3',
  data: gaugeChart3,
  height: '100%',
  width: '100%',
});

/*
 * SetInterval is used to simulate live input. We also have
 * a feed attribute that takes in http requests, websockets,
 * and return value from a JS function.
 */

setTimeout(function () {
  let colors = ['#00AE4D', '#E2D51A', '#FB301E'];
  let Marker = function (bgColor, ceiling) {
    return {
      type: 'area',
      range: [0, ceiling],
      backgroundColor: bgColor,
    };
  };
  let randomOffset0 = [-5, 5, 3, -3, 2, -2];
  let randomOffset1 = [10, -10, -5, 5, 3, -3, 2, -2, 7, -7];
  let output0 = Math.ceil(33 + randomOffset0[Math.floor(Math.random() * 6)]);
  let output1 = Math.ceil(11 + randomOffset0[Math.floor(Math.random() * 6)]);
  let output2 = Math.ceil(22 + randomOffset1[Math.floor(Math.random() * 9)]);

  // 1) update gauge values
  zingchart.exec('gaugeChart1', 'appendseriesdata', {
    plotindex: 0,
    update: false,
    data: {
      values: [output0],
    },
  });
  zingchart.exec('gaugeChart2', 'appendseriesdata', {
    plotindex: 0,
    update: false,
    data: {
      values: [output1],
    },
  });
  zingchart.exec('gaugeChart3', 'appendseriesdata', {
    plotindex: 0,
    update: false,
    data: {
      values: [output2],
    },
  });

  // 2) update guage markers
  zingchart.exec('gaugeChart1', 'modify', {
    update: false,
    data: {
      scaleR: {
        markers: [Marker(colors[0], output0)],
      },
    },
  });
  zingchart.exec('gaugeChart2', 'modify', {
    update: false,
    data: {
      scaleR: {
        markers: [Marker(colors[1], output1)],
      },
    },
  });
  zingchart.exec('gaugeChart3', 'modify', {
    update: false,
    data: {
      scaleR: {
        markers: [Marker(colors[2], output2)],
      },
    },
  });

  // batch update all chart modifications
  zingchart.exec('gaugeChart1', 'update');
  zingchart.exec('gaugeChart2', 'update');
  zingchart.exec('gaugeChart3', 'update');
}, 1500);

html,body {
  height:100%;
  width:100%;
}

.dashboard {
  display:flex;
  flex-wrap:wrap;

}

.column{
  min-height:300px;
  min-width:300px;
  display:flex;
  flex-grow:1
}

Label Mania Dashboard 153/281 Update One Chart From Another

FlexBox API Consumption Dashboard

Related Documentation: