• 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>
            zing-grid[loading] {
                height: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "graphset": [{
                    "type": "bar",
                    "backgroundColor": "#333 #000",
                    "plot": {
                        "alpha": 0,
                        "mode": "normal",
                        "hover-state": {
                            "visible": false
                        }
                    },
                    "scale-x": {
                        "values": ["1st Quarter", "2nd Quarter", "3rd Quarter", "4th Quarter"],
                        "line-width": 1,
                        "line-color": "#fff",
                        "item": {
                            "color": "#fff"
                        },
                        "guide": {
                            "visible": false
                        },
                        "tick": {
                            "line-width": 1,
                            "line-color": "#000"
                        }
                    },
                    "scale-y": {
                        "line-width": 0,
                        "item": {
                            "color": "#fff"
                        },
                        "tick": {
                            "visible": false
                        },
                        "guide": {
                            "line-width": 0,
                            "items": [{
                                    "backgroundColor": "#ccc #ddd",
                                    "alpha": 0.1
                                },
                                {
                                    "backgroundColor": "#888 #999",
                                    "alpha": 0.1
                                }
                            ]
                        }
                    },
                    "series": [{
                            "values": [10, 6, 27, 16],
                            "backgroundColor": "#8AFE00 #50A701"
                        },
                        {
                            "values": [15, 22, 12, 8],
                            "backgroundColor": "#FF72CF #DC3CA9"
                        },
                        {
                            "values": [7, 11, 4, 23],
                            "backgroundColor": "#FF9C00 #FF6300"
                        },
                        {
                            "values": [16, 31, 8, 26],
                            "backgroundColor": "#B230FD #8204BE"
                        }
                    ]
                }]
            };
    
            zingchart.complete = function(params) {
    
                var shapes = [];
    
                var charttype = zingchart.exec(params.id, 'getcharttype');
    
                if (charttype != 'vbar') {
                    return;
                }
    
                var render = zingchart.exec(params.id, 'getrender');
    
                var plots = zingchart.exec(params.id, 'getplotlength');
                for (var p = 0; p < plots; p++) {
                    var nodes = zingchart.exec(params.id, 'getnodelength', {
                        plotindex: p
                    });
    
                    var plotinfo = zingchart.exec(params.id, 'getobjectinfo', {
                        object: 'plot',
                        plotindex: p
                    });
    
                    for (var n = 0; n < nodes; n++) {
    
                        var info = zingchart.exec(params.id, 'getobjectinfo', {
                            object: 'node',
                            plotindex: p,
                            nodeindex: n
                        });
    
                        var ledheight = 5,
                            leds = info.height / (ledheight + 3);
                        for (var i = 0; i < leds; i++) {
                            shapes.push({
                                x: info.x + 10,
                                y: info.y + info.height - (i + 1) * (ledheight + 3),
                                type: "rect",
                                flat: true,
                                width: info.width,
                                height: ledheight,
                                borderRadius: 3,
                                backgroundColor: plotinfo.backgroundColor1 + ' ' + plotinfo.backgroundColor2,
                                fillAngle: 90,
                                alpha: 1
                            });
                        }
    
                    }
                }
    
                zingchart.exec(params.id, 'addobject', {
                    type: 'shape',
                    data: shapes
                });
    
            }
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 400,
                width: "100%"
            });
        </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='myChart'></div>
    	</body>
    </html>
    
          
    var myConfig = {
    "graphset":[
        {
            "type":"bar",
            "backgroundColor":"#333 #000",
            "plot":{
                "alpha":0,
                "mode":"normal",
                "hover-state":{
                    "visible":false
                }
            },
            "scale-x":{
                "values":["1st Quarter","2nd Quarter","3rd Quarter","4th Quarter"],
                "line-width":1,
                "line-color":"#fff",
                "item":{
                    "color":"#fff"
                },
                "guide":{
                    "visible":false
                },
                "tick":{
                    "line-width":1,
                    "line-color":"#000"
                }
            },
            "scale-y":{
                "line-width":0,
                "item":{
                    "color":"#fff"
                },
                "tick":{
                    "visible":false
                },
                "guide":{
                    "line-width":0,
                    "items":[
                        {
                            "backgroundColor":"#ccc #ddd",
                            "alpha":0.1
                        },
                        {
                            "backgroundColor":"#888 #999",
                            "alpha":0.1
                        }
                    ]
                }
            },
            "series":[
                {
                    "values":[10,6,27,16],
                    "backgroundColor":"#8AFE00 #50A701"
                },
                {
                    "values":[15,22,12,8],
                    "backgroundColor":"#FF72CF #DC3CA9"
                },
                {
                    "values":[7,11,4,23],
                    "backgroundColor":"#FF9C00 #FF6300"
                },
                {
                    "values":[16,31,8,26],
                    "backgroundColor":"#B230FD #8204BE"
                }
            ]
        }
    ]
    };
    
    zingchart.complete = function(params) {
    
        var shapes = [];
    
        var charttype = zingchart.exec(params.id, 'getcharttype');
    
        if (charttype != 'vbar') {
            return;
        }
    
    	var render = zingchart.exec(params.id, 'getrender');
    
    	var plots = zingchart.exec(params.id, 'getplotlength');
    	for (var p=0;p<plots;p++) {
    		var nodes = zingchart.exec(params.id, 'getnodelength', {plotindex : p});
    
    		var plotinfo = zingchart.exec(params.id, 'getobjectinfo', {
    			object : 'plot',
    			plotindex : p
    		});
    
    		for (var n=0;n<nodes;n++) {
    
    			var info = zingchart.exec(params.id, 'getobjectinfo', {
    				object : 'node',
    				plotindex : p,
    				nodeindex : n
    			});
    
    			var ledheight = 5, leds = info.height/(ledheight+3);
    			for (var i=0;i<leds;i++) {
    				shapes.push({
    					x : info.x + 10,
    					y : info.y + info.height - (i+1)*(ledheight+3),
    					type : "rect",
    					flat : true,
    					width : info.width,
    					height : ledheight,
    					borderRadius : 3,
    					backgroundColor : plotinfo.backgroundColor1 + ' ' + plotinfo.backgroundColor2,
    					fillAngle : 90,
    					alpha : 1
    				});
    			}
    
    		}
    	}
    
    	zingchart.exec(params.id, 'addobject', {
    		type : 'shape',
    		data : shapes
    	});
    
    }
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: "100%" 
    });