• 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: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id="zones"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var maxYValue = 60;
            var value1 = 40;
            var value2 = 15;
            var value3 = 34;
            var value4 = 14;
            var value5 = 20;
            var zones = {
                "type": "mixed",
                "font-family": "proxima_nova_rgregular",
                "title": {
                    "text": "MINUTES IN ZONES",
                    "font-family": "proxima_nova_rgregular",
                    "background-color": "none",
                    "font-color": "#39393d",
                    "font-size": "22px",
                    "adjustLayout": true
                },
                "plot": {
                    "borderRadius": "5px 5px 0 0",
                    "bar-width": '50%',
                    "-animation": {
                        "delay": 300,
                        "effect": 11,
                        "speed": "500",
                        "method": "0",
                        "sequence": "3",
                        "z-index": 2
                    },
                    "value-box": {
                        "placement": "top-out",
                        "text": "%v",
                        "decimals": 0,
                        "font-color": "#35353b",
                        "font-size": "14px",
                        "alpha": 1,
                        "background-color": "red",
                        "padding": "5px 5px 0px 5px",
                        "shadow": false,
                        "-z-index": 4
                    }
                },
                "plotarea": {
                    "border-left": "3px solid #39393d",
                    "border-bottom": "3px solid #39393d",
                    "padding-left": "3px",
                    "margin": "dynamic",
                    "background-color": "none"
                },
                "tooltip": {
                    "visible": false
                },
                "scale-x": {
                    "placement": "opposite",
                    "labels": ["Zone 1", "Zone 2", "Zone 3", "Zone 4", "Zone 5"],
                    "line-width": 0,
                    "tick": {
                        "visible": false
                    },
                    "guide": {
                        "visible": false
                    },
                    "item": {
                        "offsetY": 25,
                        "font-size": 12,
                        "fontColor": 'black',
                        "bold": true
                    },
                },
                "scale-y": {
                    "offsetEnd": 45,
                    "max-value": maxYValue,
                    "visible": false,
                    "line-width": 0,
                    "guide": {
                        "visible": false
                    }
                },
                "series": [{
                        "type": "bar",
                        "values": [
                            value1, value2, value3, value4, value5
                        ],
                        "background-color": "#cdcccc",
                        "z-index": 2,
                        "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
                    },
                    {
                        "type": "line",
                        "line-color": "gray",
                        "marker": {
                            "backgroundColor": "white",
                            "borderWidth": 2,
                            "border-color": "#35353b",
                            "visible": false,
                            "rules": [{
                                "rule": " %node-index%3 == 1 ",
                                "visible": true,
                                "size": 7,
                                "offset-y": -15
                            }]
    
                        },
                        "value-box": {
                            "visible": 0
                        },
                        "values": [
                            [0, value1 + 2],
                            [0, maxYValue],
                            [0, null],
                            [1, value2 + 2],
                            [1, maxYValue],
                            [1, null],
                            [2, value3 + 2],
                            [2, maxYValue],
                            [2, null],
                            [3, value4 + 2],
                            [3, maxYValue],
                            [3, null],
                            [4, value5 + 2],
                            [4, maxYValue],
                            [4, null],
                        ]
                    }
                ]
            }
            zingchart.render({
                id: 'zones',
                data: zones,
                height: "320",
                width: "100%",
                output: 'canvas'
            });
        </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="zones"></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 maxYValue = 60;
    var value1 = 40;
    var value2 = 15;
    var value3 = 34;
    var value4 = 14;
    var value5 = 20;
    var zones = {
        "type": "mixed",
        "font-family": "proxima_nova_rgregular",
        "title": {
            "text": "MINUTES IN ZONES",
            "font-family": "proxima_nova_rgregular",
            "background-color": "none",
            "font-color": "#39393d",
            "font-size": "22px",
            "adjustLayout": true
        },
        "plot": {
            "borderRadius": "5px 5px 0 0",
            "bar-width": '50%',
            "-animation": {
                "delay": 300,
                "effect": 11,
                "speed": "500",
                "method": "0",
                "sequence": "3",
                "z-index": 2
            },
            "value-box": {
                "placement": "top-out",
                "text": "%v",
                "decimals": 0,
                "font-color": "#35353b",
                "font-size": "14px",
                "alpha": 1,
                "background-color": "red",
                "padding": "5px 5px 0px 5px",
                "shadow": false,
                "-z-index": 4
            }
        },
        "plotarea": {
            "border-left": "3px solid #39393d",
            "border-bottom": "3px solid #39393d",
            "padding-left": "3px",
            "margin": "dynamic",
            "background-color": "none"
        },
        "tooltip": {
            "visible": false
        },
        "scale-x": {
            "placement": "opposite",
            "labels":["Zone 1","Zone 2","Zone 3","Zone 4","Zone 5"],
            "line-width": 0,
            "tick": {
                "visible": false
            },
            "guide": {
                "visible": false
            },
            "item": {
                "offsetY": 25,
                "font-size": 12,
                "fontColor": 'black',
                "bold": true
            },
        },
        "scale-y": {
            "offsetEnd": 45,
            "max-value": maxYValue,
            "visible": false,
            "line-width": 0,
            "guide": {
                "visible": false
            }
        },
        "series": [
            {
                "type": "bar",
                "values": [
                    value1, value2, value3, value4, value5
                ],
                "background-color": "#cdcccc",
                "z-index": 2,
                "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
            },
            {
                "type": "line",
                "line-color": "gray",
                "marker": {
                    "backgroundColor":"white",
                    "borderWidth": 2,
                    "border-color": "#35353b",
                    "visible": false,
                    "rules":[
                        {
                            "rule":" %node-index%3 == 1 ",
                            "visible": true,
                            "size": 7,
                            "offset-y": -15
                        }
                    ]
    
                },
                "value-box": {
                    "visible": 0
                },
                "values": [
                    [0, value1 + 2],
                    [0, maxYValue],
                    [0, null],
                    [1, value2 + 2],
                    [1, maxYValue],
                    [1, null],
                    [2, value3 + 2],
                    [2, maxYValue],
                    [2, null],
                    [3, value4 + 2],
                    [3, maxYValue],
                    [3, null],
                    [4, value5 + 2],
                    [4, maxYValue],
                    [4, null],
                ]
            }
        ]
    }
    zingchart.render({
        id : 'zones',
        data : zones,
        height: "320",
        width: "100%",
        output : 'canvas'
    });