We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Read more about our Privacy Policy and Cookie Policy
<html><head><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-sparkline.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-table.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/themes/wines.min.js"></script><linkhref="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css"type="text/css"rel="stylesheet"><linkhref="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css"type="text/css"rel="stylesheet"><styletype="text/css">html,
body,
#container{width: 100%;height: 100%;margin: 0;padding: 0;}</style></head><body><divid="container"></div><script>
anychart.onDocumentReady(function(){// set chart theme
anychart.theme('wines');// 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 demovar fontFamilyText ='\'Verdana\', Helvetica, Arial, sans-serif';var headerFontColor ='#545f69';var borderColor ='#CECECE';// create table for sparkline charts layoutvar 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.
*/functioncreateLine(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.
*/functioncreateColumn(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;}</script></body></html>
Sparklines are
tiny charts, usually displayed with no axes or grids. Sparklines display trends direction; changes
of temperature, rates or prices, in a simplified and condensed form. Sometimes they are shown inline or put
together in a table cells. Most of the charts are supposed to show as much information as possible, but
sparklines are designed to show as less as possible without loss of information content.
There are a number of series types which can be included in sparkline charts. One of them is column series.
In this dashboard we have a layout table with seven columns. First is for regions
(states), then the value of the monthly sales volume in dollars, then there is a column with line sparklines, showing the trend; the fourth column shows the plan progress in
percents; the next contains sparklines with 12 columns in each, where each column represents monthly sales. The
sixth column is gross margin in dollars; and the last contains column sparklines, were each represents
profit trends for each month of the next year.