<!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 stage = anychart.graphics.create('container');
var sessions = [59, 89, 150, 148, 128, 104, 102, 89, 93, 116, 159, 164, 139, 130, 115, 128, 117, 111, 161, 134, 124, 105, 111, 119, 104, 100, 90, 93, 62, 53, 59, 53];
var last_month_sessions = [53, 87, 140, 144, 138, 114, 107, 102, 89, 80, 151, 134, 129, 111, 95, 108, 82, 92, 132, 104, 125, 131, 112, 117, 104, 90, 93, 89, 61, 48, 51, 58];
var uniqueSessions = [3, 12, 5, 14, 7, 7, 10, 11, 6, 12, 7, 6, 9, 12, 2, 7, 8, 6, 9, 13, 16, 9, 8, 6, 7, 8, 7, 9, 3, 7, 5, 3, 9, 2, 3, 7, 10, 11, 9, 16, 9, 8, 4, 9, 7, 4, 9, 8, 7, 3];
var pageSessions = [40, 35, 32, 33, 36, 29, 39, 27, 35, 37, 36, 27, 32, 34, 27, 30, 37, 38, 40, 40, 33, 28, 28, 31, 36, 26, 32, 30, 38, 38, 26, 29, 29, 40, 36, 34, 34];
var pageToSession = [2, 3, 1, 3, 3, 9, 5, 8, 3, 7, 7, 8, 4, 3, 5, 5, 2, 4, 5, 7];
var newSessions = [3, 14, 6, 6, 11, 7, 14, 4, 8, 11, 12, 11, 12, 7, 11, 13, 2, 2, 13, 7];
var bonusRate = [4.4, 5.2, 5.1, 12.4, 3.5, 7.9, 12.7, 9.3, 5.2, 10.2, 14.7, 5.1, 8.9, 11.8, 2.9, 3.1, 14.3, 10.9, 11.4, 5.2, 9.9, 3.8, 14.1, 8.8, 5.2, 14.0, 5.3];
var avgTime = [1339, 1042, 644, 1040, 751, 1058, 732, 1010, 794, 1136, 526, 1782, 1731, 1303, 1785, 1907, 575, 734, 1216, 617, 1235, 833, 541, 501, 832, 1292, 1710, 862, 798, 940];
var directTraffic = [6285, 7587, 6954, 8476, 6106, 3516, 10986, 5248, 11380, 7944, 10086, 10066, 6465, 3447, 3291, 10844, 6044, 11223, 11911, 5364, 6616, 10525, 3398, 7230, 6725, 10368, 3213, 11459, 8119, 11623, 5177, 3896, 10585, 8660, 10703];
var referringSites = [7811, 9167, 5938, 10367, 10763, 6300, 5302, 5559, 9168, 8646, 11818, 10547, 3731, 3782, 5046, 10633, 9236, 10412, 5099, 8822, 8473, 9464, 10367, 9716, 5055];
var searchEngine = [4882, 8764, 8253, 10828, 7552, 5590, 10499, 4442, 8049, 4151, 4966, 5143, 11362, 4027, 6539, 11066, 10455, 7022, 7379, 10830, 4658, 5411, 7005, 10265, 5032];
var goal1 = [7954, 7579, 7907, 5282, 8250, 4250, 11659, 6666, 4177, 4553, 8792, 4246, 10460, 3971, 11234, 8042, 4944, 3979, 9441, 7452, 5914, 4618, 10418, 10156, 6553];
var goal2 = [11957, 6659, 5008, 11875, 9383, 10869, 4610, 9494, 6255, 6193, 9740, 5235, 4568, 4476, 4370, 3884, 6532, 6152, 5673, 8410, 3057, 9749, 6224, 4628, 6839];
var brightDarkColor = '#212121';
var mainFontColor = '#727272';
var lightFontColor = '#b6b6b6';
var axisColor = '#F0F0F0';
var lineColor = '#1976D2';
var lightLineColor = '#BBDEFB';
var superLightLineColor = '#D6EBFD';
var minMarkerColor = '#FF9800';
var minMarkerColorStroke = '#E68900';
var textSetting = {
fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
fontWeight: 'normal',
orientation: 'top',
hAlign: 'left',
fontColor: mainFontColor,
fontSize: '16px',
vAlign: 'center',
padding: 0,
margin: 0
};
var tableGrid = anychart.ui.table(4, 3);
tableGrid.cellBorder(null);
tableGrid.getCell(0, 1).content(lineChart(sessions, last_month_sessions));
tableGrid.colWidth(1, '95%');
tableGrid.rowHeight(1, 20);
tableGrid.rowHeight(2, 270);
tableGrid.rowHeight(3, 40);
tableGrid.getCell(2, 1).content(sparkLinesTable());
tableGrid.container(stage).draw();
function lineChart(data, last_data){
var chart = anychart.line();
chart.title()
.textSettings(textSetting)
.fontSize('20px')
.margin([10,0,0,0])
.padding(0)
.text('Web Analytics for March 2015');
var series_last_month = chart.line(last_data);
series_last_month.stroke(lightLineColor);
series_last_month.name('February 2015');
series_last_month.markers()
.enabled(true)
.size(3)
.fill(lightLineColor)
.stroke(lightLineColor)
.type('circle');
var series_this_month = chart.line(data);
series_this_month.stroke(lineColor);
series_this_month.name('March 2015');
series_this_month.markers()
.enabled(true)
.size(3)
.fill(lineColor)
.stroke(lineColor)
.type('circle');
chart.legend()
.textSettings(textSetting)
.fontSize(13)
.vAlign('bottom')
.margin([0, 0, 0, 30])
.itemsLayout('horizontal')
.background(null)
.position('top')
.align('left')
.enabled(true);
if (chart.legend().inverted) chart.legend().inverted(true);
chart.legend().title('Visits for months');
chart.legend().title()
.textSettings(textSetting)
.fontSize(16)
.hAlign('left')
.padding([0, 45, 0, 0])
.fontColor(mainFontColor);
chart.background(null);
chart.grid(1).enabled(false);
chart.yAxis().title().enabled(false);
chart.xAxis().title().enabled(false);
chart.xAxis().stroke(axisColor);
chart.xAxis().ticks(null);
chart.xAxis().labels().fontColor(lightFontColor);
chart.yAxis().minorTicks().enabled(false);
chart.yAxis().stroke(axisColor);
chart.yAxis().ticks().stroke(axisColor);
chart.yAxis().labels().fontColor(lightFontColor);
chart.grid().stroke(axisColor).oddFill(null).evenFill(null).zIndex(10.1);
chart.minorGrid().enabled(false);
chart.grid().drawLastLine(false);
return chart;
}
function sparkLinesTable(){
var table = anychart.ui.table();
table.container(stage);
table.contents([
['Session Metrics', '30 Days', '3/10/2015', null, 'Traffic Metrics', '30 Days', '3/10/2015'],
['Unique Sessions', createSparkLine(uniqueSessions), sum(uniqueSessions), null, 'Direct Traffic', createSparkLine(directTraffic), 21],
['Page Sessions', createSparkLine(pageSessions), sum(pageSessions), null, 'Referring Sites', createSparkLine(referringSites), 19],
['Page/Session', createSparkLine(pageToSession), sum(pageToSession), null, 'Search Engines', createSparkLine(searchEngine), 19],
['New Sessions', createSparkLine(newSessions), sum(newSessions), null, 'Goal Metrics', '30 Days', '3/10/2015'],
['Bounce Rate', createSparkLine(bonusRate), '27%', null, 'Goal 1', createSparkLine(goal1), 18],
['Avg. Time on Site', createSparkLine(avgTime), sum(avgTime) / 30 + 'ms', null, 'Goal 2', createSparkLine(goal2), 17]
]);
table.cellBorder(null);
table.cellTextFactory(textSetting);
table.cellTextFactory({fontSize:13});
table.colWidth(0, 120);
table.colWidth(2, 70);
table.colWidth(3, 30);
table.colWidth(4, 120);
table.colWidth(6, 70);
var tableNamesBorder = '1px ' + axisColor;
setupRowProp(table, 0, ['content', 'vAlign'], 'bottom');
setupColProp(table, 0, ['content', 'hAlign'], 'left');
setupColProp(table, 1, ['content', 'hAlign'], 'center');
setupColProp(table, 2, ['content', 'hAlign'], 'right');
setupColProp(table, 4, ['content', 'hAlign'], 'left');
setupColProp(table, 5, ['content', 'hAlign'], 'center');
setupColProp(table, 6, ['content', 'hAlign'], 'right');
setupColProp(table, 2, ['content', 'fontColor'], brightDarkColor);
setupColProp(table, 2, ['content', 'fontWeight'], 'bold');
setupColProp(table, 6, ['content', 'fontColor'], brightDarkColor);
setupColProp(table, 6, ['content', 'fontWeight'], 'bold');
setupRowProp(table, 0, ['content', 'fontColor'], lightFontColor);
setupRowProp(table, 0, ['content', 'fontWeight'], 'normal');
table.getCell(4, 4).content().fontColor(lightFontColor).fontWeight('normal').vAlign('bottom');
table.getCell(4, 5).content().fontColor(lightFontColor).fontWeight('normal').vAlign('bottom');
table.getCell(4, 6).content().fontColor(lightFontColor).fontWeight('normal').vAlign('bottom');
table.getCell(0, 0).bottomBorder(tableNamesBorder);
table.getCell(0, 1).bottomBorder(tableNamesBorder);
table.getCell(0, 2).bottomBorder(tableNamesBorder);
table.getCell(0, 4).bottomBorder(tableNamesBorder);
table.getCell(0, 5).bottomBorder(tableNamesBorder);
table.getCell(0, 6).bottomBorder(tableNamesBorder);
table.getCell(4, 4).bottomBorder(tableNamesBorder);
table.getCell(4, 5).bottomBorder(tableNamesBorder);
table.getCell(4, 6).bottomBorder(tableNamesBorder);
return table;
}
function createSparkLine(array) {
var sparkLineAreaFill = superLightLineColor;
var sparkLineAreaStroke = lightLineColor;
var sparkLine = anychart.sparkline(array);
var minMarkers = sparkLine.minMarkers();
minMarkers.enabled(true);
minMarkers.fill(minMarkerColor);
minMarkers.stroke(minMarkerColorStroke);
minMarkers.size(2);
sparkLine.type('area');
sparkLine.fill(sparkLineAreaFill);
sparkLine.stroke(sparkLineAreaStroke);
sparkLine.height('100%');
sparkLine.margin().top('15%');
sparkLine.margin().bottom('15%');
sparkLine.padding(0);
sparkLine.xScale('linear');
sparkLine.xScale().minimumGap(0).maximumGap(0);
sparkLine.xScale().ticks().interval(1);
return sparkLine;
}
function sum(array) {
var sum = 0;
for (var i = 0, count = array.length; i < count; i++) {
sum += array[i];
}
return sum
}
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);
}
}
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>