Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<div id="container"></div>CSScopy
6
1
html, body, #container {2
width: 100%;3
height: 100%;4
margin: 0;5
padding: 0;6
}JavaScriptcopy
x
1
anychart.onDocumentReady(function () {2
// create data set on our data3
var dataSet = anychart.data.set([4
['W1', 23, 90, 15, 23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],5
['W2', 27, 94, 17, 27, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],6
['W3', 33, 98, 19, 31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],7
['W4', 37, 105, 21, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,], 8
['W5', 39, 106, 22, 41, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],9
['W6', 42, 110, 23, 47, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],10
['W7', 43, 118, 26, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],11
['W8', 43, 121, 27, 60, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],12
['W9', 43, 132, 29, 62, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],13
['W10', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],14
['W11', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],15
['W12', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],16
['W13', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],17
['W14', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],18
['W15', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],19
['W16', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],20
['W17', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],21
['W18', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],22
['W19', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],23
['W20', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],24
['W21', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],25
['W22', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],26
['W23', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],27
['W24', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],28
['W25', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],29
['W26', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],30
['W27', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],31
['W28', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],32
['W29', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],33
['W30', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],34
['W31', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],35
['W32', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],36
['W33', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]37
]); 38
39
// map data for the first series, take x from the zero area and value from the first area of data set40
var simpleClothing = dataSet.mapAs({'x': 0, 'value': 1});41
var basicFood = dataSet.mapAs({'x': 0, 'value': 2});42
var heating = dataSet.mapAs({'x': 0, 'value': 3});43
var intoxicants= dataSet.mapAs({'x': 0, 'value': 4});44
var crudeItems = dataSet.mapAs({'x': 0, 'value': 5});45
var householdItems = dataSet.mapAs({'x': 0, 'value': 6});46
var standardClothing = dataSet.mapAs({'x': 0, 'value': 7});47
var services = dataSet.mapAs({'x': 0, 'value': 8});48
var luxuryDrinks = dataSet.mapAs({'x': 0, 'value': 9});49
var freeMovement = dataSet.mapAs({'x': 0, 'value': 10});50
var communication = dataSet.mapAs({'x': 0, 'value': 11});51
var luxuryFood = dataSet.mapAs({'x': 0, 'value': 12});52
var luxuryItems = dataSet.mapAs({'x': 0, 'value': 13});53
var art = dataSet.mapAs({'x': 0, 'value': 14});54
55
56
// create bar chart57
var chart = anychart.area();58
59
// turn on chart animation60
chart.animation(true);61
62
// force chart to stack values by Y scale.63
chart.yScale().stackMode('percent');64
65
var crosshair = chart.crosshair();66
// turn on the crosshair67
crosshair.enabled(true)68
.yStroke(null)69
.xStroke('#fff')70
.zIndex(99);71
crosshair.yLabel().enabled(false);72
crosshair.xLabel().enabled(false);73
74
75
//set yAxis labels formatting, force it to add % to values76
//chart.yScale().maximum(100);77
78
// helper function to setup label settings for all series79
var setupSeries = function (series, name) {80
series.name(name).stroke('0');81
series.markers().zIndex(100);82
series.hovered().stroke('3 #fff 1');83
series.hovered().markers()84
.enabled(true)85
.type('circle')86
.size(4)87
.stroke('1.5 #fff');88
};89
90
// temp variable to store series instance91
var series;92
93
// create series with mapped data94
series = chart.area(simpleClothing);95
series.normal().fill("#33cc33", 0.7);96
setupSeries(series, 'Simple Clothing');97
98
series = chart.area(basicFood);99
series.normal().fill('#66ccff')100
setupSeries(series, 'Basic Food');101
102
series = chart.area(heating);103
series.normal().fill("#000", 1)104
setupSeries(series, 'Heating');105
106
series = chart.area(intoxicants);107
series.normal().fill("#cc3300", .8)108
setupSeries(series, 'Intoxicants');109
110
111
// set interactivity and toolitp settings112
chart.interactivity().hoverMode('by-x');113
chart.tooltip().displayMode('union');114
115
// turn on legend116
chart.legend()117
.enabled(true)118
.fontSize(15)119
.padding([0, 0, 25, 0])120
.itemsLayout('horizontal-expandable')121
.maxWidth('90%');122
123
// set container id for the chart124
chart.container('container');125
126
// initiate chart drawing127
chart.draw();128
});