<!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 data = [7, 12, 16, 8, 11, 7, 5, 7, 12, 13, 16, 15]; var salesData = [ [4.87,7.36,3.85,2.15,6.10,3.04,6.05,5.48,3.49,4.68,4.64], ] table = anychart.ui.table(); table.bounds('5%', '20px', '90%', '90%'); table.container('container'); table.contents([ ['Region', 'Actual Sales (mn)', null, null, '% to Goal', '12 Month', null, 'Gross Margin\n(mn)', 'Profit Trend\n12 Month'], ['Alabama', '$4,916', createLine(salesData[0]), null, '107%', createColumn(data), null, '$1,172', createColumn(data)], ['Alaska', '$3,916', createLine(data), null, '65%', createColumn(data), null, '-$791', createColumn(data)], ['Arizona', '$4,916', createLine(data), null, '103%', createColumn(data), null, '$1,010', createColumn(data)], ['Idaho', '$5,916', createLine(data), null, '101%', createColumn(data), null, '$1,030', createColumn(data)], ['Illinois', '$4,916', createLine(data), null, '92%', createColumn(data), null, '-$90', createColumn(data)], ['Indiana', '$5,916', createLine(data), null, '89%', createColumn(data), null, '-$139', createColumn(data)], ['Ohio', '$5,916', createLine(data), null, '113%', createColumn(data), null, '$1,196', createColumn(data)], ['Oklahoma', '$4,916', createLine(data), null, '81%', createColumn(data), null, '-$127', createColumn(data)], ['Oregon', '$6,916', createLine(data), null, '92%', createColumn(data), null, '-$16', createColumn(data)], ['Vermont', '$4,916', createLine(data), null, '118%', createColumn(data), null, '$1,240', createColumn(data)], ['Virginia', '$7,916', createLine(data), null, '192%', createColumn(data), null, '$4,172', createColumn(data)], ['Washington', '$5,916', createLine(data), null, '69%', createColumn(data), null, '-$390', createColumn(data)] ]); var fontFamilyText = 'Verdana'; var mainHeaderFontColor = '#A9A9A9'; var contentFontColor = '#292929'; var countryFontColor = '#767676'; var borderColor = '#E6ECF1'; table.cellTextFactory().hAlign('right'); table.cellTextFactory().vAlign('center'); table.cellTextFactory().fontSize('13px'); table.cellTextFactory().fontFamily(fontFamilyText); table.getCell(0, 1).colSpan(2); table.cellBorder(null); setupRowProp(table, 0, 'bottomBorder', borderColor); setupRowProp(table, 0, ['content', 'fontColor'], mainHeaderFontColor); table.getCell(0, 3).border(null); table.getCell(0, 6).border(null); table.rowHeight(0, 40); table.colWidth(0, 90); table.colWidth(1, 60); table.colWidth(3, 15); table.colWidth(4, 54); table.colWidth(6, 15); table.colWidth(7, 54); setupRowProp(table, 0, ['content', 'hAlign'], 'center'); setupColProp(table, 0, ['content', 'hAlign'], 'left', 0); setupColProp(table, 0, ['content', 'fontColor'], countryFontColor, 1); setupColProp(table, 0, 'bottomBorder', {color: borderColor, dash: '1 1'}, 1); setupColProp(table, 1, 'bottomBorder', {color: borderColor, dash: '1 1'}, 1); setupColProp(table, 1, ['content', 'hAlign'], 'center', 1); setupColProp(table, 1, ['content', 'fontSize'], '11px', 1); setupColProp(table, 1, ['content', 'fontColor'], contentFontColor, 1); setupColProp(table, 2, 'bottomBorder', {color: borderColor, dash: '1 1'}, 1); setupColProp(table, 4, 'bottomBorder', {color: borderColor, dash: '1 1'}, 1); setupColProp(table, 4, ['content', 'hAlign'], 'center', 1); setupColProp(table, 4, ['content', 'fontSize'], '11px', 1); setupColProp(table, 4, ['content', 'fontColor'], contentFontColor, 1); setupColProp(table, 5, 'bottomBorder', {color: borderColor, dash: '1 1'}, 1); setupColProp(table, 7, 'bottomBorder', {color: borderColor, dash: '1 1'}, 1); setupColProp(table, 7, ['content', 'hAlign'], 'center', 1); setupColProp(table, 7, ['content', 'fontSize'], '11px', 1); setupColProp(table, 7, ['content', 'fontColor'], contentFontColor, 1); setupColProp(table, 8, 'bottomBorder', {color: borderColor, dash: '1 1'}, 1); setupRowProp(table, 0, ['content', 'vAlign'], 'center'); table.getCell(0, 1).content().hAlign('left'); table.draw(); function createLine(array) { var sparkline = anychart.sparkline(array); sparkline.height('100%'); sparkline.margin().top('5%'); sparkline.margin().bottom('5%'); sparkline.padding(0); sparkline.stroke('1px #A9A9A9'); return sparkline; } function createColumn(array) { var sparkline = anychart.sparkline(array); sparkline.type('column'); sparkline.height('100%'); sparkline.margin().top('5%'); sparkline.margin().bottom('5%'); sparkline.padding(0); sparkline.fill('#82BECA'); return sparkline; } /** * 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); } } /** * Utility function to setup property to a whole column. Samples of usage: * 1) setupColProp(table, 0, ['content', 'padding', 'left'], 10); * Sets left padding of cell content in column 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 column 0. * 2) setupColProp(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 column 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 column 0. * If the last parameter is set to true, than the first row (that can be a header row) will be skipped. * This method fails if the property chain is incorrect (for example there is no such property you ask). * @param {anychart.core.ui.Table} table Table to setup row for. * @param {number} colIndex 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. * @param {number=} opt_startFrom Set true to skip first row. */ 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); } } }); </script> </body> </html>