• 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;
        }
      </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();
    			}
    		}
    	}
    });
    */