• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #myChart {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id="zc"></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var ymin = 1997,
                ymax = 2010;
    
            var _r_ = function(min, max) {
                return Math.round(min + (max - min) * Math.random());
            }
    
            // create fake data, will plot Q3 data (12 weeks) for each year
            var data = {},
                y, w;
            var avgs = [];
            var v = _r_(2000000, 4000000);
            for (y = ymin; y <= ymax; y++) {
                data[y] = [];
                var sum = 0;
                for (w = 0; w < 12; w++) {
                    v = v + _r_(-40000, 40000);
                    data[y].push(v);
                    sum += v;
                }
                avgs.push(Math.round(sum / 12));
                // make a bigger jump
                if (Math.random() > 0.5) {
                    v += _r_(100000, 200000);
                } else {
                    v -= _r_(100000, 200000);
                }
            }
    
            var cdata = {
                type: 'mixed',
                clustered: true,
                backgroundColor: '#000',
                title: {
                    color: '#fff',
                    adjustLayout: true,
                    text: 'Q3 comparison from ' + ymin + ' until ' + ymax
                },
                plotarea: {
                    margin: 'dynamic 15 dynamic 15',
                    marginBottomOffset: 5
                },
                scaleX: {
                    label: {
                        visible: false
                    },
                    lineColor: '#2e2e2e',
                    guide: {
                        visible: true,
                        lineStyle: 'solid',
                        lineColor: '#2e2e2e'
                    },
                    item: {
                        fontFamily: 'Impact',
                        fontSize: 12,
                        fontWeight: 'normal',
                        color: '#666'
                    },
                    tick: {
                        visible: false
                    },
                    format: '<span style="color:#ccc">Q3</span> %scale-value',
                    values: [ymin, ymax, 1].join(':')
                },
                scaleY: {
                    minValue: 0,
                    guide: {
                        lineStyle: 'solid',
                        lineColor: '#2e2e2e'
                    },
                    lineColor: '#2e2e2e',
                    tick: {
                        visible: false
                    },
                    item: {
                        visible: false
                    },
                    label: {
                        visible: false
                    }
                },
                crosshairX: {
                    scaleLabel: {
                        visible: false
                    },
                    plotLabel: {
                        thousandsSeparator: ',',
                        padding: '5 10',
                        borderRadius: 7,
                        backgroundColor: '#cc3300',
                        fontSize: 12,
                        color: '#fff',
                        borderWidth: 0,
                        callout: true,
                        calloutHeight: 18,
                        calloutWidth: 10,
                        multiple: true,
                        text: '<span style="color:#FC7272;font-size:15px;font-weight:bold;">Q3 %scale-key-value</span><br><br>$%node-value'
                    },
                    lineWidth: '100%',
                    alpha: 0.1
                },
                plot: {
                    maxNodes: 0,
                    maxTrackers: 0,
                    activeArea: true
                },
                series: []
            };
    
            for (y = ymin; y <= ymax; y++) {
                var sdata = {
                    shadow: true,
                    shadowColor: '#133a46',
                    shadowAngle: 90,
                    shadowDistance: 3,
                    lineWidth: 3,
                    alphaArea: 0.5,
                    lineColor: '#00b0e2',
                    backgroundColor: '#133a46 #000000',
                    type: 'area',
                    clustered: true,
                    values: data[y]
                };
                cdata['series'].push(sdata);
            }
    
            cdata['series'].push({
                type: 'line',
                lineWidth: 0,
                values: avgs
            });
    
    
            $(document).ready(function() {
    
                zingchart.render({
                    id: 'zc',
                    width: 800,
                    height: 400,
                    output: 'svg',
                    data: cdata
                });
    
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id="zc"></div>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    var ymin = 1997, ymax = 2010;
    
    var _r_ = function(min, max) {
    	return Math.round(min + (max-min)*Math.random());	
    }
    
    // create fake data, will plot Q3 data (12 weeks) for each year
    var data = {}, y, w;
    var avgs = [];
    var v = _r_(2000000, 4000000);
    for (y=ymin;y<=ymax;y++) {
    	data[y] = [];
    	var sum = 0;
    	for (w=0;w<12;w++) {
    		v = v + _r_(-40000, 40000);
    		data[y].push(v);
    		sum += v;
    	}
    	avgs.push(Math.round(sum/12)); 
    	// make a bigger jump
    	if (Math.random() > 0.5) {
    		v += _r_(100000, 200000);
    	} else {
    		v -= _r_(100000, 200000);
    	}
    }
    
    var cdata = {
    	type : 'mixed',
    	clustered : true,
    	backgroundColor : '#000',
    	title : {
    		color : '#fff',
    		adjustLayout : true,
    		text : 'Q3 comparison from ' + ymin + ' until ' + ymax
    	},
    	plotarea : {
    		margin : 'dynamic 15 dynamic 15',
    		marginBottomOffset : 5
    	},
    	scaleX : {
    		label : {
    			visible : false
    		},
    		lineColor : '#2e2e2e',
    		guide : {
    			visible : true,
    			lineStyle : 'solid',
    			lineColor : '#2e2e2e'
    		},
    		item : {
    			fontFamily : 'Impact',
    			fontSize : 12,
    			fontWeight : 'normal',
    			color : '#666'
    		},
    		tick : {
    			visible : false
    		},
    		format : '<span style="color:#ccc">Q3</span> %scale-value',
    		values : [ymin, ymax, 1].join(':')
    	},
    	scaleY : {
    		minValue : 0,
    		guide : {
    			lineStyle : 'solid',
    			lineColor : '#2e2e2e'
    		},
    		lineColor : '#2e2e2e',
    		tick : {
    			visible : false
    		},
    		item : {
    			visible : false
    		},
    		label : {
    			visible : false
    		}
    	},
    	crosshairX : {
    		scaleLabel : {
    			visible : false
    		},
    		plotLabel : {
    			thousandsSeparator : ',',
    			padding : '5 10',
    			borderRadius : 7,
    			backgroundColor : '#cc3300',
    			fontSize : 12,
    			color : '#fff',
    			borderWidth : 0,
    			callout : true,
    			calloutHeight : 18,
    			calloutWidth : 10,
    			multiple : true,
    			text : '<span style="color:#FC7272;font-size:15px;font-weight:bold;">Q3 %scale-key-value</span><br><br>$%node-value'
    		},
    		lineWidth : '100%',
    		alpha : 0.1
    	},
    	plot : {
    		maxNodes : 0,
    		maxTrackers : 0,
    		activeArea : true
    	},
    	series : [
    	]
    };
    
    for (y=ymin;y<=ymax;y++) {
    	var sdata = {
    		shadow : true,
    		shadowColor : '#133a46',
    		shadowAngle : 90,
    		shadowDistance : 3,
    		lineWidth : 3,
    		alphaArea : 0.5,
    		lineColor : '#00b0e2',
    		backgroundColor : '#133a46 #000000',
    		type : 'area',
    		clustered : true,
    		values : data[y]
    	};
    	cdata['series'].push(sdata);
    }
    
    cdata['series'].push({
    	type : 'line',
    	lineWidth : 0,
    	values : avgs
    });
    
    
    $(document).ready(function() {
    
    zingchart.render({
    	id : 'zc',
    	width : 800,
    	height : 400,
    	output : 'svg',
    	data : cdata
    });
    
    });