• 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: 500px;
            }
        </style>
    </head>
    
    <body>
        <div id="zc"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var _r_ = function(min, max) {
                return Math.round(min + (max - min) * Math.random());
            }
    
            var aBarColors = [
                ['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
                ['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
                ['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
            ];
    
            var aData = [],
                p, y, m, ymin = 2015,
                ymax = 2018,
                aData2 = [],
                aData3 = [];
            for (p = 0; p < 3; p++) {
                aData[p] = [];
                for (y = ymin; y <= ymax; y++) {
                    aData[p][y] = [];
                    for (m = 0; m < 12; m++) {
                        aData[p][y].push(_r_(1000000, 2000000));
                    }
                }
                aData2[p] = [];
                for (m = 0; m < 12; m++) {
                    aData2[p].push(_r_(1000000, 1200000));
                }
                aData3.push(_r_(10000000, 12000000));
            }
    
            var cdata = {
                backgroundColor: '#f3f3f3',
                type: 'mixed',
                clustered: true,
                plotarea: {
                    margin: 'dynamic'
                },
                scaleX: {
                    ranged: true,
                    values: ['Apple', 'Dell', 'Microsoft']
                },
                scaleY: {
                    short: true,
                    scaleFactor: 3
                },
                plot: {
                    animation: {
                        speed: 300,
                        effect: 1,
                        sequence: 2
                    },
                    dataMon: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
                    dataMonth: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                    hoverState: {
                        visible: false
                    }
                },
                tooltip: {
                    fontSize: 13,
                    padding: 10,
                    short: true,
                    text: '%data-indicator: $%node-value'
                },
                series: [{
                    type: 'line',
                    dataIndicator: 'Capital estimated for 2019',
                    tooltip: {
                        decimals: 2
                    },
                    valueBox: {
                        text: '$%node-value',
                        short: true,
                        decimals: 2
                    },
                    lineWidth: 5,
                    lineColor: '#369',
                    marker: {
                        type: 'diamond',
                        size: 6,
                        backgroundColor: '#69c'
                    },
                    values: aData3
                }]
            };
    
            for (p = 0; p < 3; p++) {
                for (y = ymin; y <= ymax; y++) {
                    var sdata = {
                        type: 'vbar',
                        stacked: true,
                        stack: p,
                        clustered: true,
                        clusterIndex: p,
                        barsSpaceLeft: 0.1,
                        barsSpaceRight: 0.1,
                        borderTop: '1px solid #ccc',
                        dataIndicator: 'Sells in %data-month ' + y,
                        values: aData[p][y],
                        backgroundColor: aBarColors[p][y - ymin]
                    };
                    if (y === ymin) {
                        sdata.valueBox = {
                            placement: 'bottom-in',
                            text: '%data-mon',
                            color: '#fff',
                            shadow: false,
                            fontSize: 10
                        };
                    } else if (y === ymax) {
                        sdata.valueBox = {
                            placement: 'top-out',
                            text: '%stack-total',
                            short: true,
                            decimals: 2,
                            color: '#000',
                            angle: 270,
                            offsetY: -10
                        };
                    }
                    cdata['series'].push(sdata);
                }
            }
    
            for (p = 0; p < 3; p++) {
                cdata['series'].push({
                    type: 'line',
                    clustered: true,
                    clusterIndex: p,
                    clusterOffset: 30,
                    lineColor: '#000',
                    marker: {
                        backgroundColor: '#666'
                    },
                    dataIndicator: 'Total Losses/Returns',
                    values: aData2[p]
                });
            }
    
            window.addEventListener('load', function() {
    
                zingchart.render({
                    id: 'zc',
                    width: 1000,
                    height: 500,
                    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 _r_ = function(min, max) {
    	return Math.round(min + (max-min)*Math.random());	
    }
    
    var aBarColors = [ 
    	['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
    	['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
    	['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
    ];
    
    var aData = [], p, y, m, ymin = 2015, ymax = 2018, aData2 = [], aData3 = [];
    for (p=0;p<3;p++) {
    	aData[p] = [];
    	for (y=ymin;y<=ymax;y++) {
    		aData[p][y] = [];
    		for (m=0;m<12;m++) {
    			aData[p][y].push(_r_(1000000, 2000000));
    		}
    	}
    	aData2[p] = [];
    	for (m=0;m<12;m++) {
    		aData2[p].push(_r_(1000000, 1200000));
    	}
    	aData3.push(_r_(10000000, 12000000));
    }
    
    var cdata = {
    	backgroundColor : '#f3f3f3',
    	type : 'mixed',
    	clustered : true,
    	plotarea : {
    		margin : 'dynamic'
    	},
    	scaleX : {
    		ranged : true,
    		values : ['Apple', 'Dell', 'Microsoft']
    	},
    	scaleY : {
    		short : true,
    		scaleFactor : 3
    	},
    	plot : {
    	  animation : {
    	    speed: 300,
    	    effect : 1,
    	    sequence : 2
    	  },
    		dataMon : ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
    		dataMonth : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    		hoverState : {
    			visible : false 
    		}
    	},
    	tooltip : {
    		fontSize : 13,
    		padding : 10,
    		short : true,
    		text : '%data-indicator: $%node-value'
    	},
    	series : [
    		{
    			type : 'line',
    			dataIndicator : 'Capital estimated for 2019',
    			tooltip : {
    				decimals : 2
    			},
    			valueBox : {
    				text : '$%node-value',
    				short : true,
    				decimals : 2
    			},
    			lineWidth : 5,
    			lineColor : '#369',
    			marker : {
    				type : 'diamond',
    				size : 6,
    				backgroundColor : '#69c'
    			},
    			values : aData3
    		}
    	]
    };
    
    for (p=0;p<3;p++) {
    	for (y=ymin;y<=ymax;y++) {
    		var sdata = {
    			type : 'vbar',
    			stacked : true,
    			stack : p,
    			clustered : true,
    			clusterIndex : p,
    			barsSpaceLeft : 0.1,
    			barsSpaceRight : 0.1,
    			borderTop : '1px solid #ccc',
    			dataIndicator : 'Sells in %data-month ' + y,
    			values : aData[p][y],
    			backgroundColor : aBarColors[p][y-ymin]
    		};
    		if (y === ymin) {
    			sdata.valueBox = {
    				placement : 'bottom-in',
    				text : '%data-mon',
    				color : '#fff',
    				shadow : false,
    				fontSize : 10
    			};
    		} else if (y === ymax) {
    			sdata.valueBox = {
    				placement : 'top-out',
    				text : '%stack-total',
    				short : true,
    				decimals : 2,
    				color : '#000',
    				angle : 270,
    				offsetY : -10
    			};
    		}
    		cdata['series'].push(sdata);
    	}
    }
    
    for (p=0;p<3;p++) {
    	cdata['series'].push({
    		type : 'line',
    		clustered : true,
    		clusterIndex : p,
    		clusterOffset : 30,
    		lineColor : '#000',
    		marker : {
    			backgroundColor : '#666'
    		},
    		dataIndicator : 'Total Losses/Returns',
    		values : aData2[p]
    	});
    }
    
    window.addEventListener('load', function() {
    
      zingchart.render({
        id : 'zc',
        width : 1000,
        height : 500,
        output : 'svg',
        data : cdata
      });
    
    });