• 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,
            #myChart {
                height: 100%;
                width: 100%;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "type": "vbar3d",
                "fill-type": "radial",
                "3d-aspect": {
                    "depth": 120
                },
                "scale-x": {
                    "item": {
                        "color": "#313133"
                    },
                    "values": ["9", "8", "7", "Below 7"],
                    "background-color": "none",
                    "guide": {
                        "visible": 0
                    }
                },
                "scale-y": {
                    "item": {
                        "color": "#313133"
                    },
                    "values": "0:200:50",
                    "background-color": "none",
                    "guide": {
                        "visible": 0
                    }
                },
                "plot": {
                    "aspect": "cylinder",
                    "bars-overlap": "100%",
                    "mode": "normal"
                },
                "series": [{
                        "values": [200, 200, 200, 200],
                        "alpha": 0.25,
                        "background-color": "#ddd",
                        "max-trackers": 0
                    },
                    {
                        "values": [150, 110, 94, 45],
                        "background-image": "PATTERN_CUSTOM",
                        "alpha": 0.6,
                        "styles": [{
                                "background-color": "#65A43E"
                            },
                            {
                                "background-color": "#E6DC2F"
                            },
                            {
                                "background-color": "#E49D36"
                            },
                            {
                                "background-color": "#EC1C24"
                            }
                        ]
                    },
                    {
                        "values": [1, 1, 1, 1],
                        "offset-values": [100, 60, 80, 120],
                        "alpha": 0.5,
                        "border-width": 5,
                        "max-trackers": 0,
                        "facets": {
                            "top": {
                                "background-color": "none",
                                "alpha": 1
                            },
                            "bottom": {
                                "alpha": 0
                            },
                            "front": {
                                "alpha": 1
                            }
                        },
                        "styles": [{
                                "background-color": "#65A43E",
                                "border-color": "#65A43E"
                            },
                            {
                                "background-color": "#E6DC2F",
                                "border-color": "#E6DC2F"
                            },
                            {
                                "background-color": "#E49D36",
                                "border-color": "#E49D36"
                            },
                            {
                                "background-color": "#EC1C24",
                                "border-color": "#EC1C24"
                            }
                        ]
                    }
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: '100%',
                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>
    html,body,#myChart{
     height: 100%;
     width: 100%;
    }
    var myConfig = {
        "type":"vbar3d",
        "fill-type":"radial",
        "3d-aspect":{
            "depth":120
            },
        "scale-x":{
             "item":{
                    "color":"#313133"
                },
            "values":["9","8","7","Below 7"],
            "background-color":"none",
            "guide":{
                "visible":0
            }
        },
        "scale-y":{
             "item":{
                    "color":"#313133"
                },
            "values":"0:200:50",
            "background-color":"none",
            "guide":{
                "visible":0
            }
        },
        "plot":{
            "aspect":"cylinder",
            "bars-overlap":"100%",
            "mode":"normal"
        },
        "series":[
            {
                "values":[200,200,200,200],
                "alpha":0.25,
                "background-color":"#ddd",
                "max-trackers":0
            },
            {
                "values":[150,110,94,45],
                "background-image":"PATTERN_CUSTOM",
                "alpha":0.6,
                "styles":[
                    {
                        "background-color":"#65A43E"
                    },
                    {
                        "background-color":"#E6DC2F"
                    },
                    {
                        "background-color":"#E49D36"
                    },
                    {
                        "background-color":"#EC1C24"
                    }
                ]
            },
            {
                "values":[1,1,1,1],
                "offset-values":[100,60,80,120],
                "alpha":0.5,
                "border-width":5,
                "max-trackers":0,
                "facets":{
                    "top":{
                        "background-color":"none",
                        "alpha":1
                    },
                    "bottom":{
                        "alpha":0
                    },
                    "front":{
                        "alpha":1
                    }
                },
                "styles":[
                    {
                        "background-color":"#65A43E",
                        "border-color":"#65A43E"
                    },
                    {
                        "background-color":"#E6DC2F",
                        "border-color":"#E6DC2F"
                    },
                    {
                        "background-color":"#E49D36",
                        "border-color":"#E49D36"
                    },
                    {
                        "background-color":"#EC1C24",
                        "border-color":"#EC1C24"
                    }
                ]
            }
        ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: '100%', 
    	width: '100%'
    });