• 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: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id="zc"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var images = {
                devil: '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',
                cloud: 'iVBORw0KGgoAAAANSUhEUgAAAC4AAABQCAYAAABmkUeGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABoxJREFUeNrsmmtsFFUUx+/szu52t9vd0sdSSlug0LVAQ8vDloBCNESNIPhBP6gfFIMxUdSYmBgSE43x8cFEE1EiH01M8AMJhmiAINHwUlskgCZAlWoF2tLu9rEt+5yH/zuca27Ks2VLS7yT/DPtbjPzm/+cOefcM9Vs22Z34+Zid+mmwBW4AlfgClyBK3AFrsAVuAJX4Ap8ym/aBJmhSXv5HBbJpv24Nr7A1/NoAAflx/NAXshHe7cEnYOykgzIHM9F6HlyWCfQAFQEhWlfSPAaQaagEWiYdJk+y471AvRxuqtJ0NxhP8GWQ9OhCigCFdN3LoLjsANQH3SJ9v1Qgi4gRxeQN3AX3XJ9lLibBQTNgWuguVBtZOmK+hktqyo9wWABglLTXC6ju/Vw/MIPezrw/XnoL9I/UBddwIjk/m09nBoBC0B+64MUEn4S/70MmgXVV6x+pLn5/W3V/pmzndjI2fxhwlXiSD5++cOD7OL+3ebJzz48neg4+ys++Q06A/0N9dJdyd4obPjDqd0EWidgDldCt59rGhQiFZPbcxve+qSx9rnXXEOmzeLwLIlTZ60rKYSDBwAehg3T3BorxM8dX32eOv72K9/j61+gE9A5ghfOjwtcl8KgghydB82BKmvWrJtrG0aw90SrPzPYXzYHwDVbPmZ9sLgXVicAnrWvdsJP8BUeDRcAe48dNNueeWAPvjoIHSf4GMW8OVZwjbIEh66EolBT0bwF9zW+vGVp7Yan/BZBwTzWvvNLFlz/LOuERxdBe/kWcgN3vBzwEdgT37Etfe69V3fi4x/JeR73Q9dz/UbgbgqPCoJuDi9Z+ejSL75ZwoLFDhgPAw5fiL9EZDgO98Bt/rl5iwNgDl+CGArhGJ2b13eMHNrzNT4+Ap2mrJMcawFyUZjwWK7WS6c31W7dtSTuC7NYEvFr2CxNrvqkpiEzxjLCDXADwrAQ849vmgNwHoZ/QBcobaav95DqN4jvAGWLmsD6jc29eohlUhYbhp0yYMa8verlGIBjeFas1bTi0lp7MB6hEPWRgdatNFmioAQoi8zgOTldtzgSQ3oYgjJw24mRPCnLjYBShsXcdU28BlRRIQsRvPtaadt1jdLtpxQ3gzJINFsQZhnEb45Dm/mXieNmIXvh8jLKXLPp/KLy6qNN1kc9kAX0xzPpAAu4CpMDLGNbTj42J+DNi60JGJtHzUKqpIMU45rUEtik/8BdVB2L6ErrePorrK5dHt30psfdspp147J4jjat/IN7cfZSr8YC8xex/mWramLHDrYQtCH1RqIlNmVwN92SMgqPxqonXnh4/kvvTNeCYdaVQRziiczlJuZFF7+LmuliZavWsoY1j7FcT2dD6wevBy4d2SdADakNtsRN0gg6InK2rya6oWH7gWW5QJj1o6D0AziFo0/k+znuegg5nTtf4nE5v59648kzA0f37sLXP0NnoW6eRZHHTZ3AvfQU84JTV/Hiu00JTxFLIP3FkUmMO/BGkfc0MZwoAV9jugV4jZVv/qge4A0U830U904r4KL49hF4xF0drc8sfkiPp002hCRtGLwU3jllc6gVOO8Azp8umclC655voXa5lNK0Lh5K8WDyEl+qzW6oHkRVGEFMp7PWhKS/mynLWweE6DAYtMYHyylhTJPBRah4RPtqVtWHLcO8kvEn8aWzAQKbt8TRFo3cDhGjWwYXxcdrG6ZuG5P/mjwH59HCMNvLM7QTDQXy4nt0r8ITk82syQe3Kfc5W/TeEGtvc0sjDwfclvJk2lmwmpZvSk1/ujsStJAWedwBF/OOpJNuLpyNwfHglIFOgnk43kfLuYwAF21jhvqBXvbTrlNsZCivHeBt6eSBJOXxAcrhhgC3KUw4eA/0J9u7vWdKQHMDv93aRhOAPhogGbLjArzLKa3ffbqPte4eduYKk6XYeca2bjzOutqPgqljNLh2jRXPLGpnG9miNSvZ/U/Xscp7PKy06s7EdDvaktOHYuzwjjbENp+7/E7LuW4q+Rn0KpYmreq9NPApoZX9LGroq6gBEwVAz/N42pbu+ghNtLpo2tVJ+15a9TutrrxYFikxST/naKLUTRcSlgaY7jyPpwW4QWBivhgnDVKIZOQ5i3adyasYuQVIomrpchHI4yb67hzBp8jEFAGLcbR9s7mKGHK6pWGna4KgmbQkkxcOpjR6tq8aCKl/31PgClyBK3AFrsAVuAJX4ApcgStwBa7AFbgC/3+B/yvAAIaOBVDGprq9AAAAAElFTkSuQmCC',
                fireball: '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',
                sun: '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'
            };
    
            var gcolors = [
                '#0AAEF6',
                '#08A8F6',
                '#0BA8F5',
                '#3AB5C5',
                '#72C58F',
                '#A6D15B',
                '#DDD324',
                '#FCB800',
                '#FC7300',
                '#FE2901',
                '#FD2300',
                '#FF0000'
            ];
    
            window.rule_scaleY_item = function(p) {
                return {
                    color: gcolors[p.index]
                };
            };
    
            window.rule_plot = function(p) {
                var cindex = Math.round(p.value / 10);
                var colors = gcolors.slice(0, cindex);
                var stops = [],
                    step = parseFloat(Number(0.9 / colors.length).toFixed(2));
                for (var i = 0; i < colors.length; i++) {
                    stops.push(parseFloat(Number(0.05 + i * step).toFixed(2)));
                }
                return {
                    gradientStops: stops.join(' '),
                    gradientColors: colors.join(' ')
                };
            }
    
            window.rule_plot_valueBox = function(p) {
                var combo = p.plotindex + '-' + p.nodeindex;
                var image = '';
                switch (combo) {
                    case '1-0':
                        image = images.cloud;
                        break;
                    case '0-2':
                        image = images.fireball;
                        break;
                    case '1-3':
                        image = images.sun;
                        break;
                    case '0-5':
                        image = images.devil;
                        break;
                }
                if (image !== '') {
                    return {
                        width: 46,
                        height: 80,
                        offsetY: 18,
                        canvasBackgroundPosition: '0 -18',
                        backgroundImage: 'data:image/png;base64,' + image,
                        backgroundRepeat: 'no-repeat'
                    };
                }
                return {
                    visible: false
                }
            };
    
            var cdata = {
                "globals": {
                    "fontFamily": "Lucida Sans Unicode"
                },
                "type": "vbar",
                "title": {
                    "text": "AVERAGE HIGH & LOW TEMPERATURES IN PHOENIX, ARIZONA",
                    "fontSize": 15,
                    "padding": "30 5",
                    "color": "#ffffff"
                },
                "resources": [{
                        "backgroundImage": "data:image/png;base64," + images.devil
                    },
                    {
                        "backgroundImage": "data:image/png;base64," + images.cloud
                    },
                    {
                        "backgroundImage": "data:image/png;base64," + images.fireball
                    },
                    {
                        "backgroundImage": "data:image/png;base64," + images.sun
                    }
                ],
                "backgroundColor": "#444444 #111111",
                "plotarea": {
                    "backgroundColor": "#000000",
                    "margin": "100 0 40 0"
                },
                "scaleX": {
                    "offsetStart": 50,
                    "offsetEnd": 20,
                    "values": ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
                    "lineWidth": 0,
                    "tick": {
                        "visible": false
                    },
                    "item": {
                        "color": "#ffffff"
                    }
                },
                "scaleY": {
                    "values": "0:110:10",
                    "item": {
                        "color": "#ffffff",
                        "offsetX": 40,
                        "fontWeight": 900,
                        "jsRule": "rule_scaleY_item()"
                    },
                    "refLine": {
                        "visible": false
                    },
                    "guide": {
                        "lineStyle": "solid",
                        "lineColor": "#444444",
                        "items": [{
                                "backgroundColor": "#252525"
                            },
                            {
                                "backgroundColor": "#121212"
                            }
                        ]
                    }
                },
                "plot": {
                    "barSpace": 0.3,
                    "barsSpaceLeft": 0.2,
                    "barsSpaceRight": 0.2,
                    "borderWidth": 1,
                    "borderColor": "#000",
                    "shadow": true,
                    "shadowColor": "#111",
                    "shadowDistance": 1,
                    "fillAngle": 270,
                    "jsRule": "rule_plot()",
                    "valueBox": {
                        "color": "#000000",
                        "shadow": false,
                        "backgroundColor": "none",
                        "text": "%node-value\u00B0",
                        "jsRule": "rule_plot_valueBox()"
                    }
                },
                "series": [{
                        "values": [65, 71, 75, 84, 92, 103, 105, 101, 98, 88, 76, 65],
                        "text": "AVG. HIGH TEMP."
                    },
                    {
                        "values": [41, 43, 49, 55, 64, 72, 80, 79, 73, 62, 48, 41],
                        "text": "AVG. LOW TEMP."
                    }
                ],
                "tooltip": {
                    "shadow": true,
                    "shadowColor": "#424242",
                    "backgroundColor": "#212121",
                    "padding": 10,
                    "fontSize": 15,
                    "color": "#ffffff",
                    "borderWidth": 1,
                    "borderColor": "#000000",
                    "text": "%plot-text IN %scale-key-text IS %node-value\u00B0"
                }
            };
    
            zingchart.render({
                id: 'zc',
                width: 600,
                height: 400,
                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 images = {
        devil:'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',
        cloud:'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', 
        fireball:'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',
        sun:'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'
    };
    
    var gcolors = [
        '#0AAEF6',
        '#08A8F6',
        '#0BA8F5',
        '#3AB5C5',
        '#72C58F',
        '#A6D15B',
        '#DDD324',
        '#FCB800',
        '#FC7300',
        '#FE2901',
        '#FD2300',
        '#FF0000'
    ];
    
    window.rule_scaleY_item = function(p) {
        return {
            color:gcolors[p.index]    
        };
    };
    
    window.rule_plot = function(p) {
        var cindex = Math.round(p.value/10);
        var colors = gcolors.slice(0, cindex);
        var stops = [], step = parseFloat(Number(0.9/colors.length).toFixed(2));
        for (var i=0;i<colors.length;i++) {
            stops.push(parseFloat(Number(0.05 + i*step).toFixed(2)));
        }
        return {
            gradientStops:stops.join(' '),
            gradientColors:colors.join(' ')
        };
    }
    
    window.rule_plot_valueBox = function(p) {
        var combo = p.plotindex + '-' + p.nodeindex;
        var image = '';
        switch (combo) {
            case '1-0': image = images.cloud; break;
            case '0-2': image = images.fireball; break;
            case '1-3': image = images.sun; break;
            case '0-5': image = images.devil; break;
        }
        if (image !== '') {
            return {
                width:46,
                height:80,
                offsetY:18,
                canvasBackgroundPosition:'0 -18',
                backgroundImage:'data:image/png;base64,' + image,
                backgroundRepeat:'no-repeat'
            };    
        }
        return {
            visible:false    
        }
    };
    
    var cdata = {
        "globals":{
            "fontFamily":"Lucida Sans Unicode"
        },
        "type":"vbar",
        "title":{
    		"text":"AVERAGE HIGH & LOW TEMPERATURES IN PHOENIX, ARIZONA",
            "fontSize":15,
            "padding":"30 5",
            "color":"#ffffff"
    	},
        "resources":[
            {
                "backgroundImage":"data:image/png;base64,"+images.devil
            },
            {
                "backgroundImage":"data:image/png;base64,"+images.cloud
            },
            {
                "backgroundImage":"data:image/png;base64,"+images.fireball
            },
            {
                "backgroundImage":"data:image/png;base64,"+images.sun
            }
        ],
        "backgroundColor":"#444444 #111111",
    	"plotarea":{
            "backgroundColor":"#000000",
            "margin":"100 0 40 0"
    	},
    	"scaleX":{
            "offsetStart":50,
            "offsetEnd":20,
            "values":["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
            "lineWidth":0,
            "tick":{
                "visible":false    
            },
            "item":{
                "color":"#ffffff"
            }
    	},
    	"scaleY":{
            "values":"0:110:10",
            "item":{
                "color":"#ffffff",
                "offsetX":40,
                "fontWeight":900,
                "jsRule":"rule_scaleY_item()"
            },
            "refLine":{
                "visible":false
            },
            "guide":{
                "lineStyle":"solid",
                "lineColor":"#444444",
                "items":[
                    {
                        "backgroundColor":"#252525"    
                    },
                    {
                        "backgroundColor":"#121212"    
                    }
                ]
            }
    	},
    	"plot":{
            "barSpace":0.3,
            "barsSpaceLeft":0.2,
            "barsSpaceRight":0.2,
            "borderWidth":1,
            "borderColor":"#000",
            "shadow":true,
            "shadowColor":"#111",
            "shadowDistance":1,
            "fillAngle":270,
            "jsRule":"rule_plot()",
            "valueBox":{
                "color":"#000000",
                "shadow":false,
                "backgroundColor":"none",
                "text":"%node-value\u00B0",
                "jsRule":"rule_plot_valueBox()"    
            }
    	},
    	"series":[
            {
                "values":[65, 71, 75, 84, 92, 103, 105, 101, 98, 88, 76, 65],
                "text":"AVG. HIGH TEMP."
            },
            {
                "values":[41, 43, 49, 55, 64, 72, 80, 79, 73, 62, 48, 41],
                "text":"AVG. LOW TEMP."
            }
        ],
        "tooltip":{
            "shadow":true,
            "shadowColor":"#424242",
            "backgroundColor":"#212121",
            "padding":10,
            "fontSize":15,
            "color":"#ffffff",
            "borderWidth":1,
            "borderColor":"#000000",
            "text":"%plot-text IN %scale-key-text IS %node-value\u00B0"
        }
    };
    
    zingchart.render({
      id : 'zc',
    	width : 600,
    	height : 400,
    	output : 'svg',
    	data : cdata
    });