• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <script nonce="undefined">
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
      </script>
      <script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <script nonce="undefined">
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
      </script>
      <script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 20px;
        }
    
        .chart {
          width: 150px;
          min-height: 150px;
          display: inline-block;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <h2>Spark (alone)</h2>
    
      <div id="cline" class="chart"></div>
      <div id="carea" class="chart"></div>
      <div id="cvbar" class="chart"></div>
    
      <div id="cmixed" class="chart"></div>
    
      <div id="cvline" class="chart"></div>
      <div id="cvarea" class="chart"></div>
      <div id="chbar" class="chart"></div>
    
      <div id="cscatter" class="chart"></div>
      <div id="chscatter" class="chart"></div>
      <div id="cbubble" class="chart"></div>
      <div id="chbubble" class="chart"></div>
    
      <div id="cpiefull" class="chart"></div>
      <div id="cpiering" class="chart"></div>
      <div id="cnestedpie" class="chart"></div>
    
      <div id="cpiano" class="chart"></div>
    
      <div id="cradardots" class="chart"></div>
      <div id="cradarline" class="chart"></div>
      <div id="cradararea" class="chart"></div>
      <div id="cradarrose" class="chart"></div>
    
      <div id="cgauge" class="chart"></div>
      <div id="cvbullet" class="chart"></div>
      <div id="chbullet" class="chart"></div>
    
      <div id="crange" class="chart"></div>
      <div id="cvrange" class="chart"></div>
      <div id="cvenn" class="chart"></div>
    
      <div id="cvfunnel" class="chart"></div>
      <div id="chfunnel" class="chart"></div>
    
      <div id="cline3d" class="chart"></div>
      <div id="carea3d" class="chart"></div>
      <div id="cvbar3d" class="chart"></div>
      <div id="chbar3d" class="chart"></div>
      <div id="cpiefull3d" class="chart"></div>
      <div id="cpiering3d" class="chart"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // function for randomly assigning data to charts
        window.v = function(n, c, r) {
          var values = [],
            value = 0,
            i;
          for (i = 0; i < n; i++) {
            if (i === 0) {
              value = Math.round(20 + 80 * Math.random());
              switch (c) {
                case 1:
                  values.push(value);
                  break;
                case 2:
                  values.push([i, value]);
                  break;
                case 3:
                  values.push([i, value, Math.round(4 + 6 * Math.random())]);
                  break;
              }
            } else {
              switch (c) {
                case 1:
                  if (r) {
                    value = Math.round(20 + 80 * Math.random());
                  } else {
                    value = values[i - 1] + Math.round(-15 + 30 * Math.random());
                    if (value < 0) {
                      value = Math.round(10 + 10 * Math.random())
                    }
                  }
                  values.push(value);
                  break;
                case 2:
                  if (r) {
                    value = Math.round(20 + 80 * Math.random());
                  } else {
                    value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
                    if (value < 0) {
                      value = Math.round(10 + 10 * Math.random())
                    }
                  }
                  values.push([i, value]);
                  break;
                case 3:
                  if (r) {
                    value = Math.round(20 + 80 * Math.random());
                  } else {
                    value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
                    if (value < 0) {
                      value = Math.round(10 + 10 * Math.random())
                    }
                  }
                  values.push([i, value, Math.round(4 + 6 * Math.random())]);
                  break;
              }
            }
          }
          return values;
        }
    
        zingchart.render({
          id: 'cline',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'line',
            title: {
              text: 'line'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(24, 1)
              },
              {
                values: v(24, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'carea',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'area',
            title: {
              text: 'area'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(24, 1)
              },
              {
                values: v(24, 1)
              }
            ]
          }
        });
    
    
        zingchart.render({
          id: 'cvbar',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'vbar',
            title: {
              text: 'vbar'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(8, 1)
              },
              {
                values: v(8, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cmixed',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'mixed',
            title: {
              text: 'mixed'
            },
            series: [{
                type: 'vbar',
                values: v(8, 1)
              },
              {
                type: 'line',
                values: v(8, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cvline',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'vline',
            title: {
              text: 'vline'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(24, 1)
              },
              {
                values: v(24, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cvarea',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'varea',
            title: {
              text: 'varea'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(24, 1)
              },
              {
                values: v(24, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'chbar',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'hbar',
            title: {
              text: 'hbar'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(8, 1)
              },
              {
                values: v(8, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cscatter',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'scatter',
            title: {
              text: 'scatter'
            },
            plot: {},
            series: [{
                values: v(12, 2, true)
              },
              {
                values: v(12, 2, true)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'chscatter',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'hscatter',
            title: {
              text: 'hscatter'
            },
            plot: {},
            series: [{
                values: v(12, 2, true)
              },
              {
                values: v(12, 2, true)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cbubble',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'bubble',
            title: {
              text: 'bubble'
            },
            plot: {},
            series: [{
                values: v(6, 3, true)
              },
              {
                values: v(6, 3, true)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'chbubble',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'hbubble',
            title: {
              text: 'hbubble'
            },
            plot: {},
            series: [{
                values: v(6, 3, true)
              },
              {
                values: v(6, 3, true)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cpiefull',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'pie',
            title: {
              text: 'pie-full'
            },
            plot: {},
            series: [{
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cpiering',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'pie',
            title: {
              text: 'pie-ring'
            },
            plot: {
              slice: '40%'
            },
            series: [{
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cnestedpie',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'nestedpie',
            title: {
              text: 'nestedpie'
            },
            plot: {},
            series: [{
                values: v(2, 1)
              },
              {
                values: v(2, 1)
              },
              {
                values: v(2, 1)
              },
              {
                values: v(2, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cpiano',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'piano',
            title: {
              text: 'piano'
            },
            plot: {},
            series: [{
                values: v(6, 1)
              },
              {
                values: v(6, 1)
              },
              {
                values: v(6, 1)
              },
              {
                values: v(6, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cradardots',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'radar',
            title: {
              text: 'radar-dots'
            },
            plot: {
              stacked: true,
              aspect: 'dots'
            },
            series: [{
                values: v(6, 1)
              },
              {
                values: v(6, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cradarline',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'radar',
            title: {
              text: 'radar-line'
            },
            plot: {
              stacked: true,
              aspect: 'line'
            },
            series: [{
                values: v(6, 1)
              },
              {
                values: v(6, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cradararea',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'radar',
            title: {
              text: 'radar-area'
            },
            plot: {
              stacked: true,
              aspect: 'area'
            },
            series: [{
                values: v(6, 1)
              },
              {
                values: v(6, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cradarrose',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'radar',
            title: {
              text: 'radar-rose'
            },
            plot: {
              aspect: 'rose'
            },
            series: [{
                values: v(6, 1)
              },
              {
                values: v(6, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cgauge',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'gauge',
            title: {
              text: 'gauge'
            },
            series: [{
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cvbullet',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'vbullet',
            title: {
              text: 'vbullet'
            },
            series: [{
                values: v(2, 1),
                goals: v(2, 1)
              },
              {
                values: v(2, 1),
                goals: v(2, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'chbullet',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'hbullet',
            title: {
              text: 'hbullet'
            },
            series: [{
                values: v(2, 1),
                goals: v(2, 1)
              },
              {
                values: v(2, 1),
                goals: v(2, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'crange',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'range',
            title: {
              text: 'range'
            },
            series: [{
              values: [
                [15, 30],
                [20, 40],
                [16, 35],
                [21, 30],
                [25, 45],
                [18, 27],
                [23, 35],
                [29, 39],
                [27, 30],
                [19, 34]
              ]
            }]
          }
        });
    
        zingchart.render({
          id: 'cvrange',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'vrange',
            title: {
              text: 'vrange'
            },
            series: [{
              values: [
                [15, 30],
                [20, 40],
                [16, 35],
                [21, 30],
                [25, 45],
                [18, 27],
                [23, 35],
                [29, 39],
                [27, 30],
                [19, 34]
              ]
            }]
          }
        });
    
        zingchart.render({
          id: 'cvenn',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'venn',
            title: {
              text: 'venn'
            },
            series: [{
                values: [10],
                join: [2]
              },
              {
                values: [6],
                join: [1]
              },
              {
                values: [8],
                join: [3]
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cvfunnel',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'vfunnel',
            title: {
              text: 'vfunnel'
            },
            series: [{
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'chfunnel',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'hfunnel',
            title: {
              text: 'hfunnel'
            },
            series: [{
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              }
            ]
          }
        });
    
        /* ================================================== */
    
        zingchart.render({
          id: 'cline3d',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'line3d',
            title: {
              text: 'line3d'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(12, 1)
              },
              {
                values: v(12, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'carea3d',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'area3d',
            title: {
              text: 'area3d'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(12, 1)
              },
              {
                values: v(12, 1)
              }
            ]
          }
        });
    
    
        zingchart.render({
          id: 'cvbar3d',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'vbar3d',
            title: {
              text: 'vbar3d'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(4, 1)
              },
              {
                values: v(4, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'chbar3d',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'hbar3d',
            title: {
              text: 'hbar3d'
            },
            plot: {
              stacked: true
            },
            series: [{
                values: v(4, 1)
              },
              {
                values: v(4, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cpiefull3d',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'pie3d',
            title: {
              text: 'pie3d-full'
            },
            plot: {},
            series: [{
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              }
            ]
          }
        });
    
        zingchart.render({
          id: 'cpiering3d',
          width: 80,
          height: 80,
          theme: 'spark',
          data: {
            borderWidth: 1,
            borderColor: '#ccc',
            type: 'pie3d',
            title: {
              text: 'pie3d-ring'
            },
            plot: {
              slice: '40%'
            },
            series: [{
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              },
              {
                values: v(1, 1)
              }
            ]
          }
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <script>
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
      </script>
      <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <script>
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
        ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
      </script>
      <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    </head>
    
    <body>
      <h2>Spark (alone)</h2>
    
      <div id="cline" class="chart"></div>
      <div id="carea" class="chart"></div>
      <div id="cvbar" class="chart"></div>
    
      <div id="cmixed" class="chart"></div>
    
      <div id="cvline" class="chart"></div>
      <div id="cvarea" class="chart"></div>
      <div id="chbar" class="chart"></div>
    
      <div id="cscatter" class="chart"></div>
      <div id="chscatter" class="chart"></div>
      <div id="cbubble" class="chart"></div>
      <div id="chbubble" class="chart"></div>
    
      <div id="cpiefull" class="chart"></div>
      <div id="cpiering" class="chart"></div>
      <div id="cnestedpie" class="chart"></div>
    
      <div id="cpiano" class="chart"></div>
    
      <div id="cradardots" class="chart"></div>
      <div id="cradarline" class="chart"></div>
      <div id="cradararea" class="chart"></div>
      <div id="cradarrose" class="chart"></div>
    
      <div id="cgauge" class="chart"></div>
      <div id="cvbullet" class="chart"></div>
      <div id="chbullet" class="chart"></div>
    
      <div id="crange" class="chart"></div>
      <div id="cvrange" class="chart"></div>
      <div id="cvenn" class="chart"></div>
    
      <div id="cvfunnel" class="chart"></div>
      <div id="chfunnel" class="chart"></div>
    
      <div id="cline3d" class="chart"></div>
      <div id="carea3d" class="chart"></div>
      <div id="cvbar3d" class="chart"></div>
      <div id="chbar3d" class="chart"></div>
      <div id="cpiefull3d" class="chart"></div>
      <div id="cpiering3d" class="chart"></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 20px;
    }
    
    .chart {
      width: 150px;
      min-height: 150px;
      display: inline-block;
    }
    
    .zc-ref {
      display: none;
    }
    // function for randomly assigning data to charts
    window.v = function(n, c, r) {
      var values = [],
        value = 0,
        i;
      for (i = 0; i < n; i++) {
        if (i === 0) {
          value = Math.round(20 + 80 * Math.random());
          switch (c) {
            case 1:
              values.push(value);
              break;
            case 2:
              values.push([i, value]);
              break;
            case 3:
              values.push([i, value, Math.round(4 + 6 * Math.random())]);
              break;
          }
        } else {
          switch (c) {
            case 1:
              if (r) {
                value = Math.round(20 + 80 * Math.random());
              } else {
                value = values[i - 1] + Math.round(-15 + 30 * Math.random());
                if (value < 0) {
                  value = Math.round(10 + 10 * Math.random())
                }
              }
              values.push(value);
              break;
            case 2:
              if (r) {
                value = Math.round(20 + 80 * Math.random());
              } else {
                value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
                if (value < 0) {
                  value = Math.round(10 + 10 * Math.random())
                }
              }
              values.push([i, value]);
              break;
            case 3:
              if (r) {
                value = Math.round(20 + 80 * Math.random());
              } else {
                value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
                if (value < 0) {
                  value = Math.round(10 + 10 * Math.random())
                }
              }
              values.push([i, value, Math.round(4 + 6 * Math.random())]);
              break;
          }
        }
      }
      return values;
    }
    
    zingchart.render({
      id: 'cline',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'line',
        title: {
          text: 'line'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(24, 1)
          },
          {
            values: v(24, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'carea',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'area',
        title: {
          text: 'area'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(24, 1)
          },
          {
            values: v(24, 1)
          }
        ]
      }
    });
    
    
    zingchart.render({
      id: 'cvbar',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'vbar',
        title: {
          text: 'vbar'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(8, 1)
          },
          {
            values: v(8, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cmixed',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'mixed',
        title: {
          text: 'mixed'
        },
        series: [{
            type: 'vbar',
            values: v(8, 1)
          },
          {
            type: 'line',
            values: v(8, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cvline',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'vline',
        title: {
          text: 'vline'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(24, 1)
          },
          {
            values: v(24, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cvarea',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'varea',
        title: {
          text: 'varea'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(24, 1)
          },
          {
            values: v(24, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'chbar',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'hbar',
        title: {
          text: 'hbar'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(8, 1)
          },
          {
            values: v(8, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cscatter',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'scatter',
        title: {
          text: 'scatter'
        },
        plot: {},
        series: [{
            values: v(12, 2, true)
          },
          {
            values: v(12, 2, true)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'chscatter',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'hscatter',
        title: {
          text: 'hscatter'
        },
        plot: {},
        series: [{
            values: v(12, 2, true)
          },
          {
            values: v(12, 2, true)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cbubble',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'bubble',
        title: {
          text: 'bubble'
        },
        plot: {},
        series: [{
            values: v(6, 3, true)
          },
          {
            values: v(6, 3, true)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'chbubble',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'hbubble',
        title: {
          text: 'hbubble'
        },
        plot: {},
        series: [{
            values: v(6, 3, true)
          },
          {
            values: v(6, 3, true)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cpiefull',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'pie',
        title: {
          text: 'pie-full'
        },
        plot: {},
        series: [{
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cpiering',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'pie',
        title: {
          text: 'pie-ring'
        },
        plot: {
          slice: '40%'
        },
        series: [{
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cnestedpie',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'nestedpie',
        title: {
          text: 'nestedpie'
        },
        plot: {},
        series: [{
            values: v(2, 1)
          },
          {
            values: v(2, 1)
          },
          {
            values: v(2, 1)
          },
          {
            values: v(2, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cpiano',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'piano',
        title: {
          text: 'piano'
        },
        plot: {},
        series: [{
            values: v(6, 1)
          },
          {
            values: v(6, 1)
          },
          {
            values: v(6, 1)
          },
          {
            values: v(6, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cradardots',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'radar',
        title: {
          text: 'radar-dots'
        },
        plot: {
          stacked: true,
          aspect: 'dots'
        },
        series: [{
            values: v(6, 1)
          },
          {
            values: v(6, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cradarline',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'radar',
        title: {
          text: 'radar-line'
        },
        plot: {
          stacked: true,
          aspect: 'line'
        },
        series: [{
            values: v(6, 1)
          },
          {
            values: v(6, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cradararea',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'radar',
        title: {
          text: 'radar-area'
        },
        plot: {
          stacked: true,
          aspect: 'area'
        },
        series: [{
            values: v(6, 1)
          },
          {
            values: v(6, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cradarrose',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'radar',
        title: {
          text: 'radar-rose'
        },
        plot: {
          aspect: 'rose'
        },
        series: [{
            values: v(6, 1)
          },
          {
            values: v(6, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cgauge',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'gauge',
        title: {
          text: 'gauge'
        },
        series: [{
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cvbullet',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'vbullet',
        title: {
          text: 'vbullet'
        },
        series: [{
            values: v(2, 1),
            goals: v(2, 1)
          },
          {
            values: v(2, 1),
            goals: v(2, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'chbullet',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'hbullet',
        title: {
          text: 'hbullet'
        },
        series: [{
            values: v(2, 1),
            goals: v(2, 1)
          },
          {
            values: v(2, 1),
            goals: v(2, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'crange',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'range',
        title: {
          text: 'range'
        },
        series: [{
          values: [
            [15, 30],
            [20, 40],
            [16, 35],
            [21, 30],
            [25, 45],
            [18, 27],
            [23, 35],
            [29, 39],
            [27, 30],
            [19, 34]
          ]
        }]
      }
    });
    
    zingchart.render({
      id: 'cvrange',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'vrange',
        title: {
          text: 'vrange'
        },
        series: [{
          values: [
            [15, 30],
            [20, 40],
            [16, 35],
            [21, 30],
            [25, 45],
            [18, 27],
            [23, 35],
            [29, 39],
            [27, 30],
            [19, 34]
          ]
        }]
      }
    });
    
    zingchart.render({
      id: 'cvenn',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'venn',
        title: {
          text: 'venn'
        },
        series: [{
            values: [10],
            join: [2]
          },
          {
            values: [6],
            join: [1]
          },
          {
            values: [8],
            join: [3]
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cvfunnel',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'vfunnel',
        title: {
          text: 'vfunnel'
        },
        series: [{
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'chfunnel',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'hfunnel',
        title: {
          text: 'hfunnel'
        },
        series: [{
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          }
        ]
      }
    });
    
    /* ================================================== */
    
    zingchart.render({
      id: 'cline3d',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'line3d',
        title: {
          text: 'line3d'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(12, 1)
          },
          {
            values: v(12, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'carea3d',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'area3d',
        title: {
          text: 'area3d'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(12, 1)
          },
          {
            values: v(12, 1)
          }
        ]
      }
    });
    
    
    zingchart.render({
      id: 'cvbar3d',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'vbar3d',
        title: {
          text: 'vbar3d'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(4, 1)
          },
          {
            values: v(4, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'chbar3d',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'hbar3d',
        title: {
          text: 'hbar3d'
        },
        plot: {
          stacked: true
        },
        series: [{
            values: v(4, 1)
          },
          {
            values: v(4, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cpiefull3d',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'pie3d',
        title: {
          text: 'pie3d-full'
        },
        plot: {},
        series: [{
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          }
        ]
      }
    });
    
    zingchart.render({
      id: 'cpiering3d',
      width: 80,
      height: 80,
      theme: 'spark',
      data: {
        borderWidth: 1,
        borderColor: '#ccc',
        type: 'pie3d',
        title: {
          text: 'pie3d-ring'
        },
        plot: {
          slice: '40%'
        },
        series: [{
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          },
          {
            values: v(1, 1)
          }
        ]
      }
    });