• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var chartJSON = {
    35.       "graphset": [{
    36.         "chartdescription": "Portfolio Style Skyline&trade;-100-319",
    37.         "title": {},
    38.         "legend": {
    39.           "visible": true,
    40.           "layout": "x3",
    41.           "item": {
    42.             "marker-style": "circle",
    43.             "border-color": "black"
    44.           },
    45.           "position": "50% 98%"
    46.         },
    47.         "scale-x": {
    48.           "label": {},
    49.           "labels": [],
    50.           "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"],
    51.           "item": {
    52.             "font-angle": 340,
    53.             "offset-x": 15,
    54.             "offset-y": -8,
    55.             "auto-align": true,
    56.             "rules": []
    57.           },
    58.           "items-overlap": true,
    59.           "max-items": 200,
    60.           "max-labels": 50,
    61.           "markers": [{
    62.               "type": "line",
    63.               "range": [5.5],
    64.               "line-color": "#cdcdcd"
    65.             },
    66.             {
    67.               "type": "line",
    68.               "range": [11.5],
    69.               "line-color": "#cdcdcd"
    70.             },
    71.             {
    72.               "type": "line",
    73.               "range": [13.5],
    74.               "line-color": "#cdcdcd"
    75.             },
    76.             {
    77.               "type": "line",
    78.               "range": [15.5],
    79.               "line-color": "#cdcdcd"
    80.             }
    81.           ],
    82.           "exact": true
    83.         },
    84.         "scale-y": {
    85.           "label": {
    86.             "text": "Style Tilt ™"
    87.           },
    88.           "item": {
    89.             "rules": []
    90.           },
    91.           "values": "-10:12:2"
    92.         },
    93.         "plot": {
    94.           "tooltip-text": "%k: %v",
    95.           "rules": [{
    96.               "rule": "%i >= 0 && %i <=5",
    97.               "background-color": "#0193CF"
    98.             },
    99.             {
    100.               "rule": "%i >= 6 && %i <=11",
    101.               "background-color": "#3B9067"
    102.             },
    103.             {
    104.               "rule": "%i >= 12 && %i <=13",
    105.               "background-color": "#AB4030"
    106.             },
    107.             {
    108.               "rule": "%i >= 14 && %i <=15",
    109.               "background-color": "#2A2A2A"
    110.             },
    111.             {
    112.               "rule": "%i >= 16 && %i <=17",
    113.               "background-color": "#C9BA3B"
    114.             }
    115.           ],
    116.           "data-id": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
    117.           "data-tooltips-1": [],
    118.           "data-tooltips-2": [],
    119.           "value-box": {
    120.             "visible": false
    121.           },
    122.           "hover-state": {
    123.             "shadow": true,
    124.             "shadow-distance": "3px"
    125.           },
    126.           "exact": 1,
    127.           "max-trackers": 999,
    128.           "offset-values": [],
    129.           "tooltip": {
    130.             "visible": true
    131.           }
    132.         },
    133.         "plotarea": {
    134.           "margin-bottom": 75,
    135.           "margin-top": 40,
    136.           "height": "100%"
    137.         },
    138.         "layout": {
    139.           "layout": "1x2"
    140.         },
    141.         "series": [{
    142.           "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],
    143.           "text": "Portfolio Style Skyline&trade;",
    144.           "effect": 2,
    145.           "target": "_self",
    146.           "url": "javascript:getTiltContributions('Widgets.WebWidgets.WebChartStyleExposure','3b890659-24cd-4d18-9dc2-0be241fb095d','%data-id|%k','UA');",
    147.           "stacked": true,
    148.           "decimals": 2,
    149.           "data-tooltips-3": [],
    150.           "data-tooltips-4": [],
    151.           "type": "bar",
    152.           "marker": {
    153.             "visible": false
    154.           },
    155.           "legend-marker": {
    156.             "visible": false
    157.           },
    158.           "legend-item": {
    159.             "visible": false
    160.           }
    161.         }],
    162.         "options": {
    163.           "tooltip-box": {
    164.             "text-align": ""
    165.           }
    166.         },
    167.         "type": "mixed"
    168.       }]
    169.     };
    170.  
    171.     function createGroups() {
    172.  
    173.       // get info about the plotarea to find y position of labels
    174.       var oPlotArea = zingchart.exec('zc', 'getobjectinfo', {
    175.         object: 'plotarea'
    176.       });
    177.  
    178.       // define labels (start and end nodes, text and some styling if needed)
    179.       var aLabels = [{
    180.           nodes: [0, 5],
    181.           data: {
    182.             'text': 'Value'
    183.           }
    184.         },
    185.         {
    186.           nodes: [6, 11],
    187.           data: {
    188.             'text': 'Growth',
    189.             'background-color': 'yellow'
    190.           }
    191.         },
    192.         {
    193.           nodes: [12, 13],
    194.           data: {
    195.             'text': 'Risk'
    196.           }
    197.         },
    198.         {
    199.           nodes: [14, 15],
    200.           data: {
    201.             'text': 'Momentum'
    202.           }
    203.         },
    204.         {
    205.           nodes: [16, 17],
    206.           data: {
    207.             'text': 'Quality'
    208.           }
    209.         }
    210.       ];
    211.  
    212.       var aLabelsData = [];
    213.  
    214.       for (var l = 0; l < aLabels.length; l++) {
    215.         // get information about start and end nodes
    216.         var oNodeStart = zingchart.exec('zc', 'getobjectinfo', {
    217.           object: 'node',
    218.           plotindex: 0,
    219.           nodeindex: aLabels[l].nodes[0]
    220.         });
    221.         var oNodeEnd = zingchart.exec('zc', 'getobjectinfo', {
    222.           object: 'node',
    223.           plotindex: 0,
    224.           nodeindex: aLabels[l].nodes[1]
    225.         });
    226.  
    227.         // create label objects (for text and the grouping box)
    228.         var oLabel = aLabels[l].data;
    229.         oLabel['padding'] = 5;
    230.         oLabel['x'] = oNodeStart.x - 2;
    231.         oLabel['y'] = oPlotArea.y - 35;
    232.         oLabel['width'] = oNodeEnd.x + oNodeEnd.width - oNodeStart.x + 4;
    233.         oLabel['height'] = 20;
    234.         oLabel['font-size'] = Math.round(8 + Math.min(8, oLabel['width'] / 20));
    235.         aLabelsData.push(oLabel);
    236.  
    237.         var oGroup = {};
    238.         oGroup['border-top'] = '1px solid #666';
    239.         oGroup['border-right'] = '1px solid #666';
    240.         oGroup['border-left'] = '1px solid #666';
    241.         oGroup['x'] = oNodeStart.x - 2;
    242.         oGroup['y'] = oPlotArea.y - 12;
    243.         oGroup['width'] = oNodeEnd.x + oNodeEnd.width - oNodeStart.x + 4;
    244.         oGroup['height'] = 8;
    245.         aLabelsData.push(oGroup);
    246.       }
    247.  
    248.       /* for the client side chart */
    249.       zingchart.exec('zc', 'addobject', {
    250.         type: 'label',
    251.         data: aLabelsData
    252.       });
    253.  
    254.       /* for the nodejs version */
    255.       /*
    256.       zingchart.exec('zc', 'addobject', {
    257.           type : 'label',
    258.           data : aLabelsData,
    259.           update : false
    260.       });
    261.       // hack to force repaint since objects API does not repaint in nodejs (this will be fixed in the next public version)
    262.       zingchart.exec('zc', 'modify', {data:{}});
    263.       */
    264.     }
    265.  
    266.     /* for the client side chart */
    267.     zingchart.render({
    268.       id: 'zc',
    269.       data: chartJSON,
    270.       width: 800,
    271.       height: 400,
    272.       events: {
    273.         complete: function() {
    274.           createGroups();
    275.         }
    276.       }
    277.     });
    278.  
    279.     /* for the nodejs version */
    280.     /*
    281.     var bFirstTime = true;
    282.     zingchart.render({
    283.     	id : 'zc',
    284.     	data : chartJSON,
    285.     	width : 800,
    286.     	height : 400,
    287.     	filetype : 'png',
    288.     	filename : 'demo.png',
    289.     	events : {
    290.     		render : function() {
    291.     			if (bFirstTime) {
    292.     				bFirstTime = false;
    293.     				createGroups();
    294.     			}
    295.     		}
    296.     	}
    297.     });
    298.     */
    299.   </script>
    300. </body>
    301.  
    302. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var chartJSON = {
    2.   "graphset": [{
    3.     "chartdescription": "Portfolio Style Skyline&trade;-100-319",
    4.     "title": {},
    5.     "legend": {
    6.       "visible": true,
    7.       "layout": "x3",
    8.       "item": {
    9.         "marker-style": "circle",
    10.         "border-color": "black"
    11.       },
    12.       "position": "50% 98%"
    13.     },
    14.     "scale-x": {
    15.       "label": {},
    16.       "labels": [],
    17.       "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"],
    18.       "item": {
    19.         "font-angle": 340,
    20.         "offset-x": 15,
    21.         "offset-y": -8,
    22.         "auto-align": true,
    23.         "rules": []
    24.       },
    25.       "items-overlap": true,
    26.       "max-items": 200,
    27.       "max-labels": 50,
    28.       "markers": [{
    29.           "type": "line",
    30.           "range": [5.5],
    31.           "line-color": "#cdcdcd"
    32.         },
    33.         {
    34.           "type": "line",
    35.           "range": [11.5],
    36.           "line-color": "#cdcdcd"
    37.         },
    38.         {
    39.           "type": "line",
    40.           "range": [13.5],
    41.           "line-color": "#cdcdcd"
    42.         },
    43.         {
    44.           "type": "line",
    45.           "range": [15.5],
    46.           "line-color": "#cdcdcd"
    47.         }
    48.       ],
    49.       "exact": true
    50.     },
    51.     "scale-y": {
    52.       "label": {
    53.         "text": "Style Tilt ™"
    54.       },
    55.       "item": {
    56.         "rules": []
    57.       },
    58.       "values": "-10:12:2"
    59.     },
    60.     "plot": {
    61.       "tooltip-text": "%k: %v",
    62.       "rules": [{
    63.           "rule": "%i >= 0 && %i <=5",
    64.           "background-color": "#0193CF"
    65.         },
    66.         {
    67.           "rule": "%i >= 6 && %i <=11",
    68.           "background-color": "#3B9067"
    69.         },
    70.         {
    71.           "rule": "%i >= 12 && %i <=13",
    72.           "background-color": "#AB4030"
    73.         },
    74.         {
    75.           "rule": "%i >= 14 && %i <=15",
    76.           "background-color": "#2A2A2A"
    77.         },
    78.         {
    79.           "rule": "%i >= 16 && %i <=17",
    80.           "background-color": "#C9BA3B"
    81.         }
    82.       ],
    83.       "data-id": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
    84.       "data-tooltips-1": [],
    85.       "data-tooltips-2": [],
    86.       "value-box": {
    87.         "visible": false
    88.       },
    89.       "hover-state": {
    90.         "shadow": true,
    91.         "shadow-distance": "3px"
    92.       },
    93.       "exact": 1,
    94.       "max-trackers": 999,
    95.       "offset-values": [],
    96.       "tooltip": {
    97.         "visible": true
    98.       }
    99.     },
    100.     "plotarea": {
    101.       "margin-bottom": 75,
    102.       "margin-top": 40,
    103.       "height": "100%"
    104.     },
    105.     "layout": {
    106.       "layout": "1x2"
    107.     },
    108.     "series": [{
    109.       "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],
    110.       "text": "Portfolio Style Skyline&trade;",
    111.       "effect": 2,
    112.       "target": "_self",
    113.       "url": "javascript:getTiltContributions('Widgets.WebWidgets.WebChartStyleExposure','3b890659-24cd-4d18-9dc2-0be241fb095d','%data-id|%k','UA');",
    114.       "stacked": true,
    115.       "decimals": 2,
    116.       "data-tooltips-3": [],
    117.       "data-tooltips-4": [],
    118.       "type": "bar",
    119.       "marker": {
    120.         "visible": false
    121.       },
    122.       "legend-marker": {
    123.         "visible": false
    124.       },
    125.       "legend-item": {
    126.         "visible": false
    127.       }
    128.     }],
    129.     "options": {
    130.       "tooltip-box": {
    131.         "text-align": ""
    132.       }
    133.     },
    134.     "type": "mixed"
    135.   }]
    136. };
    137.  
    138. function createGroups() {
    139.  
    140.   // get info about the plotarea to find y position of labels
    141.   var oPlotArea = zingchart.exec('zc', 'getobjectinfo', {
    142.     object: 'plotarea'
    143.   });
    144.  
    145.   // define labels (start and end nodes, text and some styling if needed)
    146.   var aLabels = [{
    147.       nodes: [0, 5],
    148.       data: {
    149.         'text': 'Value'
    150.       }
    151.     },
    152.     {
    153.       nodes: [6, 11],
    154.       data: {
    155.         'text': 'Growth',
    156.         'background-color': 'yellow'
    157.       }
    158.     },
    159.     {
    160.       nodes: [12, 13],
    161.       data: {
    162.         'text': 'Risk'
    163.       }
    164.     },
    165.     {
    166.       nodes: [14, 15],
    167.       data: {
    168.         'text': 'Momentum'
    169.       }
    170.     },
    171.     {
    172.       nodes: [16, 17],
    173.       data: {
    174.         'text': 'Quality'
    175.       }
    176.     }
    177.   ];
    178.  
    179.   var aLabelsData = [];
    180.  
    181.   for (var l = 0; l < aLabels.length; l++) {
    182.     // get information about start and end nodes
    183.     var oNodeStart = zingchart.exec('zc', 'getobjectinfo', {
    184.       object: 'node',
    185.       plotindex: 0,
    186.       nodeindex: aLabels[l].nodes[0]
    187.     });
    188.     var oNodeEnd = zingchart.exec('zc', 'getobjectinfo', {
    189.       object: 'node',
    190.       plotindex: 0,
    191.       nodeindex: aLabels[l].nodes[1]
    192.     });
    193.  
    194.     // create label objects (for text and the grouping box)
    195.     var oLabel = aLabels[l].data;
    196.     oLabel['padding'] = 5;
    197.     oLabel['x'] = oNodeStart.x - 2;
    198.     oLabel['y'] = oPlotArea.y - 35;
    199.     oLabel['width'] = oNodeEnd.x + oNodeEnd.width - oNodeStart.x + 4;
    200.     oLabel['height'] = 20;
    201.     oLabel['font-size'] = Math.round(8 + Math.min(8, oLabel['width'] / 20));
    202.     aLabelsData.push(oLabel);
    203.  
    204.     var oGroup = {};
    205.     oGroup['border-top'] = '1px solid #666';
    206.     oGroup['border-right'] = '1px solid #666';
    207.     oGroup['border-left'] = '1px solid #666';
    208.     oGroup['x'] = oNodeStart.x - 2;
    209.     oGroup['y'] = oPlotArea.y - 12;
    210.     oGroup['width'] = oNodeEnd.x + oNodeEnd.width - oNodeStart.x + 4;
    211.     oGroup['height'] = 8;
    212.     aLabelsData.push(oGroup);
    213.   }
    214.  
    215.   /* for the client side chart */
    216.   zingchart.exec('zc', 'addobject', {
    217.     type: 'label',
    218.     data: aLabelsData
    219.   });
    220.  
    221.   /* for the nodejs version */
    222.   /*
    223.   zingchart.exec('zc', 'addobject', {
    224.       type : 'label',
    225.       data : aLabelsData,
    226.       update : false
    227.   });
    228.   // hack to force repaint since objects API does not repaint in nodejs (this will be fixed in the next public version)
    229.   zingchart.exec('zc', 'modify', {data:{}});
    230.   */
    231. }
    232.  
    233. /* for the client side chart */
    234. zingchart.render({
    235.   id: 'zc',
    236.   data: chartJSON,
    237.   width: 800,
    238.   height: 400,
    239.   events: {
    240.     complete: function() {
    241.       createGroups();
    242.     }
    243.   }
    244. });
    245.  
    246. /* for the nodejs version */
    247. /*
    248. var bFirstTime = true;
    249. zingchart.render({
    250. 	id : 'zc',
    251. 	data : chartJSON,
    252. 	width : 800,
    253. 	height : 400,
    254. 	filetype : 'png',
    255. 	filename : 'demo.png',
    256. 	events : {
    257. 		render : function() {
    258. 			if (bFirstTime) {
    259. 				bFirstTime = false;
    260. 				createGroups();
    261. 			}
    262. 		}
    263. 	}
    264. });
    265. */