• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #dashboard {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
    
        .dashboard-item {
          display: flex;
          flex-grow: 1;
          height: 100%;
          min-height: 250px;
          min-width: 250px;
        }
      </style>
    </head>
    
    <body>
      <div id="dashboard">
        <div id="myChart1" class="dashboard-item"></div>
        <div id="myChart2" class="dashboard-item"></div>
        <div id="myChart3" class="dashboard-item"></div>
      </div>
    
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    
        function generateConfig(chartType, bgColor) {
          return {
            type: chartType,
            series: [{
              values: [35, 42, 67, 89, 25, 34, 67, 85],
              backgroundColor: bgColor
            }]
          }
        }
    
        zingchart.render({
          id: 'myChart1',
          data: generateConfig('bar', '#4CAF50'),
          height: '100%',
          width: '100%'
        });
    
        zingchart.render({
          id: 'myChart2',
          data: generateConfig('bar3d', '#3F51B5'),
          height: '100%',
          width: '100%'
        });
    
        zingchart.render({
          id: 'myChart3',
          data: generateConfig('hbar', '#FF9800'),
          height: '100%',
          width: '100%'
        });
      </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 id="dashboard">
        <div id="myChart1" class="dashboard-item"></div>
        <div id="myChart2" class="dashboard-item"></div>
        <div id="myChart3" class="dashboard-item"></div>
      </div>
    
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #dashboard {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    
    .dashboard-item {
      display: flex;
      flex-grow: 1;
      height: 100%;
      min-height: 250px;
      min-width: 250px;
    }
    function generateConfig(chartType, bgColor) {
      return {
        type: chartType,
        series: [{
          values: [35, 42, 67, 89, 25, 34, 67, 85],
          backgroundColor: bgColor
        }]
      }
    }
    
    zingchart.render({
      id: 'myChart1',
      data: generateConfig('bar', '#4CAF50'),
      height: '100%',
      width: '100%'
    });
    
    zingchart.render({
      id: 'myChart2',
      data: generateConfig('bar3d', '#3F51B5'),
      height: '100%',
      width: '100%'
    });
    
    zingchart.render({
      id: 'myChart3',
      data: generateConfig('hbar', '#FF9800'),
      height: '100%',
      width: '100%'
    });