• 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 cdata = {
                "type": "vbar",
                "backgroundColor": "#909090 #c9c9c9",
                "title": {
                    "text": "Olympic Medals by Country",
                    "fontSize": 19,
                    "padding": 15,
                    "color": "#000000"
                },
                "plotarea": {
                    "margin": "80 40 110 40"
                },
                "scaleX": {
                    "values": ["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
                    "maxItems": 9999,
                    "itemsOverlap": true,
                    "lineWidth": 0,
                    "tick": {
                        "visible": false
                    },
                    "item": {
                        "color": "#333333",
                        "offsetY": 65,
                        "width": "80%",
                        "fontSize": 11,
                        "fontWeight": 900,
                        "backgroundColor": "rgba(0,0,0,0)",
                        "textAlpha": 1,
                        "topState": {
                            "x": "+0",
                            "y": "+0",
                            "height": 20,
                            "alpha": 1,
                            "backgroundColor": "none",
                            "offsetY": 35,
                            "callout": true,
                            "calloutWidth": 0,
                            "calloutHeight": 10,
                            "borderLeft": "1px solid #666666",
                            "borderRight": "1px solid #666666",
                            "borderBottom": "1px solid #666666"
                        },
                        "jsRule": "rule_scaleX_item()"
                    }
                },
                "scaleY": {
                    "maxItems": 9999,
                    "itemsOverlap": true,
                    "lineWidth": 0,
                    "backgroundColor": "none",
                    "minorTicks": 4,
                    "minorTick": {
                        "visible": true,
                        "lineWidth": 1,
                        "lineColor": "#333333"
                    },
                    "tick": {
                        "lineColor": "#333333"
                    },
                    "guide": {
                        "lineWidth": 0,
                        "items": [{
                                "backgroundColor": "#acb0b3"
                            },
                            {
                                "backgroundColor": "#b1b5b8"
                            }
                        ]
                    },
                    "item": {
                        "color": "#333333",
                        "fontSize": 9,
                        "fontWeight": 300
                    }
                },
                "plot": {
                    "barsOverlap": "100%",
                    "barsSpaceLeft": 0.1,
                    "barsSpaceRight": 0.1,
                    "borderWidth": 1,
                    "borderColor": "#ffffff",
                    "borderAlpha": 0.8
                },
                "tooltip": {
                    "shadow": true,
                    "shadowColor": "#424242",
                    "backgroundColor": "#212121 #424242",
                    "callout": true,
                    "calloutPosition": "bottom",
                    "offsetY": -20,
                    "placement": "node:top",
                    "padding": 10,
                    "fontSize": 15,
                    "color": "#ffffff",
                    "borderWidth": 1,
                    "borderColor": "#000000",
                    "text": "%scale-key-text won %node-value %plot-text medals"
                },
                "series": [{
                        "values": [100, 110, 72, 47, 41, 46, 31, 25, 28],
                        "alpha": 0.25,
                        "max-trackers": 0,
                        "jsRule": "rule_series_0()",
                        "valueBox": {
                            "fontSize": 11,
                            "fontWeight": 600,
                            "offsetY": -10,
                            "jsRule": "rule_series_0_valueBox()",
                        }
                    },
                    {
                        "values": [51, 36, 23, 19, 16, 14, 13, 9, 8],
                        "text": "Gold",
                        "column": "1/3",
                        "jsRule": "rule_series_123()",
                        "zStart": 15,
                        "zEnd": 35,
                        "valueBox": [{
                                "fontSize": 10,
                                "fontWeight": 600,
                                "offsetY": -10,
                                "jsRule": "rule_series_123_valueBox_0()"
                            },
                            {
                                "fontSize": 11,
                                "fontWeight": 400,
                                "text": "%plot-text",
                                "angle": 270,
                                "placement": "bottom",
                                "width": 50,
                                "textAlign": "right",
                                "offsetY": 25
                            }
                        ]
                    },
                    {
                        "values": [28, 36, 28, 15, 15, 17, 8, 6, 10],
                        "text": "Silver",
                        "column": "2/3",
                        "jsRule": "rule_series_123()",
                        "zStart": 15,
                        "zEnd": 35,
                        "valueBox": [{
                                "fontSize": 10,
                                "fontWeight": 600,
                                "offsetY": -10,
                                "jsRule": "rule_series_123_valueBox_0()"
                            },
                            {
                                "fontSize": 11,
                                "fontWeight": 400,
                                "text": "%plot-text",
                                "angle": 270,
                                "placement": "bottom",
                                "width": 50,
                                "textAlign": "right",
                                "offsetY": 25
                            }
                        ]
                    },
                    {
                        "values": [21, 38, 21, 13, 10, 15, 10, 10, 10],
                        "text": "Bronze",
                        "column": "3/3",
                        "jsRule": "rule_series_123()",
                        "zStart": 15,
                        "zEnd": 35,
                        "valueBox": [{
                                "fontSize": 10,
                                "fontWeight": 600,
                                "offsetY": -10,
                                "jsRule": "rule_series_123_valueBox_0()"
                            },
                            {
                                "fontSize": 11,
                                "fontWeight": 400,
                                "text": "%plot-text",
                                "angle": 270,
                                "placement": "bottom",
                                "width": 50,
                                "textAlign": "right",
                                "offsetY": 25
                            }
                        ]
                    }
                ]
            };
    
            var colorSet0 = ['#D03435', '#913891', '#5238BD'];
            var colorSet123 = [
                ['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
                ['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
                ['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
            ];
    
            window.rule_series_0 = function(p) {
                return {
                    backgroundColor: colorSet0[Math.floor(p.nodeindex / 3)]
                };
            };
    
            window.rule_series_0_valueBox = function(p) {
                return {
                    color: colorSet0[Math.floor(p.nodeindex / 3)]
                };
            };
    
            window.rule_scaleX_item = function(p) {
                return {
                    color: colorSet0[Math.floor(p.index / 3)]
                };
            };
    
            window.rule_series_123 = function(p) {
                return {
                    backgroundColor: colorSet123[Math.floor(p.nodeindex / 3)][Math.floor(p.plotindex / 3)]
                };
            };
    
            window.rule_series_123_valueBox_0 = function(p) {
                return {
                    color: colorSet0[Math.floor(p.nodeindex / 3)]
                };
            }
    
            zingchart.render({
                id: 'zc',
                width: 900,
                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 cdata = {
        "type":"vbar",
        "backgroundColor":"#909090 #c9c9c9",
        "title":{
            "text":"Olympic Medals by Country",
            "fontSize":19,
            "padding":15,
            "color":"#000000"
        },
        "plotarea":{
            "margin":"80 40 110 40"
        },
        "scaleX":{
            "values":["China", "USA", "Russia", "Great Britain", "Germany", "Australia", "South Korea", "Japan", "Italy"],
            "maxItems":9999,
            "itemsOverlap":true,
            "lineWidth":0,
            "tick":{
                "visible":false
            },
            "item":{
                "color":"#333333",
                "offsetY":65,
                "width":"80%",
                "fontSize":11,
                "fontWeight":900,
                "backgroundColor":"rgba(0,0,0,0)",
                "textAlpha":1,
                "topState":{
                    "x":"+0",
                    "y":"+0",
                    "height":20,  
                    "alpha":1,
                    "backgroundColor":"none",
                    "offsetY":35,
                    "callout":true,
                    "calloutWidth":0,
                    "calloutHeight":10,
                    "borderLeft":"1px solid #666666",
                    "borderRight":"1px solid #666666",
                    "borderBottom":"1px solid #666666"                
                },
                "jsRule":"rule_scaleX_item()"
            }
    	},
    	"scaleY":{
            "maxItems":9999,
            "itemsOverlap":true,
            "lineWidth":0,
            "backgroundColor":"none",
            "minorTicks":4,
            "minorTick":{
                "visible":true,
                "lineWidth":1,
                "lineColor":"#333333"
            },
            "tick":{
                "lineColor":"#333333"
            },
            "guide":{
                "lineWidth":0,
                "items":[
                    {
                        "backgroundColor":"#acb0b3"
                    },
                    {
                        "backgroundColor":"#b1b5b8"
                    }
                ]
            },
            "item":{
                "color":"#333333",
                "fontSize":9,
                "fontWeight":300
            }
    	},
    	"plot":{
            "barsOverlap":"100%",
            "barsSpaceLeft":0.1,
            "barsSpaceRight":0.1,
            "borderWidth":1,
            "borderColor":"#ffffff",
            "borderAlpha":0.8
    	},
        "tooltip":{
            "shadow":true,
            "shadowColor":"#424242",
            "backgroundColor":"#212121 #424242",
            "callout":true,
            "calloutPosition":"bottom",
            "offsetY":-20,
            "placement":"node:top",
            "padding":10,
            "fontSize":15,
            "color":"#ffffff",
            "borderWidth":1,
            "borderColor":"#000000",
            "text":"%scale-key-text won %node-value %plot-text medals"
        },    
    	"series":[
    		{
                "values":[100, 110, 72, 47, 41, 46, 31, 25, 28],
                "alpha":0.25,
                "max-trackers":0,
                "jsRule":"rule_series_0()",
                "valueBox":{
                    "fontSize":11,
                    "fontWeight":600,
                    "offsetY":-10,
                    "jsRule":"rule_series_0_valueBox()",
                }
    		},
        	{
                "values":[51, 36, 23, 19, 16, 14, 13, 9, 8],
    			"text":"Gold",
                "column":"1/3",
                "jsRule":"rule_series_123()",
                "zStart":15,
                "zEnd":35,
                "valueBox":[
                    {
                        "fontSize":10,
                        "fontWeight":600,
                        "offsetY":-10,
                        "jsRule":"rule_series_123_valueBox_0()"
                    },
                    {
                        "fontSize":11,
                        "fontWeight":400,
                        "text":"%plot-text",
                        "angle":270,
                        "placement":"bottom",
                        "width":50,
                        "textAlign":"right",
                        "offsetY":25
                    }
                ]
    		},
            {
                "values":[28, 36, 28, 15, 15, 17, 8, 6, 10],
    			"text":"Silver",
                "column":"2/3",
                "jsRule":"rule_series_123()",
                "zStart":15,
                "zEnd":35,
                "valueBox":[
                    {
                        "fontSize":10,
                        "fontWeight":600,
                        "offsetY":-10,
                        "jsRule":"rule_series_123_valueBox_0()"
                    },
                    {
                        "fontSize":11,
                        "fontWeight":400,
                        "text":"%plot-text",
                        "angle":270,
                        "placement":"bottom",
                        "width":50,
                        "textAlign":"right",
                        "offsetY":25
                    }
                ]
    		},
            {
                "values":[21, 38, 21, 13, 10, 15, 10, 10, 10],
    			"text":"Bronze",
                "column":"3/3",
                "jsRule":"rule_series_123()",
                "zStart":15,
                "zEnd":35,
                "valueBox":[
                    {
                        "fontSize":10,
                        "fontWeight":600,
                        "offsetY":-10,
                        "jsRule":"rule_series_123_valueBox_0()"
                    },
                    {
                        "fontSize":11,
                        "fontWeight":400,
                        "text":"%plot-text",
                        "angle":270,
                        "placement":"bottom",
                        "width":50,
                        "textAlign":"right",
                        "offsetY":25
                    }
                ]
    		}
    	]
    };
    
    var colorSet0 = ['#D03435', '#913891', '#5238BD'];
    var colorSet123 = [
        ['#D33535 #E53B3C', '#E65D35 #EB753E', '#FE8035 #F88746'],
        ['#843584 #A540A6', '#A46590 #B579AA', '#B3818D #B584A3'],
        ['#6038B2 #7643BD', '#6D68B5 #7B7FBF', '#7681B2 #7C86BD']
    ];
    
    window.rule_series_0 = function(p) {
        return {
            backgroundColor:colorSet0[Math.floor(p.nodeindex/3)]
        };    
    };
    
    window.rule_series_0_valueBox = function(p) {
        return {
            color:colorSet0[Math.floor(p.nodeindex/3)]
        };    
    };
    
    window.rule_scaleX_item = function(p) {
        return {
            color:colorSet0[Math.floor(p.index/3)]
        };    
    };
    
    window.rule_series_123 = function(p) {
        return {
            backgroundColor:colorSet123[Math.floor(p.nodeindex/3)][Math.floor(p.plotindex/3)]
        };    
    };
    
    window.rule_series_123_valueBox_0 = function(p) {
        return {
            color:colorSet0[Math.floor(p.nodeindex/3)]
        };        
    }
    
    zingchart.render({
      id : 'zc',
    	width : 900,
    	height : 500,
    	output : 'svg',
    	data : cdata
    });