• 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="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var chartJSON = {
                "graphset": [{
                    "chartdescription": "Portfolio Style Skyline&trade;-100-319",
                    "title": {},
                    "legend": {
                        "visible": true,
                        "layout": "x3",
                        "item": {
                            "marker-style": "circle",
                            "border-color": "black"
                        },
                        "position": "50% 98%"
                    },
                    "scale-x": {
                        "label": {},
                        "labels": [],
                        "values": ["Book to Price", "Dividend Yield", "Earnings Yld", "CFlow Yield", "Sales to Price", "EBITDA to Price", "Rtn on Equity", "Earnings Growth", "Income/Sales", "Sales Growth", "IBES 12Mth Gr", "IBES 1Yr Rev", "Market Cap", "Market Beta", "Momentum ST", "Momentum MT", "Debt/Equity", "Foreign Sales"],
                        "item": {
                            "font-angle": 340,
                            "offset-x": 15,
                            "offset-y": -8,
                            "auto-align": true,
                            "rules": []
                        },
                        "items-overlap": true,
                        "max-items": 200,
                        "max-labels": 50,
                        "markers": [{
                                "type": "line",
                                "range": [5.5],
                                "line-color": "#cdcdcd"
                            },
                            {
                                "type": "line",
                                "range": [11.5],
                                "line-color": "#cdcdcd"
                            },
                            {
                                "type": "line",
                                "range": [13.5],
                                "line-color": "#cdcdcd"
                            },
                            {
                                "type": "line",
                                "range": [15.5],
                                "line-color": "#cdcdcd"
                            }
                        ],
                        "exact": true
                    },
                    "scale-y": {
                        "label": {
                            "text": "Style Tilt ™"
                        },
                        "item": {
                            "rules": []
                        },
                        "values": "-10:12:2"
                    },
                    "plot": {
                        "tooltip-text": "%k: %v",
                        "rules": [{
                                "rule": "%i >= 0 && %i <=5",
                                "background-color": "#0193CF"
                            },
                            {
                                "rule": "%i >= 6 && %i <=11",
                                "background-color": "#3B9067"
                            },
                            {
                                "rule": "%i >= 12 && %i <=13",
                                "background-color": "#AB4030"
                            },
                            {
                                "rule": "%i >= 14 && %i <=15",
                                "background-color": "#2A2A2A"
                            },
                            {
                                "rule": "%i >= 16 && %i <=17",
                                "background-color": "#C9BA3B"
                            }
                        ],
                        "data-id": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
                        "data-tooltips-1": [],
                        "data-tooltips-2": [],
                        "value-box": {
                            "visible": false
                        },
                        "hover-state": {
                            "shadow": true,
                            "shadow-distance": "3px"
                        },
                        "exact": 1,
                        "max-trackers": 999,
                        "offset-values": [],
                        "tooltip": {
                            "visible": true
                        }
                    },
                    "plotarea": {
                        "margin-bottom": 75,
                        "margin-top": 40,
                        "height": "100%"
                    },
                    "layout": {
                        "layout": "1x2"
                    },
                    "series": [{
                        "values": [-5.213293552398682, -8.919129371643066, -9.667237281799316, -6.990901470184326, -2.0189571380615234, -5.652781009674072, 0.544833779335022, 1.086244821548462, -1.326432704925537, 0.6185302138328552, 6.6006927490234375, 6.627787113189697, -6.098244667053223, 2.646185874938965, 3.438965320587158, 10.199530601501465, -3.0259251594543457, -1.0019980669021606],
                        "text": "Portfolio Style Skyline&trade;",
                        "effect": 2,
                        "target": "_self",
                        "url": "javascript:getTiltContributions('Widgets.WebWidgets.WebChartStyleExposure','3b890659-24cd-4d18-9dc2-0be241fb095d','%data-id|%k','UA');",
                        "stacked": true,
                        "decimals": 2,
                        "data-tooltips-3": [],
                        "data-tooltips-4": [],
                        "type": "bar",
                        "marker": {
                            "visible": false
                        },
                        "legend-marker": {
                            "visible": false
                        },
                        "legend-item": {
                            "visible": false
                        }
                    }],
                    "options": {
                        "tooltip-box": {
                            "text-align": ""
                        }
                    },
                    "type": "mixed"
                }]
            };
    
            function createGroups() {
    
                // get info about the plotarea to find y position of labels
                var oPlotArea = zingchart.exec('zc', 'getobjectinfo', {
                    object: 'plotarea'
                });
    
                // define labels (start and end nodes, text and some styling if needed)
                var aLabels = [{
                        nodes: [0, 5],
                        data: {
                            'text': 'Value'
                        }
                    },
                    {
                        nodes: [6, 11],
                        data: {
                            'text': 'Growth',
                            'background-color': 'yellow'
                        }
                    },
                    {
                        nodes: [12, 13],
                        data: {
                            'text': 'Risk'
                        }
                    },
                    {
                        nodes: [14, 15],
                        data: {
                            'text': 'Momentum'
                        }
                    },
                    {
                        nodes: [16, 17],
                        data: {
                            'text': 'Quality'
                        }
                    }
                ];
    
                var aLabelsData = [];
    
                for (var l = 0; l < aLabels.length; l++) {
                    // get information about start and end nodes
                    var oNodeStart = zingchart.exec('zc', 'getobjectinfo', {
                        object: 'node',
                        plotindex: 0,
                        nodeindex: aLabels[l].nodes[0]
                    });
                    var oNodeEnd = zingchart.exec('zc', 'getobjectinfo', {
                        object: 'node',
                        plotindex: 0,
                        nodeindex: aLabels[l].nodes[1]
                    });
    
                    // create label objects (for text and the grouping box)
                    var oLabel = aLabels[l].data;
                    oLabel['padding'] = 5;
                    oLabel['x'] = oNodeStart.x - 2;
                    oLabel['y'] = oPlotArea.y - 35;
                    oLabel['width'] = oNodeEnd.x + oNodeEnd.width - oNodeStart.x + 4;
                    oLabel['height'] = 20;
                    oLabel['font-size'] = Math.round(8 + Math.min(8, oLabel['width'] / 20));
                    aLabelsData.push(oLabel);
    
                    var oGroup = {};
                    oGroup['border-top'] = '1px solid #666';
                    oGroup['border-right'] = '1px solid #666';
                    oGroup['border-left'] = '1px solid #666';
                    oGroup['x'] = oNodeStart.x - 2;
                    oGroup['y'] = oPlotArea.y - 12;
                    oGroup['width'] = oNodeEnd.x + oNodeEnd.width - oNodeStart.x + 4;
                    oGroup['height'] = 8;
                    aLabelsData.push(oGroup);
                }
    
                /* for the client side chart */
                zingchart.exec('zc', 'addobject', {
                    type: 'label',
                    data: aLabelsData
                });
    
                /* for the nodejs version */
                /*
                zingchart.exec('zc', 'addobject', {
                    type : 'label',
                    data : aLabelsData,
                    update : false
                });
                // hack to force repaint since objects API does not repaint in nodejs (this will be fixed in the next public version)
                zingchart.exec('zc', 'modify', {data:{}});
                */
            }
    
            /* for the client side chart */
            zingchart.render({
                id: 'zc',
                data: chartJSON,
                width: 800,
                height: 400,
                events: {
                    complete: function() {
                        createGroups();
                    }
                }
            });
    
            /* for the nodejs version */
            /*
            var bFirstTime = true;
            zingchart.render({
            	id : 'zc',
            	data : chartJSON,
            	width : 800,
            	height : 400,
            	filetype : 'png',
            	filename : 'demo.png',
            	events : {
            		render : function() {
            			if (bFirstTime) {
            				bFirstTime = false;
            				createGroups();
            			}
            		}
            	}
            });
            */
        </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></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 chartJSON = {
        "graphset":[
            {
                "chartdescription":"Portfolio Style Skyline&trade;-100-319",
                "title":{
                },
                "legend":{
                    "visible":true,
                    "layout":"x3",
                    "item":{
                        "marker-style":"circle",
                        "border-color":"black"
                    },
                    "position":"50% 98%"
                },
                "scale-x":{
                    "label":{
                    },
                    "labels":[],
                    "values":["Book to Price","Dividend Yield","Earnings Yld","CFlow Yield","Sales to Price","EBITDA to Price","Rtn on Equity","Earnings Growth","Income/Sales","Sales Growth","IBES 12Mth Gr","IBES 1Yr Rev","Market Cap","Market Beta","Momentum ST","Momentum MT","Debt/Equity","Foreign Sales"],
                    "item":{
                        "font-angle":340,
                        "offset-x":15,
                        "offset-y":-8,
                        "auto-align":true,
                        "rules":[]
                    },
                    "items-overlap":true,
                    "max-items":200,
                    "max-labels":50,
                    "markers":[
                        {
                            "type":"line",
                            "range":[5.5],
                            "line-color":"#cdcdcd"
                        },
                        {
                            "type":"line",
                            "range":[11.5],
                            "line-color":"#cdcdcd"
                        },
                        {
                            "type":"line",
                            "range":[13.5],
                            "line-color":"#cdcdcd"
                        },
                        {
                            "type":"line",
                            "range":[15.5],
                            "line-color":"#cdcdcd"
                        }
                    ],
                    "exact":true
                },
                "scale-y":{
                    "label":{
                        "text":"Style Tilt ™"
                    },
                    "item":{
                        "rules":[]
                    },
                    "values":"-10:12:2"
                },
                "plot":{
                    "tooltip-text":"%k: %v",
                    "rules":[
                        {
                            "rule":"%i >= 0 && %i <=5",
                            "background-color":"#0193CF"
                        },
                        {
                            "rule":"%i >= 6 && %i <=11",
                            "background-color":"#3B9067"
                        },
                        {
                            "rule":"%i >= 12 && %i <=13",
                            "background-color":"#AB4030"
                        },
                        {
                            "rule":"%i >= 14 && %i <=15",
                            "background-color":"#2A2A2A"
                        },
                        {
                            "rule":"%i >= 16 && %i <=17",
                            "background-color":"#C9BA3B"
                        }
                    ],
                    "data-id":["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18"],
                    "data-tooltips-1":[],
                    "data-tooltips-2":[],
                    "value-box":{
                        "visible":false
                    },
                    "hover-state":{
                        "shadow":true,
                        "shadow-distance":"3px"
                    },
                    "exact":1,
                    "max-trackers":999,
                    "offset-values":[],
                    "tooltip":{
                        "visible":true
                    }
                },
                "plotarea":{
                    "margin-bottom":75,
                    "margin-top":40,
                    "height":"100%"
                },
                "layout":{
                    "layout":"1x2"
                },
                "series":[
                    {
                        "values":[-5.213293552398682,-8.919129371643066,-9.667237281799316,-6.990901470184326,-2.0189571380615234,-5.652781009674072,0.544833779335022,1.086244821548462,-1.326432704925537,0.6185302138328552,6.6006927490234375,6.627787113189697,-6.098244667053223,2.646185874938965,3.438965320587158,10.199530601501465,-3.0259251594543457,-1.0019980669021606],
                        "text":"Portfolio Style Skyline&trade;",
                        "effect":2,
                        "target":"_self",
                        "url":"javascript:getTiltContributions('Widgets.WebWidgets.WebChartStyleExposure','3b890659-24cd-4d18-9dc2-0be241fb095d','%data-id|%k','UA');",
                        "stacked":true,
                        "decimals":2,
                        "data-tooltips-3":[],
                        "data-tooltips-4":[],
                        "type":"bar",
                        "marker":{
                            "visible":false
                        },
                        "legend-marker":{
                            "visible":false
                        },
                        "legend-item":{
                            "visible":false
                        }
                    }
                ],
                "options":{
                    "tooltip-box":{
                        "text-align":""
                    }
                },
                "type":"mixed"
            }
        ]
    };
    
    function createGroups() {
      
        // get info about the plotarea to find y position of labels
        var oPlotArea = zingchart.exec('zc', 'getobjectinfo', {
            object : 'plotarea'
        });
        
        // define labels (start and end nodes, text and some styling if needed)
        var aLabels = [
            {
                nodes : [0, 5],
                data : {
                    'text' : 'Value'
                }
            },
            {
                nodes : [6, 11],
                data : {
                    'text' : 'Growth',
                    'background-color' : 'yellow'
                }
            },
            {
                nodes : [12, 13],
                data : {
                    'text' : 'Risk'
                }
            },
            {
                nodes : [14, 15],
                data : {
                    'text' : 'Momentum'
                }
            },
            {
                nodes : [16, 17],
                data : {
                    'text' : 'Quality'
                }
            }
        ];
        
        var aLabelsData = [];
        
        for (var l=0;l<aLabels.length;l++) {
            // get information about start and end nodes
            var oNodeStart = zingchart.exec('zc', 'getobjectinfo', {
                object : 'node',
                plotindex : 0,
                nodeindex : aLabels[l].nodes[0]
            });
            var oNodeEnd = zingchart.exec('zc', 'getobjectinfo', {
                object : 'node',
                plotindex : 0,
                nodeindex : aLabels[l].nodes[1]
            });
            
            // create label objects (for text and the grouping box)
            var oLabel = aLabels[l].data;
            oLabel['padding'] = 5;
            oLabel['x'] = oNodeStart.x - 2;
            oLabel['y'] = oPlotArea.y - 35;
            oLabel['width'] = oNodeEnd.x + oNodeEnd.width - oNodeStart.x + 4;
            oLabel['height'] = 20;
            oLabel['font-size'] = Math.round(8 + Math.min(8, oLabel['width']/20));        
            aLabelsData.push(oLabel);
    
            var oGroup = {};
            oGroup['border-top'] = '1px solid #666';
            oGroup['border-right'] = '1px solid #666';
            oGroup['border-left'] = '1px solid #666';
            oGroup['x'] = oNodeStart.x - 2;
            oGroup['y'] = oPlotArea.y - 12;
            oGroup['width'] = oNodeEnd.x + oNodeEnd.width - oNodeStart.x + 4;
            oGroup['height'] = 8;
            aLabelsData.push(oGroup);
        }
        
        /* for the client side chart */
        zingchart.exec('zc', 'addobject', {
            type : 'label',
            data : aLabelsData
        });
        
        /* for the nodejs version */
        /*
        zingchart.exec('zc', 'addobject', {
            type : 'label',
            data : aLabelsData,
            update : false
        });
        // hack to force repaint since objects API does not repaint in nodejs (this will be fixed in the next public version)
        zingchart.exec('zc', 'modify', {data:{}});
        */
    }
    
    /* for the client side chart */
    zingchart.render({ 
    	id: 'zc', 
    	data: chartJSON, 
    	width: 800,
    	height: 400,
    	events : {
    	  complete : function() {
    	    createGroups();
    	  }
    	}
    });
    
    /* for the nodejs version */
    /*
    var bFirstTime = true;
    zingchart.render({
    	id : 'zc',
    	data : chartJSON,
    	width : 800,
    	height : 400,
    	filetype : 'png',
    	filename : 'demo.png',
    	events : {
    		render : function() {
    			if (bFirstTime) {
    				bFirstTime = false;
    				createGroups();
    			}
    		}
    	}
    });
    */