<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
var t1 = [1, -1, 1, 1, -1, 1, 1, 1, -1, 1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, 1, -1, 1];
var t2 = [-1, 1, 1, -1, -1, -1, 1, 1, -1, 1, -1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, -1, -1, 1, -1, -1, 1, -1];
var t3 = [1, 1, 1, -1, 1, -1, 1, 1, -1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, 1, -1, -1, -1, 1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1];
var t4 = [1, -1, 1, 1, 1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, -1, 1, -1, 1, -1, -1, -1, 1, -1, -1, 1, 1, 1, -1, -1, -1, -1, -1, -1];
var t5 = [-1, 1, -1, 1, 1, -1, 1, -1, -1, 1, -1, -1, -1, -1, 1, 1, 1, -1, 1, -1, -1, -1, -1, 1, 1, 1, 1, -1, 1, 1, 1, 1, -1, -1, -1, -1, -1, 1];
var t6 = [-1, -1, -1, -1, -1, -1, -1, 1, 1, -1, -1, 1, -1, 1, -1, 1, 1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, -1, 1, 1];
var t7 = [-1, 1, -1, 1, 1, -1, -1, -1, -1, -1, 1, 1, 1, -1, 1, -1, 1, -1, 1, 1, 1, -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, 1, 1, 1, -1, -1, 1];
var t8 = [-1, 1, 1, -1, 1, 1, 1, -1, 1, 1, -1, 1, 1, 1, 1, -1, -1, -1, -1, -1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, 1, -1, -1, -1, -1, -1, 1, -1];
var t9 = [1, -1, 1, 1, -1, 1, -1, -1, -1, -1, 1, 1, -1, -1, -1, -1, -1, 1, 1, -1, -1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, -1, 1, -1, -1, -1];
var t10 = [1, -1, 1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1];
var t11 = [1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, -1, 1, 1, -1, -1, -1, -1, -1, -1, 1, -1, -1, 1, 1, 1, 1, 1, 1, -1, -1];
var t12 = [-1, 1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, -1, 1, 1, -1, -1, 1, -1, -1, -1, 1];
var t13 = [1, -1, -1, 1, -1, -1, -1, -1, -1, 1, 1, -1, 1, 1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, -1, 1, 1, -1, -1, -1, 1, -1, 1, 1, -1, -1, 1, -1];
var t14 = [-1, -1, -1, 1, 1, -1, 1, 1, 1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, -1, 1, 1, 1, -1, -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, -1, -1, -1];
var t15 = [-1, 1, 1, 1, 1, 1, -1, 1, -1, -1, -1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, -1, -1, -1, -1, 1, -1, 1];
var t16 = [-1, -1, -1, -1, -1, -1, -1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, -1, -1, -1, 1, -1, 1, -1, 1, -1, -1, -1, 1, -1, -1, -1, 1, 1, -1, -1];
var t17 = [-1, -1, -1, -1, -1, -1, 1, -1, 1, 1, 1, -1, -1, -1, -1, -1, -1, -1, 1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, 1, -1];
var t18 = [-1, -1, -1, 1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 1, -1, -1, -1, 1, -1, -1, -1, 1, -1, 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1, -1, -1];
var t19 = [1, -1, -1, -1, 1, 1, -1, 1, -1, 1, -1, -1, 1, -1, -1, -1, -1, -1, 1, -1, 1, -1, -1, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, -1, -1, -1];
var t20 = [-1, -1, -1, -1, -1, -1, -1, 1, -1, -1, 1, -1, -1, -1, 1, -1, -1, 1, -1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, -1, -1, -1, 1, -1, 1, -1, -1, 1];
table = anychart.ui.table();
table.container('container');
table.bounds('5%', '20px', '90%', '90%');
table.contents([
['Team', null, 'W', 'L', 'History', 'Percent'],
['1.', 'Liverpool', getWins(t1), getLoses(t1), createWinLoss(t1), getPercent(t1)],
['2.', 'Fulham', getWins(t2), getLoses(t2), createWinLoss(t2), getPercent(t2)],
['3.', 'Chelsea', getWins(t3), getLoses(t3), createWinLoss(t3), getPercent(t3)],
['4.', 'Man United', getWins(t4), getLoses(t4), createWinLoss(t4), getPercent(t4)],
['5.', 'Bolton', getWins(t5), getLoses(t5), createWinLoss(t5), getPercent(t5)],
['6.', 'Blackburn', getWins(t6), getLoses(t6), createWinLoss(t6), getPercent(t6)],
['7.', 'Wigan Athletic', getWins(t7), getLoses(t7), createWinLoss(t7), getPercent(t7)],
['8.', 'West Ham United', getWins(t8), getLoses(t8), createWinLoss(t8), getPercent(t8)],
['9.', 'Charlton', getWins(t9), getLoses(t9), createWinLoss(t9), getPercent(t9)],
['10.', 'Arsenal', getWins(t10), getLoses(t10), createWinLoss(t10), getPercent(t10)],
['11.', 'Sunderland', getWins(t11), getLoses(t11), createWinLoss(t11), getPercent(t11)],
['12.', 'Aston Villa', getWins(t12), getLoses(t12), createWinLoss(t12), getPercent(t12)],
['13.', 'Tottenham', getWins(t13), getLoses(t13), createWinLoss(t13), getPercent(t13)],
['14.', 'Everton', getWins(t14), getLoses(t14), createWinLoss(t14), getPercent(t14)],
['15.', 'West Bromwich', getWins(t15), getLoses(t15), createWinLoss(t15), getPercent(t15)],
['16.', 'Portsmouth', getWins(t16), getLoses(t16), createWinLoss(t16), getPercent(t16)],
['17.', 'Middlesbrough', getWins(t17), getLoses(t17), createWinLoss(t17), getPercent(t17)],
['18.', 'Newcastle', getWins(t18), getLoses(t18), createWinLoss(t18), getPercent(t18)],
['19.', 'Birmingham City', getWins(t19), getLoses(t19), createWinLoss(t19), getPercent(t19)],
['20.', 'Manchester City', getWins(t20), getLoses(t20), createWinLoss(t20), getPercent(t20)]
]);
table.getCell(0, 0).colSpan(2);
table.getCell(0, 0).content().hAlign('left');
table.getCell(0, 0).content().padding(0,0,0,45);
table.cellBorder('none');
table.cellFill('#F6F7F8');
table.cellOddFill('#FFF');
table.cellTextFactory().fontFamily('Verdana');
table.cellTextFactory().fontColor('#555');
table.cellTextFactory().fontSize('13px');
table.cellTextFactory().vAlign('center');
table.cellTextFactory().hAlign('center');
table.colWidth(0, 40);
table.colWidth(1, 120);
table.colWidth(2, 40);
table.colWidth(3, 40);
table.colWidth(5, 70);
setupRowProp(table, 0, 'fill', '#e9eaed');
setupRowProp(table, 0, ['content', 'fontColor'], '#999999');
setupColProp(table, 0, ['content', 'fontColor'], '#999999', 1);
setupColProp(table, 1, ['content', 'hAlign'], 'left');
setupColProp(table, 1, ['content', 'fontSize'], '12px');
setupColProp(table, 2, ['content', 'fontColor'], '#ffa715', 1);
setupColProp(table, 2, ['content', 'fontSize'], '13px', 1);
setupColProp(table, 3, ['content', 'fontColor'], '#60cae1', 1);
setupColProp(table, 3, ['content', 'fontSize'], '13px', 1);
table.draw();
function createWinLoss(array) {
var chart = anychart.sparkline(array);
chart.type('winLoss');
chart.height('100%');
chart.margin().top('5%');
chart.margin().bottom('5%');
chart.padding(0);
chart.fill('#ffa715');
chart.negativeFill('#60cae1');
return chart;
}
function getWins(array) {
var wins = 0;
for (var i = 0, count = array.length - 1; i < count; i++) {
if (array[i] > 0) wins++;
}
return wins;
}
function getLoses(array) {
var loses = 0;
for (var i = 0, count = array.length - 1; i < count; i++) {
if (array[i] < 0) loses++;
}
return loses;
}
function getPercent(array) {
var wins = 0;
var total = array.length;
for (var i = 0, count = array.length - 1; i < count; i++) {
if (array[i] > 0) wins++;
}
return Math.round(wins / total * 100) + '%';
}
function setupColProp(table, colIndex, propNameOrChain, propValueOrArray, opt_startFrom) {
// if passed column index is out of passed table - exit
if (colIndex >= table.colsCount()) return;
// normalize propNameOrChain to an array handle in one way
if (typeof propNameOrChain == 'string') propNameOrChain = [propNameOrChain];
// cache last chain index
var chainLastIndex = propNameOrChain.length - 1;
for (var i = (opt_startFrom == undefined) ? 0 : opt_startFrom; i < table.rowsCount(); i++) {
// get the cell
var prop = table.getCell(i, colIndex);
// pass over the cell to the last but one property
for (var j = 0; j < chainLastIndex; j++) {
var name = propNameOrChain[j];
if (name in prop)
prop = prop[name]();
else
prop = null;
if (!prop) break;
}
var lastName = propNameOrChain[chainLastIndex];
// if property getter returns null, or there is no such property to call, we skip the cell
if (!prop || !(lastName in prop)) continue;
// a way to check if propValueOrArray is an array - if it is, we call apply to pass all array elements to a setter
if (propValueOrArray != null && typeof propValueOrArray != 'string' && typeof propValueOrArray.length == 'number')
prop[lastName].apply(prop, propValueOrArray);
// or just call the setter with one parameter
else
prop[lastName](propValueOrArray);
}
}
/**
* Utility function to setup property to a whole row. Samples of usage:
* 1) setupRowProp(table, 0, ['content', 'padding', 'left'], 10);
* Sets left padding of cell content in row 0 to 10 if there is a content, where left padding can be set in cells.
* So its equivalent to call cell.content().padding().left(10) for all cells in 0 row.
* 2) setupRowProp(table, 1, 'padding', [0, 1, 2, 3]);
* Sets padding of all cells in the 1 row to (0, 1, 2, 3).
* Its equivalent to call cell.padding(0, 1, 2, 3) for all cells in row 1.
* This two ways of usage can be combined, for example:
* setupRowProp(table, 0, ['content', 'padding'], [1, 2, 3, 4]);
* It is equivalent to calling cell.content().padding(1, 2, 3, 4) for all cells in row 0.
* This method fails if the property chain is incorrect (for example there is no such property you ask).
* @param {anychart.ui.table} table Table to setup row for.
* @param {number} rowIndex Row index.
* @param {!Array.<string>|string} propNameOrChain Property name to access, like 'border' or chain of property names
* to access, e.g. ['content', 'fontSize']. Note: no checking on valid results is done, so it's up to you to
* ensure property existence.
* @param {*|Array.<*>} propValueOrArray Value or array of values to set.
*/
function setupRowProp(table, rowIndex, propNameOrChain, propValueOrArray) {
// if passed row index is out of passed table - exit
if (rowIndex >= table.rowsCount()) return;
// normalize propNameOrChain to an array handle in one way
if (typeof propNameOrChain == 'string') propNameOrChain = [propNameOrChain];
// cache last chain index
var chainLastIndex = propNameOrChain.length - 1;
// for all column indexes in the table
for (var i = 0; i < table.colsCount(); i++) {
// get the cell
var prop = table.getCell(rowIndex, i);
// pass over the cell to the last but one property
for (var j = 0; j < chainLastIndex; j++) {
var name = propNameOrChain[j];
if (name in prop)
prop = prop[name]();
else
prop = null;
if (!prop) break;
}
var lastName = propNameOrChain[chainLastIndex];
// if property getter returns null, or there is no such property to call, we skip the cell
if (!prop || !(lastName in prop)) continue;
// a way to check if propValueOrArray is an array - if it is, we call apply to pass all array elements to a setter
if (propValueOrArray != null && typeof propValueOrArray != 'string' && typeof propValueOrArray.length == 'number')
prop[lastName].apply(prop, propValueOrArray);
// or just call the setter with one parameter
else
prop[lastName](propValueOrArray);
}
}
});
</script>
</body>
</html>