• 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></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%" 
    });