<!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>