function callbackFuncWithData(data) {
$.each(data, function (i, item) {
// ROW TEMPLATE
var divRow = $(document.createElement("div"));
$(divRow).addClass('row clearfix grid-row');
$(divRow).attr('id', i);
$('.container-fluid').append(divRow);
// STOCK DETAIL TEMPLATE
var divStock = $(document.createElement("div"));
$(divStock).addClass('col-md-2 column ui-sortable');
$(divRow).append(divStock);
// STOCK TEXT TEMPLATE
var divText = $(document.createElement("div"));
$(divText).addClass('col-md-4 column ui-sortable stock-text');
$(divRow).append(divText);
// SIGNALS TEMPLATE
var divStampRow = $(document.createElement("div"));
$(divStampRow).addClass('col-md-6 column ui-sortable');
$(divRow).append(divStampRow);
var stockId = data[i].otasSecurityId;
// STOCK DETAILS
window.otasBase.data.v1.stock(stockId)(function (stock) {
$(divStock).stockDescriptor({
stock: stock,
small: true
});
});
// STOCK TEXT
window.otasBase.data.v1.stock(stockId).naturalLanguage({
topic: 'priceperformance',
format: 'html'
}, function (text) {
$(divText).naturalLanguage({
text: text
});
})
window.otasBase.data.v1.stock(stockId).stockStamps({
stock: stockId,
topic: 'performance',
isHeader: true
}, function (stamp) {
var divPerfStamp = $(document.createElement("div"));
$(divPerfStamp).addClass('svgDiv-grid');
$(divPerfStamp).stockStamp({
stock: stamp
});
$(divStampRow).append(divPerfStamp);
})
// STOCK STAMPS
var stamps = item.stamps;
$.each(stamps, function (i, stmp) {
var stampType = stmp.type;
var stampTemplate = stmp.template;
var stampData = stmp.data;
$.each(stampData, function (i, attr) {
var stampColor = attr.color;
var stampTitle = attr.title;
var stampValue = attr.value;
var stampValueHeader = attr.valueHeader;
var stampZscore = attr.zScore;
//console.log(stampType + " " + stampTemplate + " " + stampColor + " " + stampTitle);
if (stampType == 'custom') {
window.otasBase.data.v1.customstamp({
type: stampType,
title: stampTitle,
value: stampValue,
valueheader: stampValueHeader,
zscore: stampZscore,
color: stampColor
}, function (stamp) {
var divStamp = $(document.createElement("div"));
$(divStamp).addClass('svgDiv-grid');
$(divStamp).stockStamp({
stock: stamp
});
$(divStampRow).append(divStamp);
})
}
});
});
});
}
// GET CUSTOM DATA
//$.getJSON('//base.otastech.com/library/1.0/js/custom-data.json', callbackFuncWithData);
var strJSON = "[{\"otasSecurityId\":\"OT.VOD.S\",\"stamps\":[{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag1\",\"valueHeader\":\"MyData\",\"value\":18.55,\"zScore\":0,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag2\",\"valueHeader\":\"MyData\",\"value\":85.26,\"zScore\":1,\"color\":\"Red\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag3\",\"valueHeader\":\"MyData\",\"value\":129.45,\"zScore\":1.5,\"color\":\"Green\"}]}]},{\"otasSecurityId\":\"OT.MKS.S\",\"stamps\":[{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag1\",\"valueHeader\":\"MyData\",\"value\":102.85,\"zScore\":-2,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag2\",\"valueHeader\":\"MyData\",\"value\":205.35,\"zScore\":-1.5,\"color\":\"Red\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag3\",\"valueHeader\":\"MyData\",\"value\":89.64,\"zScore\":1.5,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag4\",\"valueHeader\":\"MyData\",\"value\":72.63,\"zScore\":1.5,\"color\":\"Green\"}]}]},{\"otasSecurityId\":\"OT.05.S\",\"stamps\":[{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag1\",\"valueHeader\":\"MyData\",\"value\":785.52,\"zScore\":1.5,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag2\",\"valueHeader\":\"MyData\",\"value\":78.59,\"zScore\":-1,\"color\":\"Red\"}]}]},{\"otasSecurityId\":\"OT.AAL.S\",\"stamps\":[{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag1\",\"valueHeader\":\"MyData\",\"value\":36.02,\"zScore\":-2,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag2\",\"valueHeader\":\"MyData\",\"value\":136.6,\"zScore\":-2,\"color\":\"Red\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag3\",\"valueHeader\":\"MyData\",\"value\":45.23,\"zScore\":1.5,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag4\",\"valueHeader\":\"MyData\",\"value\":824.75,\"zScore\":1,\"color\":\"Green\"}]}]},{\"otasSecurityId\":\"OT.ARM_1.S\",\"stamps\":[{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag1\",\"valueHeader\":\"MyData\",\"value\":84.25,\"zScore\":-1.5,\"color\":\"Green\"}]}]},{\"otasSecurityId\":\"OT.AV.S\",\"stamps\":[{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag1\",\"valueHeader\":\"MyData\",\"value\":71.63,\"zScore\":1.5,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag2\",\"valueHeader\":\"MyData\",\"value\":25.25,\"zScore\":1,\"color\":\"Red\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag3\",\"valueHeader\":\"MyData\",\"value\":253.65,\"zScore\":2,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag4\",\"valueHeader\":\"MyData\",\"value\":225.85,\"zScore\":-1.5,\"color\":\"Red\"}]}]},{\"otasSecurityId\":\"OT.AZN.S\",\"stamps\":[{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag1\",\"valueHeader\":\"MyData\",\"value\":12.25,\"zScore\":-1.5,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag2\",\"valueHeader\":\"MyData\",\"value\":523.25,\"zScore\":-2.0,\"color\":\"Red\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag3\",\"valueHeader\":\"MyData\",\"value\":78.36,\"zScore\":-2.0,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag4\",\"valueHeader\":\"MyData\",\"value\":253.25,\"zScore\":-1.0,\"color\":\"Green\"}]}]},{\"otasSecurityId\":\"OT.BATS.S\",\"stamps\":[{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag1\",\"valueHeader\":\"MyData\",\"value\":72.01,\"zScore\":1,\"color\":\"Green\"}]},{\"type\":\"custom\",\"template\":\"boxWhisker\",\"data\":[{\"title\":\"My Flag2\",\"valueHeader\":\"MyData\",\"value\":405.25,\"zScore\":-2,\"color\":\"Red\"}]}]}]";
callbackFuncWithData(eval("(" + strJSON + ")"));
<link rel="stylesheet" href="//base.otastech.com/library/1.0/css/otasbase.min.css">
<link href="//base.otastech.com/library/1.0/css/otasbase-bootstrap.css" rel="stylesheet">
<script src="//base.otastech.com/library/1.0/js/jquery.min.js"></script>
<script src="//base.otastech.com/library/1.0/js/bootstrap.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//base.otastech.com/library/1.0/js/otasbase.min.js"></script>
<script>
window.otasBase.data.apiKey = "556DA8B3A38CDEFA8F84E5241F65C";
</script>
<div class="container-fluid dashboard">
<div class="row clearfix grid-row" id="stockInfo">
<div class="col-md-2 column ui-sortable" id="stocks">
<p style="text-align:left;font-family:Verdana;font-size:12px !important;margin-top:0;">Stock Detail</p>
</div>
<div class="col-md-4 column ui-sortable">
<p style="text-align:left;font-family:Verdana;font-size:12px !important;margin-top:0;">OTAS Natural Language</p>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-md-6 column ui-sortable" id="stamps">
<p style="text-align:left;font-family:Verdana;font-size:12px !important;margin-top:0;">Signals</p>
</div>
</div>
</div>
body{
padding-top: 0 !important;
}
.stock-descriptor{
background: none !important;
}