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