<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" 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™-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™",
"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™-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™",
"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();
}
}
}
});
*/