• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft 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>
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 20px;
            }
    
            .chart {
                width: 150px;
                min-height: 150px;
                display: inline-block;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 877px;
            }
        </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>ZingSoft 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></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)
    			}
    		]
    	}
    });