anychart.onDocumentReady(function () {
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/samples/sparkline-charts/column-chart/data.json
anychart.data.loadJsonFile('https://cdn.anychart.com/samples/sparkline-charts/column-chart/data.json', function (data) {
// set of colors and fonts used in this demo
var fontFamilyText = "'Verdana', Helvetica, Arial, sans-serif";
var headerFontColor = '#545f69';
var borderColor = '#CECECE';
// create table for sparkline charts layout
var table = anychart.standalones.table();
// set table size settings
table.bounds('5%', '20px', '90%', '90%');
// set table contents (sparkline charts and text)
table.contents([
['Region', 'Actual Sales (mn)', null, null, '% to\nGoal', '12 Month', null, 'Gross\nMargin', 'Profit Trend\n12 Month'],
['Alabama', '$4,916', createLine(data['alabama'], 'actualSales'), null, '107%', createColumn(data['alabama'], 'toGoal'), null, '$1,172', createColumn(data['alabama'], 'profitTrend')],
['Alaska', '$3,916', createLine(data['alaska'], 'actualSales'), null, '65%', createColumn(data['alaska'], 'toGoal'), null, '-$791', createColumn(data['alaska'], 'profitTrend')],
['Arizona', '$4,916', createLine(data['arizona'], 'actualSales'), null, '103%', createColumn(data['arizona'], 'toGoal'), null, '$1,010', createColumn(data['arizona'], 'profitTrend')],
['Idaho', '$5,916', createLine(data['idaho'], 'actualSales'), null, '101%', createColumn(data['idaho'], 'toGoal'), null, '$1,030', createColumn(data['idaho'], 'profitTrend')],
['Illinois', '$4,916', createLine(data['illinois'], 'actualSales'), null, '92%', createColumn(data['illinois'], 'toGoal'), null, '-$90', createColumn(data['illinois'], 'profitTrend')],
['Indiana', '$5,916', createLine(data['indiana'], 'actualSales'), null, '89%', createColumn(data['indiana'], 'toGoal'), null, '-$139', createColumn(data['indiana'], 'profitTrend')],
['Ohio', '$5,916', createLine(data['ohio'], 'actualSales'), null, '113%', createColumn(data['ohio'], 'toGoal'), null, '$1,196', createColumn(data['ohio'], 'profitTrend')],
['Oklahoma', '$4,916', createLine(data['oklahoma'], 'actualSales'), null, '81%', createColumn(data['oklahoma'], 'toGoal'), null, '-$127', createColumn(data['oklahoma'], 'profitTrend')],
['Oregon', '$6,916', createLine(data['oregon'], 'actualSales'), null, '92%', createColumn(data['oregon'], 'toGoal'), null, '-$16', createColumn(data['oregon'], 'profitTrend')],
['Vermont', '$4,916', createLine(data['vermont'], 'actualSales'), null, '118%', createColumn(data['vermont'], 'toGoal'), null, '$1,240', createColumn(data['vermont'], 'profitTrend')],
['Virginia', '$7,916', createLine(data['virginia'], 'actualSales'), null, '192%', createColumn(data['virginia'], 'toGoal'), null, '$4,172', createColumn(data['virginia'], 'profitTrend')],
['Washington', '$5,916', createLine(data['washington'], 'actualSales'), null, '69%', createColumn(data['washington'], 'toGoal'), null, '-$390', createColumn(data['washington'], 'profitTrend')]
]);
// span [0,1] and [0,2] cell
table.getCell(0, 1).colSpan(2);
// disable borders for all cells in the table
table.cellBorder(null);
// set dashed bottom border for all cells in the table
table.cellBorder().bottom({color: borderColor, dash: '1 1'});
// set default text settings for the table
table.hAlign('center')
.vAlign('middle')
.fontSize('12px')
.fontFamily(fontFamilyText);
// set fixed height for the first row
table.getRow(0).height(40).fontColor(headerFontColor);
// set fixed width for some of the tables columns
table.getCol(0).width(90).hAlign('left');
table.getCol(1).width(65);
table.getCol(3).width(20).cellBorder().bottom('none');
table.getCol(4).width(65);
table.getCol(6).width(20).cellBorder().bottom('none');
table.getCol(7).width(65);
// set container id for the table
table.container('container');
// draw the table and all elements it contains
//(you don't need to call the draw method for internal tables and charts)
table.draw();
});
});
/**
* Helper function, creates sparkline chart with Line type using anychart.sparkline method,
* sets passed data and visual preference.
* @param {Object.<string, Array>} data Sparkline data.
* @param {string} field Data field
* @return {anychart.charts.Sparkline} New sparkline chart with passed data.
*/
function createLine(data, field) {
var sparkline = anychart.sparkline(data[field]);
sparkline.seriesType('line');
sparkline.height('100%');
sparkline.margin().top('5%');
sparkline.margin().bottom('5%');
sparkline.padding(0);
return sparkline;
}
/**
* Helper function, creates sparkline chart with Bar type using anychart.sparkline method,
* sets passed data and visual preference.
* @param {Object.<string, Array>} data Sparkline data.
* @param {string} field Data field
* @return {anychart.charts.Sparkline} New sparkline chart with passed data.
*/
function createColumn(data, field) {
var sparkline = anychart.sparkline(data[field]);
sparkline.seriesType('column');
sparkline.height('100%');
sparkline.margin().top('5%');
sparkline.margin().bottom('5%');
sparkline.padding(0);
return sparkline;
}
