• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <script nonce="undefined">
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10.     ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
    11.   </script>
    12.   <script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    13.   <style>
    14.     html,
    15.     body {
    16.       height: 100%;
    17.       width: 100%;
    18.       margin: 0;
    19.       padding: 20px;
    20.     }
    21.  
    22.     .chart {
    23.       width: 150px;
    24.       min-height: 150px;
    25.       display: inline-block;
    26.     }
    27.  
    28.     .zc-ref {
    29.       display: none;
    30.     }
    31.   </style>
    32. </head>
    33.  
    34. <body>
    35.   <h2>Spark (alone)</h2>
    36.  
    37.   <div id="cline" class="chart"></div>
    38.   <div id="carea" class="chart"></div>
    39.   <div id="cvbar" class="chart"></div>
    40.  
    41.   <div id="cmixed" class="chart"></div>
    42.  
    43.   <div id="cvline" class="chart"></div>
    44.   <div id="cvarea" class="chart"></div>
    45.   <div id="chbar" class="chart"></div>
    46.  
    47.   <div id="cscatter" class="chart"></div>
    48.   <div id="chscatter" class="chart"></div>
    49.   <div id="cbubble" class="chart"></div>
    50.   <div id="chbubble" class="chart"></div>
    51.  
    52.   <div id="cpiefull" class="chart"></div>
    53.   <div id="cpiering" class="chart"></div>
    54.   <div id="cnestedpie" class="chart"></div>
    55.  
    56.   <div id="cpiano" class="chart"></div>
    57.  
    58.   <div id="cradardots" class="chart"></div>
    59.   <div id="cradarline" class="chart"></div>
    60.   <div id="cradararea" class="chart"></div>
    61.   <div id="cradarrose" class="chart"></div>
    62.  
    63.   <div id="cgauge" class="chart"></div>
    64.   <div id="cvbullet" class="chart"></div>
    65.   <div id="chbullet" class="chart"></div>
    66.  
    67.   <div id="crange" class="chart"></div>
    68.   <div id="cvrange" class="chart"></div>
    69.   <div id="cvenn" class="chart"></div>
    70.  
    71.   <div id="cvfunnel" class="chart"></div>
    72.   <div id="chfunnel" class="chart"></div>
    73.  
    74.   <div id="cline3d" class="chart"></div>
    75.   <div id="carea3d" class="chart"></div>
    76.   <div id="cvbar3d" class="chart"></div>
    77.   <div id="chbar3d" class="chart"></div>
    78.   <div id="cpiefull3d" class="chart"></div>
    79.   <div id="cpiering3d" class="chart"></div>
    80.   <script>
    81.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // function for randomly assigning data to charts
    82.     window.v = function(n, c, r) {
    83.       var values = [],
    84.         value = 0,
    85.         i;
    86.       for (i = 0; i < n; i++) {
    87.         if (i === 0) {
    88.           value = Math.round(20 + 80 * Math.random());
    89.           switch (c) {
    90.             case 1:
    91.               values.push(value);
    92.               break;
    93.             case 2:
    94.               values.push([i, value]);
    95.               break;
    96.             case 3:
    97.               values.push([i, value, Math.round(4 + 6 * Math.random())]);
    98.               break;
    99.           }
    100.         } else {
    101.           switch (c) {
    102.             case 1:
    103.               if (r) {
    104.                 value = Math.round(20 + 80 * Math.random());
    105.               } else {
    106.                 value = values[i - 1] + Math.round(-15 + 30 * Math.random());
    107.                 if (value < 0) {
    108.                   value = Math.round(10 + 10 * Math.random())
    109.                 }
    110.               }
    111.               values.push(value);
    112.               break;
    113.             case 2:
    114.               if (r) {
    115.                 value = Math.round(20 + 80 * Math.random());
    116.               } else {
    117.                 value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
    118.                 if (value < 0) {
    119.                   value = Math.round(10 + 10 * Math.random())
    120.                 }
    121.               }
    122.               values.push([i, value]);
    123.               break;
    124.             case 3:
    125.               if (r) {
    126.                 value = Math.round(20 + 80 * Math.random());
    127.               } else {
    128.                 value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
    129.                 if (value < 0) {
    130.                   value = Math.round(10 + 10 * Math.random())
    131.                 }
    132.               }
    133.               values.push([i, value, Math.round(4 + 6 * Math.random())]);
    134.               break;
    135.           }
    136.         }
    137.       }
    138.       return values;
    139.     }
    140.  
    141.     zingchart.render({
    142.       id: 'cline',
    143.       width: 80,
    144.       height: 80,
    145.       theme: 'spark',
    146.       data: {
    147.         borderWidth: 1,
    148.         borderColor: '#ccc',
    149.         type: 'line',
    150.         title: {
    151.           text: 'line'
    152.         },
    153.         plot: {
    154.           stacked: true
    155.         },
    156.         series: [{
    157.             values: v(24, 1)
    158.           },
    159.           {
    160.             values: v(24, 1)
    161.           }
    162.         ]
    163.       }
    164.     });
    165.  
    166.     zingchart.render({
    167.       id: 'carea',
    168.       width: 80,
    169.       height: 80,
    170.       theme: 'spark',
    171.       data: {
    172.         borderWidth: 1,
    173.         borderColor: '#ccc',
    174.         type: 'area',
    175.         title: {
    176.           text: 'area'
    177.         },
    178.         plot: {
    179.           stacked: true
    180.         },
    181.         series: [{
    182.             values: v(24, 1)
    183.           },
    184.           {
    185.             values: v(24, 1)
    186.           }
    187.         ]
    188.       }
    189.     });
    190.  
    191.  
    192.     zingchart.render({
    193.       id: 'cvbar',
    194.       width: 80,
    195.       height: 80,
    196.       theme: 'spark',
    197.       data: {
    198.         borderWidth: 1,
    199.         borderColor: '#ccc',
    200.         type: 'vbar',
    201.         title: {
    202.           text: 'vbar'
    203.         },
    204.         plot: {
    205.           stacked: true
    206.         },
    207.         series: [{
    208.             values: v(8, 1)
    209.           },
    210.           {
    211.             values: v(8, 1)
    212.           }
    213.         ]
    214.       }
    215.     });
    216.  
    217.     zingchart.render({
    218.       id: 'cmixed',
    219.       width: 80,
    220.       height: 80,
    221.       theme: 'spark',
    222.       data: {
    223.         borderWidth: 1,
    224.         borderColor: '#ccc',
    225.         type: 'mixed',
    226.         title: {
    227.           text: 'mixed'
    228.         },
    229.         series: [{
    230.             type: 'vbar',
    231.             values: v(8, 1)
    232.           },
    233.           {
    234.             type: 'line',
    235.             values: v(8, 1)
    236.           }
    237.         ]
    238.       }
    239.     });
    240.  
    241.     zingchart.render({
    242.       id: 'cvline',
    243.       width: 80,
    244.       height: 80,
    245.       theme: 'spark',
    246.       data: {
    247.         borderWidth: 1,
    248.         borderColor: '#ccc',
    249.         type: 'vline',
    250.         title: {
    251.           text: 'vline'
    252.         },
    253.         plot: {
    254.           stacked: true
    255.         },
    256.         series: [{
    257.             values: v(24, 1)
    258.           },
    259.           {
    260.             values: v(24, 1)
    261.           }
    262.         ]
    263.       }
    264.     });
    265.  
    266.     zingchart.render({
    267.       id: 'cvarea',
    268.       width: 80,
    269.       height: 80,
    270.       theme: 'spark',
    271.       data: {
    272.         borderWidth: 1,
    273.         borderColor: '#ccc',
    274.         type: 'varea',
    275.         title: {
    276.           text: 'varea'
    277.         },
    278.         plot: {
    279.           stacked: true
    280.         },
    281.         series: [{
    282.             values: v(24, 1)
    283.           },
    284.           {
    285.             values: v(24, 1)
    286.           }
    287.         ]
    288.       }
    289.     });
    290.  
    291.     zingchart.render({
    292.       id: 'chbar',
    293.       width: 80,
    294.       height: 80,
    295.       theme: 'spark',
    296.       data: {
    297.         borderWidth: 1,
    298.         borderColor: '#ccc',
    299.         type: 'hbar',
    300.         title: {
    301.           text: 'hbar'
    302.         },
    303.         plot: {
    304.           stacked: true
    305.         },
    306.         series: [{
    307.             values: v(8, 1)
    308.           },
    309.           {
    310.             values: v(8, 1)
    311.           }
    312.         ]
    313.       }
    314.     });
    315.  
    316.     zingchart.render({
    317.       id: 'cscatter',
    318.       width: 80,
    319.       height: 80,
    320.       theme: 'spark',
    321.       data: {
    322.         borderWidth: 1,
    323.         borderColor: '#ccc',
    324.         type: 'scatter',
    325.         title: {
    326.           text: 'scatter'
    327.         },
    328.         plot: {},
    329.         series: [{
    330.             values: v(12, 2, true)
    331.           },
    332.           {
    333.             values: v(12, 2, true)
    334.           }
    335.         ]
    336.       }
    337.     });
    338.  
    339.     zingchart.render({
    340.       id: 'chscatter',
    341.       width: 80,
    342.       height: 80,
    343.       theme: 'spark',
    344.       data: {
    345.         borderWidth: 1,
    346.         borderColor: '#ccc',
    347.         type: 'hscatter',
    348.         title: {
    349.           text: 'hscatter'
    350.         },
    351.         plot: {},
    352.         series: [{
    353.             values: v(12, 2, true)
    354.           },
    355.           {
    356.             values: v(12, 2, true)
    357.           }
    358.         ]
    359.       }
    360.     });
    361.  
    362.     zingchart.render({
    363.       id: 'cbubble',
    364.       width: 80,
    365.       height: 80,
    366.       theme: 'spark',
    367.       data: {
    368.         borderWidth: 1,
    369.         borderColor: '#ccc',
    370.         type: 'bubble',
    371.         title: {
    372.           text: 'bubble'
    373.         },
    374.         plot: {},
    375.         series: [{
    376.             values: v(6, 3, true)
    377.           },
    378.           {
    379.             values: v(6, 3, true)
    380.           }
    381.         ]
    382.       }
    383.     });
    384.  
    385.     zingchart.render({
    386.       id: 'chbubble',
    387.       width: 80,
    388.       height: 80,
    389.       theme: 'spark',
    390.       data: {
    391.         borderWidth: 1,
    392.         borderColor: '#ccc',
    393.         type: 'hbubble',
    394.         title: {
    395.           text: 'hbubble'
    396.         },
    397.         plot: {},
    398.         series: [{
    399.             values: v(6, 3, true)
    400.           },
    401.           {
    402.             values: v(6, 3, true)
    403.           }
    404.         ]
    405.       }
    406.     });
    407.  
    408.     zingchart.render({
    409.       id: 'cpiefull',
    410.       width: 80,
    411.       height: 80,
    412.       theme: 'spark',
    413.       data: {
    414.         borderWidth: 1,
    415.         borderColor: '#ccc',
    416.         type: 'pie',
    417.         title: {
    418.           text: 'pie-full'
    419.         },
    420.         plot: {},
    421.         series: [{
    422.             values: v(1, 1)
    423.           },
    424.           {
    425.             values: v(1, 1)
    426.           },
    427.           {
    428.             values: v(1, 1)
    429.           },
    430.           {
    431.             values: v(1, 1)
    432.           }
    433.         ]
    434.       }
    435.     });
    436.  
    437.     zingchart.render({
    438.       id: 'cpiering',
    439.       width: 80,
    440.       height: 80,
    441.       theme: 'spark',
    442.       data: {
    443.         borderWidth: 1,
    444.         borderColor: '#ccc',
    445.         type: 'pie',
    446.         title: {
    447.           text: 'pie-ring'
    448.         },
    449.         plot: {
    450.           slice: '40%'
    451.         },
    452.         series: [{
    453.             values: v(1, 1)
    454.           },
    455.           {
    456.             values: v(1, 1)
    457.           },
    458.           {
    459.             values: v(1, 1)
    460.           },
    461.           {
    462.             values: v(1, 1)
    463.           }
    464.         ]
    465.       }
    466.     });
    467.  
    468.     zingchart.render({
    469.       id: 'cnestedpie',
    470.       width: 80,
    471.       height: 80,
    472.       theme: 'spark',
    473.       data: {
    474.         borderWidth: 1,
    475.         borderColor: '#ccc',
    476.         type: 'nestedpie',
    477.         title: {
    478.           text: 'nestedpie'
    479.         },
    480.         plot: {},
    481.         series: [{
    482.             values: v(2, 1)
    483.           },
    484.           {
    485.             values: v(2, 1)
    486.           },
    487.           {
    488.             values: v(2, 1)
    489.           },
    490.           {
    491.             values: v(2, 1)
    492.           }
    493.         ]
    494.       }
    495.     });
    496.  
    497.     zingchart.render({
    498.       id: 'cpiano',
    499.       width: 80,
    500.       height: 80,
    501.       theme: 'spark',
    502.       data: {
    503.         borderWidth: 1,
    504.         borderColor: '#ccc',
    505.         type: 'piano',
    506.         title: {
    507.           text: 'piano'
    508.         },
    509.         plot: {},
    510.         series: [{
    511.             values: v(6, 1)
    512.           },
    513.           {
    514.             values: v(6, 1)
    515.           },
    516.           {
    517.             values: v(6, 1)
    518.           },
    519.           {
    520.             values: v(6, 1)
    521.           }
    522.         ]
    523.       }
    524.     });
    525.  
    526.     zingchart.render({
    527.       id: 'cradardots',
    528.       width: 80,
    529.       height: 80,
    530.       theme: 'spark',
    531.       data: {
    532.         borderWidth: 1,
    533.         borderColor: '#ccc',
    534.         type: 'radar',
    535.         title: {
    536.           text: 'radar-dots'
    537.         },
    538.         plot: {
    539.           stacked: true,
    540.           aspect: 'dots'
    541.         },
    542.         series: [{
    543.             values: v(6, 1)
    544.           },
    545.           {
    546.             values: v(6, 1)
    547.           }
    548.         ]
    549.       }
    550.     });
    551.  
    552.     zingchart.render({
    553.       id: 'cradarline',
    554.       width: 80,
    555.       height: 80,
    556.       theme: 'spark',
    557.       data: {
    558.         borderWidth: 1,
    559.         borderColor: '#ccc',
    560.         type: 'radar',
    561.         title: {
    562.           text: 'radar-line'
    563.         },
    564.         plot: {
    565.           stacked: true,
    566.           aspect: 'line'
    567.         },
    568.         series: [{
    569.             values: v(6, 1)
    570.           },
    571.           {
    572.             values: v(6, 1)
    573.           }
    574.         ]
    575.       }
    576.     });
    577.  
    578.     zingchart.render({
    579.       id: 'cradararea',
    580.       width: 80,
    581.       height: 80,
    582.       theme: 'spark',
    583.       data: {
    584.         borderWidth: 1,
    585.         borderColor: '#ccc',
    586.         type: 'radar',
    587.         title: {
    588.           text: 'radar-area'
    589.         },
    590.         plot: {
    591.           stacked: true,
    592.           aspect: 'area'
    593.         },
    594.         series: [{
    595.             values: v(6, 1)
    596.           },
    597.           {
    598.             values: v(6, 1)
    599.           }
    600.         ]
    601.       }
    602.     });
    603.  
    604.     zingchart.render({
    605.       id: 'cradarrose',
    606.       width: 80,
    607.       height: 80,
    608.       theme: 'spark',
    609.       data: {
    610.         borderWidth: 1,
    611.         borderColor: '#ccc',
    612.         type: 'radar',
    613.         title: {
    614.           text: 'radar-rose'
    615.         },
    616.         plot: {
    617.           aspect: 'rose'
    618.         },
    619.         series: [{
    620.             values: v(6, 1)
    621.           },
    622.           {
    623.             values: v(6, 1)
    624.           }
    625.         ]
    626.       }
    627.     });
    628.  
    629.     zingchart.render({
    630.       id: 'cgauge',
    631.       width: 80,
    632.       height: 80,
    633.       theme: 'spark',
    634.       data: {
    635.         borderWidth: 1,
    636.         borderColor: '#ccc',
    637.         type: 'gauge',
    638.         title: {
    639.           text: 'gauge'
    640.         },
    641.         series: [{
    642.             values: v(1, 1)
    643.           },
    644.           {
    645.             values: v(1, 1)
    646.           }
    647.         ]
    648.       }
    649.     });
    650.  
    651.     zingchart.render({
    652.       id: 'cvbullet',
    653.       width: 80,
    654.       height: 80,
    655.       theme: 'spark',
    656.       data: {
    657.         borderWidth: 1,
    658.         borderColor: '#ccc',
    659.         type: 'vbullet',
    660.         title: {
    661.           text: 'vbullet'
    662.         },
    663.         series: [{
    664.             values: v(2, 1),
    665.             goals: v(2, 1)
    666.           },
    667.           {
    668.             values: v(2, 1),
    669.             goals: v(2, 1)
    670.           }
    671.         ]
    672.       }
    673.     });
    674.  
    675.     zingchart.render({
    676.       id: 'chbullet',
    677.       width: 80,
    678.       height: 80,
    679.       theme: 'spark',
    680.       data: {
    681.         borderWidth: 1,
    682.         borderColor: '#ccc',
    683.         type: 'hbullet',
    684.         title: {
    685.           text: 'hbullet'
    686.         },
    687.         series: [{
    688.             values: v(2, 1),
    689.             goals: v(2, 1)
    690.           },
    691.           {
    692.             values: v(2, 1),
    693.             goals: v(2, 1)
    694.           }
    695.         ]
    696.       }
    697.     });
    698.  
    699.     zingchart.render({
    700.       id: 'crange',
    701.       width: 80,
    702.       height: 80,
    703.       theme: 'spark',
    704.       data: {
    705.         borderWidth: 1,
    706.         borderColor: '#ccc',
    707.         type: 'range',
    708.         title: {
    709.           text: 'range'
    710.         },
    711.         series: [{
    712.           values: [
    713.             [15, 30],
    714.             [20, 40],
    715.             [16, 35],
    716.             [21, 30],
    717.             [25, 45],
    718.             [18, 27],
    719.             [23, 35],
    720.             [29, 39],
    721.             [27, 30],
    722.             [19, 34]
    723.           ]
    724.         }]
    725.       }
    726.     });
    727.  
    728.     zingchart.render({
    729.       id: 'cvrange',
    730.       width: 80,
    731.       height: 80,
    732.       theme: 'spark',
    733.       data: {
    734.         borderWidth: 1,
    735.         borderColor: '#ccc',
    736.         type: 'vrange',
    737.         title: {
    738.           text: 'vrange'
    739.         },
    740.         series: [{
    741.           values: [
    742.             [15, 30],
    743.             [20, 40],
    744.             [16, 35],
    745.             [21, 30],
    746.             [25, 45],
    747.             [18, 27],
    748.             [23, 35],
    749.             [29, 39],
    750.             [27, 30],
    751.             [19, 34]
    752.           ]
    753.         }]
    754.       }
    755.     });
    756.  
    757.     zingchart.render({
    758.       id: 'cvenn',
    759.       width: 80,
    760.       height: 80,
    761.       theme: 'spark',
    762.       data: {
    763.         borderWidth: 1,
    764.         borderColor: '#ccc',
    765.         type: 'venn',
    766.         title: {
    767.           text: 'venn'
    768.         },
    769.         series: [{
    770.             values: [10],
    771.             join: [2]
    772.           },
    773.           {
    774.             values: [6],
    775.             join: [1]
    776.           },
    777.           {
    778.             values: [8],
    779.             join: [3]
    780.           }
    781.         ]
    782.       }
    783.     });
    784.  
    785.     zingchart.render({
    786.       id: 'cvfunnel',
    787.       width: 80,
    788.       height: 80,
    789.       theme: 'spark',
    790.       data: {
    791.         borderWidth: 1,
    792.         borderColor: '#ccc',
    793.         type: 'vfunnel',
    794.         title: {
    795.           text: 'vfunnel'
    796.         },
    797.         series: [{
    798.             values: v(1, 1)
    799.           },
    800.           {
    801.             values: v(1, 1)
    802.           },
    803.           {
    804.             values: v(1, 1)
    805.           },
    806.           {
    807.             values: v(1, 1)
    808.           },
    809.           {
    810.             values: v(1, 1)
    811.           }
    812.         ]
    813.       }
    814.     });
    815.  
    816.     zingchart.render({
    817.       id: 'chfunnel',
    818.       width: 80,
    819.       height: 80,
    820.       theme: 'spark',
    821.       data: {
    822.         borderWidth: 1,
    823.         borderColor: '#ccc',
    824.         type: 'hfunnel',
    825.         title: {
    826.           text: 'hfunnel'
    827.         },
    828.         series: [{
    829.             values: v(1, 1)
    830.           },
    831.           {
    832.             values: v(1, 1)
    833.           },
    834.           {
    835.             values: v(1, 1)
    836.           },
    837.           {
    838.             values: v(1, 1)
    839.           },
    840.           {
    841.             values: v(1, 1)
    842.           }
    843.         ]
    844.       }
    845.     });
    846.  
    847.     /* ================================================== */
    848.  
    849.     zingchart.render({
    850.       id: 'cline3d',
    851.       width: 80,
    852.       height: 80,
    853.       theme: 'spark',
    854.       data: {
    855.         borderWidth: 1,
    856.         borderColor: '#ccc',
    857.         type: 'line3d',
    858.         title: {
    859.           text: 'line3d'
    860.         },
    861.         plot: {
    862.           stacked: true
    863.         },
    864.         series: [{
    865.             values: v(12, 1)
    866.           },
    867.           {
    868.             values: v(12, 1)
    869.           }
    870.         ]
    871.       }
    872.     });
    873.  
    874.     zingchart.render({
    875.       id: 'carea3d',
    876.       width: 80,
    877.       height: 80,
    878.       theme: 'spark',
    879.       data: {
    880.         borderWidth: 1,
    881.         borderColor: '#ccc',
    882.         type: 'area3d',
    883.         title: {
    884.           text: 'area3d'
    885.         },
    886.         plot: {
    887.           stacked: true
    888.         },
    889.         series: [{
    890.             values: v(12, 1)
    891.           },
    892.           {
    893.             values: v(12, 1)
    894.           }
    895.         ]
    896.       }
    897.     });
    898.  
    899.  
    900.     zingchart.render({
    901.       id: 'cvbar3d',
    902.       width: 80,
    903.       height: 80,
    904.       theme: 'spark',
    905.       data: {
    906.         borderWidth: 1,
    907.         borderColor: '#ccc',
    908.         type: 'vbar3d',
    909.         title: {
    910.           text: 'vbar3d'
    911.         },
    912.         plot: {
    913.           stacked: true
    914.         },
    915.         series: [{
    916.             values: v(4, 1)
    917.           },
    918.           {
    919.             values: v(4, 1)
    920.           }
    921.         ]
    922.       }
    923.     });
    924.  
    925.     zingchart.render({
    926.       id: 'chbar3d',
    927.       width: 80,
    928.       height: 80,
    929.       theme: 'spark',
    930.       data: {
    931.         borderWidth: 1,
    932.         borderColor: '#ccc',
    933.         type: 'hbar3d',
    934.         title: {
    935.           text: 'hbar3d'
    936.         },
    937.         plot: {
    938.           stacked: true
    939.         },
    940.         series: [{
    941.             values: v(4, 1)
    942.           },
    943.           {
    944.             values: v(4, 1)
    945.           }
    946.         ]
    947.       }
    948.     });
    949.  
    950.     zingchart.render({
    951.       id: 'cpiefull3d',
    952.       width: 80,
    953.       height: 80,
    954.       theme: 'spark',
    955.       data: {
    956.         borderWidth: 1,
    957.         borderColor: '#ccc',
    958.         type: 'pie3d',
    959.         title: {
    960.           text: 'pie3d-full'
    961.         },
    962.         plot: {},
    963.         series: [{
    964.             values: v(1, 1)
    965.           },
    966.           {
    967.             values: v(1, 1)
    968.           },
    969.           {
    970.             values: v(1, 1)
    971.           },
    972.           {
    973.             values: v(1, 1)
    974.           }
    975.         ]
    976.       }
    977.     });
    978.  
    979.     zingchart.render({
    980.       id: 'cpiering3d',
    981.       width: 80,
    982.       height: 80,
    983.       theme: 'spark',
    984.       data: {
    985.         borderWidth: 1,
    986.         borderColor: '#ccc',
    987.         type: 'pie3d',
    988.         title: {
    989.           text: 'pie3d-ring'
    990.         },
    991.         plot: {
    992.           slice: '40%'
    993.         },
    994.         series: [{
    995.             values: v(1, 1)
    996.           },
    997.           {
    998.             values: v(1, 1)
    999.           },
    1000.           {
    1001.             values: v(1, 1)
    1002.           },
    1003.           {
    1004.             values: v(1, 1)
    1005.           }
    1006.         ]
    1007.       }
    1008.     });
    1009.   </script>
    1010. </body>
    1011.  
    1012. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <script>
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10.     ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
    11.   </script>
    12.   <script src='//code.jquery.com/jquery-2.1.4.min.js'></script>
    13. </head>
    14.  
    15. <body>
    16.   <h2>Spark (alone)</h2>
    17.  
    18.   <div id="cline" class="chart"></div>
    19.   <div id="carea" class="chart"></div>
    20.   <div id="cvbar" class="chart"></div>
    21.  
    22.   <div id="cmixed" class="chart"></div>
    23.  
    24.   <div id="cvline" class="chart"></div>
    25.   <div id="cvarea" class="chart"></div>
    26.   <div id="chbar" class="chart"></div>
    27.  
    28.   <div id="cscatter" class="chart"></div>
    29.   <div id="chscatter" class="chart"></div>
    30.   <div id="cbubble" class="chart"></div>
    31.   <div id="chbubble" class="chart"></div>
    32.  
    33.   <div id="cpiefull" class="chart"></div>
    34.   <div id="cpiering" class="chart"></div>
    35.   <div id="cnestedpie" class="chart"></div>
    36.  
    37.   <div id="cpiano" class="chart"></div>
    38.  
    39.   <div id="cradardots" class="chart"></div>
    40.   <div id="cradarline" class="chart"></div>
    41.   <div id="cradararea" class="chart"></div>
    42.   <div id="cradarrose" class="chart"></div>
    43.  
    44.   <div id="cgauge" class="chart"></div>
    45.   <div id="cvbullet" class="chart"></div>
    46.   <div id="chbullet" class="chart"></div>
    47.  
    48.   <div id="crange" class="chart"></div>
    49.   <div id="cvrange" class="chart"></div>
    50.   <div id="cvenn" class="chart"></div>
    51.  
    52.   <div id="cvfunnel" class="chart"></div>
    53.   <div id="chfunnel" class="chart"></div>
    54.  
    55.   <div id="cline3d" class="chart"></div>
    56.   <div id="carea3d" class="chart"></div>
    57.   <div id="cvbar3d" class="chart"></div>
    58.   <div id="chbar3d" class="chart"></div>
    59.   <div id="cpiefull3d" class="chart"></div>
    60.   <div id="cpiering3d" class="chart"></div>
    61. </body>
    62.  
    63. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 20px;
    7. }
    8.  
    9. .chart {
    10.   width: 150px;
    11.   min-height: 150px;
    12.   display: inline-block;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // function for randomly assigning data to charts
    2. window.v = function(n, c, r) {
    3.   var values = [],
    4.     value = 0,
    5.     i;
    6.   for (i = 0; i < n; i++) {
    7.     if (i === 0) {
    8.       value = Math.round(20 + 80 * Math.random());
    9.       switch (c) {
    10.         case 1:
    11.           values.push(value);
    12.           break;
    13.         case 2:
    14.           values.push([i, value]);
    15.           break;
    16.         case 3:
    17.           values.push([i, value, Math.round(4 + 6 * Math.random())]);
    18.           break;
    19.       }
    20.     } else {
    21.       switch (c) {
    22.         case 1:
    23.           if (r) {
    24.             value = Math.round(20 + 80 * Math.random());
    25.           } else {
    26.             value = values[i - 1] + Math.round(-15 + 30 * Math.random());
    27.             if (value < 0) {
    28.               value = Math.round(10 + 10 * Math.random())
    29.             }
    30.           }
    31.           values.push(value);
    32.           break;
    33.         case 2:
    34.           if (r) {
    35.             value = Math.round(20 + 80 * Math.random());
    36.           } else {
    37.             value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
    38.             if (value < 0) {
    39.               value = Math.round(10 + 10 * Math.random())
    40.             }
    41.           }
    42.           values.push([i, value]);
    43.           break;
    44.         case 3:
    45.           if (r) {
    46.             value = Math.round(20 + 80 * Math.random());
    47.           } else {
    48.             value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
    49.             if (value < 0) {
    50.               value = Math.round(10 + 10 * Math.random())
    51.             }
    52.           }
    53.           values.push([i, value, Math.round(4 + 6 * Math.random())]);
    54.           break;
    55.       }
    56.     }
    57.   }
    58.   return values;
    59. }
    60.  
    61. zingchart.render({
    62.   id: 'cline',
    63.   width: 80,
    64.   height: 80,
    65.   theme: 'spark',
    66.   data: {
    67.     borderWidth: 1,
    68.     borderColor: '#ccc',
    69.     type: 'line',
    70.     title: {
    71.       text: 'line'
    72.     },
    73.     plot: {
    74.       stacked: true
    75.     },
    76.     series: [{
    77.         values: v(24, 1)
    78.       },
    79.       {
    80.         values: v(24, 1)
    81.       }
    82.     ]
    83.   }
    84. });
    85.  
    86. zingchart.render({
    87.   id: 'carea',
    88.   width: 80,
    89.   height: 80,
    90.   theme: 'spark',
    91.   data: {
    92.     borderWidth: 1,
    93.     borderColor: '#ccc',
    94.     type: 'area',
    95.     title: {
    96.       text: 'area'
    97.     },
    98.     plot: {
    99.       stacked: true
    100.     },
    101.     series: [{
    102.         values: v(24, 1)
    103.       },
    104.       {
    105.         values: v(24, 1)
    106.       }
    107.     ]
    108.   }
    109. });
    110.  
    111.  
    112. zingchart.render({
    113.   id: 'cvbar',
    114.   width: 80,
    115.   height: 80,
    116.   theme: 'spark',
    117.   data: {
    118.     borderWidth: 1,
    119.     borderColor: '#ccc',
    120.     type: 'vbar',
    121.     title: {
    122.       text: 'vbar'
    123.     },
    124.     plot: {
    125.       stacked: true
    126.     },
    127.     series: [{
    128.         values: v(8, 1)
    129.       },
    130.       {
    131.         values: v(8, 1)
    132.       }
    133.     ]
    134.   }
    135. });
    136.  
    137. zingchart.render({
    138.   id: 'cmixed',
    139.   width: 80,
    140.   height: 80,
    141.   theme: 'spark',
    142.   data: {
    143.     borderWidth: 1,
    144.     borderColor: '#ccc',
    145.     type: 'mixed',
    146.     title: {
    147.       text: 'mixed'
    148.     },
    149.     series: [{
    150.         type: 'vbar',
    151.         values: v(8, 1)
    152.       },
    153.       {
    154.         type: 'line',
    155.         values: v(8, 1)
    156.       }
    157.     ]
    158.   }
    159. });
    160.  
    161. zingchart.render({
    162.   id: 'cvline',
    163.   width: 80,
    164.   height: 80,
    165.   theme: 'spark',
    166.   data: {
    167.     borderWidth: 1,
    168.     borderColor: '#ccc',
    169.     type: 'vline',
    170.     title: {
    171.       text: 'vline'
    172.     },
    173.     plot: {
    174.       stacked: true
    175.     },
    176.     series: [{
    177.         values: v(24, 1)
    178.       },
    179.       {
    180.         values: v(24, 1)
    181.       }
    182.     ]
    183.   }
    184. });
    185.  
    186. zingchart.render({
    187.   id: 'cvarea',
    188.   width: 80,
    189.   height: 80,
    190.   theme: 'spark',
    191.   data: {
    192.     borderWidth: 1,
    193.     borderColor: '#ccc',
    194.     type: 'varea',
    195.     title: {
    196.       text: 'varea'
    197.     },
    198.     plot: {
    199.       stacked: true
    200.     },
    201.     series: [{
    202.         values: v(24, 1)
    203.       },
    204.       {
    205.         values: v(24, 1)
    206.       }
    207.     ]
    208.   }
    209. });
    210.  
    211. zingchart.render({
    212.   id: 'chbar',
    213.   width: 80,
    214.   height: 80,
    215.   theme: 'spark',
    216.   data: {
    217.     borderWidth: 1,
    218.     borderColor: '#ccc',
    219.     type: 'hbar',
    220.     title: {
    221.       text: 'hbar'
    222.     },
    223.     plot: {
    224.       stacked: true
    225.     },
    226.     series: [{
    227.         values: v(8, 1)
    228.       },
    229.       {
    230.         values: v(8, 1)
    231.       }
    232.     ]
    233.   }
    234. });
    235.  
    236. zingchart.render({
    237.   id: 'cscatter',
    238.   width: 80,
    239.   height: 80,
    240.   theme: 'spark',
    241.   data: {
    242.     borderWidth: 1,
    243.     borderColor: '#ccc',
    244.     type: 'scatter',
    245.     title: {
    246.       text: 'scatter'
    247.     },
    248.     plot: {},
    249.     series: [{
    250.         values: v(12, 2, true)
    251.       },
    252.       {
    253.         values: v(12, 2, true)
    254.       }
    255.     ]
    256.   }
    257. });
    258.  
    259. zingchart.render({
    260.   id: 'chscatter',
    261.   width: 80,
    262.   height: 80,
    263.   theme: 'spark',
    264.   data: {
    265.     borderWidth: 1,
    266.     borderColor: '#ccc',
    267.     type: 'hscatter',
    268.     title: {
    269.       text: 'hscatter'
    270.     },
    271.     plot: {},
    272.     series: [{
    273.         values: v(12, 2, true)
    274.       },
    275.       {
    276.         values: v(12, 2, true)
    277.       }
    278.     ]
    279.   }
    280. });
    281.  
    282. zingchart.render({
    283.   id: 'cbubble',
    284.   width: 80,
    285.   height: 80,
    286.   theme: 'spark',
    287.   data: {
    288.     borderWidth: 1,
    289.     borderColor: '#ccc',
    290.     type: 'bubble',
    291.     title: {
    292.       text: 'bubble'
    293.     },
    294.     plot: {},
    295.     series: [{
    296.         values: v(6, 3, true)
    297.       },
    298.       {
    299.         values: v(6, 3, true)
    300.       }
    301.     ]
    302.   }
    303. });
    304.  
    305. zingchart.render({
    306.   id: 'chbubble',
    307.   width: 80,
    308.   height: 80,
    309.   theme: 'spark',
    310.   data: {
    311.     borderWidth: 1,
    312.     borderColor: '#ccc',
    313.     type: 'hbubble',
    314.     title: {
    315.       text: 'hbubble'
    316.     },
    317.     plot: {},
    318.     series: [{
    319.         values: v(6, 3, true)
    320.       },
    321.       {
    322.         values: v(6, 3, true)
    323.       }
    324.     ]
    325.   }
    326. });
    327.  
    328. zingchart.render({
    329.   id: 'cpiefull',
    330.   width: 80,
    331.   height: 80,
    332.   theme: 'spark',
    333.   data: {
    334.     borderWidth: 1,
    335.     borderColor: '#ccc',
    336.     type: 'pie',
    337.     title: {
    338.       text: 'pie-full'
    339.     },
    340.     plot: {},
    341.     series: [{
    342.         values: v(1, 1)
    343.       },
    344.       {
    345.         values: v(1, 1)
    346.       },
    347.       {
    348.         values: v(1, 1)
    349.       },
    350.       {
    351.         values: v(1, 1)
    352.       }
    353.     ]
    354.   }
    355. });
    356.  
    357. zingchart.render({
    358.   id: 'cpiering',
    359.   width: 80,
    360.   height: 80,
    361.   theme: 'spark',
    362.   data: {
    363.     borderWidth: 1,
    364.     borderColor: '#ccc',
    365.     type: 'pie',
    366.     title: {
    367.       text: 'pie-ring'
    368.     },
    369.     plot: {
    370.       slice: '40%'
    371.     },
    372.     series: [{
    373.         values: v(1, 1)
    374.       },
    375.       {
    376.         values: v(1, 1)
    377.       },
    378.       {
    379.         values: v(1, 1)
    380.       },
    381.       {
    382.         values: v(1, 1)
    383.       }
    384.     ]
    385.   }
    386. });
    387.  
    388. zingchart.render({
    389.   id: 'cnestedpie',
    390.   width: 80,
    391.   height: 80,
    392.   theme: 'spark',
    393.   data: {
    394.     borderWidth: 1,
    395.     borderColor: '#ccc',
    396.     type: 'nestedpie',
    397.     title: {
    398.       text: 'nestedpie'
    399.     },
    400.     plot: {},
    401.     series: [{
    402.         values: v(2, 1)
    403.       },
    404.       {
    405.         values: v(2, 1)
    406.       },
    407.       {
    408.         values: v(2, 1)
    409.       },
    410.       {
    411.         values: v(2, 1)
    412.       }
    413.     ]
    414.   }
    415. });
    416.  
    417. zingchart.render({
    418.   id: 'cpiano',
    419.   width: 80,
    420.   height: 80,
    421.   theme: 'spark',
    422.   data: {
    423.     borderWidth: 1,
    424.     borderColor: '#ccc',
    425.     type: 'piano',
    426.     title: {
    427.       text: 'piano'
    428.     },
    429.     plot: {},
    430.     series: [{
    431.         values: v(6, 1)
    432.       },
    433.       {
    434.         values: v(6, 1)
    435.       },
    436.       {
    437.         values: v(6, 1)
    438.       },
    439.       {
    440.         values: v(6, 1)
    441.       }
    442.     ]
    443.   }
    444. });
    445.  
    446. zingchart.render({
    447.   id: 'cradardots',
    448.   width: 80,
    449.   height: 80,
    450.   theme: 'spark',
    451.   data: {
    452.     borderWidth: 1,
    453.     borderColor: '#ccc',
    454.     type: 'radar',
    455.     title: {
    456.       text: 'radar-dots'
    457.     },
    458.     plot: {
    459.       stacked: true,
    460.       aspect: 'dots'
    461.     },
    462.     series: [{
    463.         values: v(6, 1)
    464.       },
    465.       {
    466.         values: v(6, 1)
    467.       }
    468.     ]
    469.   }
    470. });
    471.  
    472. zingchart.render({
    473.   id: 'cradarline',
    474.   width: 80,
    475.   height: 80,
    476.   theme: 'spark',
    477.   data: {
    478.     borderWidth: 1,
    479.     borderColor: '#ccc',
    480.     type: 'radar',
    481.     title: {
    482.       text: 'radar-line'
    483.     },
    484.     plot: {
    485.       stacked: true,
    486.       aspect: 'line'
    487.     },
    488.     series: [{
    489.         values: v(6, 1)
    490.       },
    491.       {
    492.         values: v(6, 1)
    493.       }
    494.     ]
    495.   }
    496. });
    497.  
    498. zingchart.render({
    499.   id: 'cradararea',
    500.   width: 80,
    501.   height: 80,
    502.   theme: 'spark',
    503.   data: {
    504.     borderWidth: 1,
    505.     borderColor: '#ccc',
    506.     type: 'radar',
    507.     title: {
    508.       text: 'radar-area'
    509.     },
    510.     plot: {
    511.       stacked: true,
    512.       aspect: 'area'
    513.     },
    514.     series: [{
    515.         values: v(6, 1)
    516.       },
    517.       {
    518.         values: v(6, 1)
    519.       }
    520.     ]
    521.   }
    522. });
    523.  
    524. zingchart.render({
    525.   id: 'cradarrose',
    526.   width: 80,
    527.   height: 80,
    528.   theme: 'spark',
    529.   data: {
    530.     borderWidth: 1,
    531.     borderColor: '#ccc',
    532.     type: 'radar',
    533.     title: {
    534.       text: 'radar-rose'
    535.     },
    536.     plot: {
    537.       aspect: 'rose'
    538.     },
    539.     series: [{
    540.         values: v(6, 1)
    541.       },
    542.       {
    543.         values: v(6, 1)
    544.       }
    545.     ]
    546.   }
    547. });
    548.  
    549. zingchart.render({
    550.   id: 'cgauge',
    551.   width: 80,
    552.   height: 80,
    553.   theme: 'spark',
    554.   data: {
    555.     borderWidth: 1,
    556.     borderColor: '#ccc',
    557.     type: 'gauge',
    558.     title: {
    559.       text: 'gauge'
    560.     },
    561.     series: [{
    562.         values: v(1, 1)
    563.       },
    564.       {
    565.         values: v(1, 1)
    566.       }
    567.     ]
    568.   }
    569. });
    570.  
    571. zingchart.render({
    572.   id: 'cvbullet',
    573.   width: 80,
    574.   height: 80,
    575.   theme: 'spark',
    576.   data: {
    577.     borderWidth: 1,
    578.     borderColor: '#ccc',
    579.     type: 'vbullet',
    580.     title: {
    581.       text: 'vbullet'
    582.     },
    583.     series: [{
    584.         values: v(2, 1),
    585.         goals: v(2, 1)
    586.       },
    587.       {
    588.         values: v(2, 1),
    589.         goals: v(2, 1)
    590.       }
    591.     ]
    592.   }
    593. });
    594.  
    595. zingchart.render({
    596.   id: 'chbullet',
    597.   width: 80,
    598.   height: 80,
    599.   theme: 'spark',
    600.   data: {
    601.     borderWidth: 1,
    602.     borderColor: '#ccc',
    603.     type: 'hbullet',
    604.     title: {
    605.       text: 'hbullet'
    606.     },
    607.     series: [{
    608.         values: v(2, 1),
    609.         goals: v(2, 1)
    610.       },
    611.       {
    612.         values: v(2, 1),
    613.         goals: v(2, 1)
    614.       }
    615.     ]
    616.   }
    617. });
    618.  
    619. zingchart.render({
    620.   id: 'crange',
    621.   width: 80,
    622.   height: 80,
    623.   theme: 'spark',
    624.   data: {
    625.     borderWidth: 1,
    626.     borderColor: '#ccc',
    627.     type: 'range',
    628.     title: {
    629.       text: 'range'
    630.     },
    631.     series: [{
    632.       values: [
    633.         [15, 30],
    634.         [20, 40],
    635.         [16, 35],
    636.         [21, 30],
    637.         [25, 45],
    638.         [18, 27],
    639.         [23, 35],
    640.         [29, 39],
    641.         [27, 30],
    642.         [19, 34]
    643.       ]
    644.     }]
    645.   }
    646. });
    647.  
    648. zingchart.render({
    649.   id: 'cvrange',
    650.   width: 80,
    651.   height: 80,
    652.   theme: 'spark',
    653.   data: {
    654.     borderWidth: 1,
    655.     borderColor: '#ccc',
    656.     type: 'vrange',
    657.     title: {
    658.       text: 'vrange'
    659.     },
    660.     series: [{
    661.       values: [
    662.         [15, 30],
    663.         [20, 40],
    664.         [16, 35],
    665.         [21, 30],
    666.         [25, 45],
    667.         [18, 27],
    668.         [23, 35],
    669.         [29, 39],
    670.         [27, 30],
    671.         [19, 34]
    672.       ]
    673.     }]
    674.   }
    675. });
    676.  
    677. zingchart.render({
    678.   id: 'cvenn',
    679.   width: 80,
    680.   height: 80,
    681.   theme: 'spark',
    682.   data: {
    683.     borderWidth: 1,
    684.     borderColor: '#ccc',
    685.     type: 'venn',
    686.     title: {
    687.       text: 'venn'
    688.     },
    689.     series: [{
    690.         values: [10],
    691.         join: [2]
    692.       },
    693.       {
    694.         values: [6],
    695.         join: [1]
    696.       },
    697.       {
    698.         values: [8],
    699.         join: [3]
    700.       }
    701.     ]
    702.   }
    703. });
    704.  
    705. zingchart.render({
    706.   id: 'cvfunnel',
    707.   width: 80,
    708.   height: 80,
    709.   theme: 'spark',
    710.   data: {
    711.     borderWidth: 1,
    712.     borderColor: '#ccc',
    713.     type: 'vfunnel',
    714.     title: {
    715.       text: 'vfunnel'
    716.     },
    717.     series: [{
    718.         values: v(1, 1)
    719.       },
    720.       {
    721.         values: v(1, 1)
    722.       },
    723.       {
    724.         values: v(1, 1)
    725.       },
    726.       {
    727.         values: v(1, 1)
    728.       },
    729.       {
    730.         values: v(1, 1)
    731.       }
    732.     ]
    733.   }
    734. });
    735.  
    736. zingchart.render({
    737.   id: 'chfunnel',
    738.   width: 80,
    739.   height: 80,
    740.   theme: 'spark',
    741.   data: {
    742.     borderWidth: 1,
    743.     borderColor: '#ccc',
    744.     type: 'hfunnel',
    745.     title: {
    746.       text: 'hfunnel'
    747.     },
    748.     series: [{
    749.         values: v(1, 1)
    750.       },
    751.       {
    752.         values: v(1, 1)
    753.       },
    754.       {
    755.         values: v(1, 1)
    756.       },
    757.       {
    758.         values: v(1, 1)
    759.       },
    760.       {
    761.         values: v(1, 1)
    762.       }
    763.     ]
    764.   }
    765. });
    766.  
    767. /* ================================================== */
    768.  
    769. zingchart.render({
    770.   id: 'cline3d',
    771.   width: 80,
    772.   height: 80,
    773.   theme: 'spark',
    774.   data: {
    775.     borderWidth: 1,
    776.     borderColor: '#ccc',
    777.     type: 'line3d',
    778.     title: {
    779.       text: 'line3d'
    780.     },
    781.     plot: {
    782.       stacked: true
    783.     },
    784.     series: [{
    785.         values: v(12, 1)
    786.       },
    787.       {
    788.         values: v(12, 1)
    789.       }
    790.     ]
    791.   }
    792. });
    793.  
    794. zingchart.render({
    795.   id: 'carea3d',
    796.   width: 80,
    797.   height: 80,
    798.   theme: 'spark',
    799.   data: {
    800.     borderWidth: 1,
    801.     borderColor: '#ccc',
    802.     type: 'area3d',
    803.     title: {
    804.       text: 'area3d'
    805.     },
    806.     plot: {
    807.       stacked: true
    808.     },
    809.     series: [{
    810.         values: v(12, 1)
    811.       },
    812.       {
    813.         values: v(12, 1)
    814.       }
    815.     ]
    816.   }
    817. });
    818.  
    819.  
    820. zingchart.render({
    821.   id: 'cvbar3d',
    822.   width: 80,
    823.   height: 80,
    824.   theme: 'spark',
    825.   data: {
    826.     borderWidth: 1,
    827.     borderColor: '#ccc',
    828.     type: 'vbar3d',
    829.     title: {
    830.       text: 'vbar3d'
    831.     },
    832.     plot: {
    833.       stacked: true
    834.     },
    835.     series: [{
    836.         values: v(4, 1)
    837.       },
    838.       {
    839.         values: v(4, 1)
    840.       }
    841.     ]
    842.   }
    843. });
    844.  
    845. zingchart.render({
    846.   id: 'chbar3d',
    847.   width: 80,
    848.   height: 80,
    849.   theme: 'spark',
    850.   data: {
    851.     borderWidth: 1,
    852.     borderColor: '#ccc',
    853.     type: 'hbar3d',
    854.     title: {
    855.       text: 'hbar3d'
    856.     },
    857.     plot: {
    858.       stacked: true
    859.     },
    860.     series: [{
    861.         values: v(4, 1)
    862.       },
    863.       {
    864.         values: v(4, 1)
    865.       }
    866.     ]
    867.   }
    868. });
    869.  
    870. zingchart.render({
    871.   id: 'cpiefull3d',
    872.   width: 80,
    873.   height: 80,
    874.   theme: 'spark',
    875.   data: {
    876.     borderWidth: 1,
    877.     borderColor: '#ccc',
    878.     type: 'pie3d',
    879.     title: {
    880.       text: 'pie3d-full'
    881.     },
    882.     plot: {},
    883.     series: [{
    884.         values: v(1, 1)
    885.       },
    886.       {
    887.         values: v(1, 1)
    888.       },
    889.       {
    890.         values: v(1, 1)
    891.       },
    892.       {
    893.         values: v(1, 1)
    894.       }
    895.     ]
    896.   }
    897. });
    898.  
    899. zingchart.render({
    900.   id: 'cpiering3d',
    901.   width: 80,
    902.   height: 80,
    903.   theme: 'spark',
    904.   data: {
    905.     borderWidth: 1,
    906.     borderColor: '#ccc',
    907.     type: 'pie3d',
    908.     title: {
    909.       text: 'pie3d-ring'
    910.     },
    911.     plot: {
    912.       slice: '40%'
    913.     },
    914.     series: [{
    915.         values: v(1, 1)
    916.       },
    917.       {
    918.         values: v(1, 1)
    919.       },
    920.       {
    921.         values: v(1, 1)
    922.       },
    923.       {
    924.         values: v(1, 1)
    925.       }
    926.     ]
    927.   }
    928. });