HTMLcopy
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
3
$('#container').append('<div class="table">' +
4
'<table id="table" style="display:none">' +
5
'<tr>' +
6
'<th>Eyeshadows</th>' +
7
'<td>249980</td>' +
8
'</tr>' +
9
'<tr>' +
10
'<th>Eyeliner</th>' +
11
'<td>213210</td>' +
12
'</tr>' +
13
'<tr>' +
14
'<th>Eyebrow pencil</th>' +
15
'<td>170670</td>' +
16
'</tr>' +
17
'<tr>' +
18
'<th>Nail polish</th>' +
19
'<td>143760</td>' +
20
'</tr>' +
21
'<tr>' +
22
'<th>Pomade</th>' +
23
'<td>128000</td>' +
24
'</tr>' +
25
'<tr>' +
26
'<th>Lip gloss</th>' +
27
'<td>110430</td>' +
28
'</tr>' +
29
'<tr>' +
30
'<th>Mascara</th>' +
31
'<td>102610</td>' +
32
'</tr>' +
33
'<tr>' +
34
'<th>Foundation</th>' +
35
'<td>94190</td>' +
36
'</tr>' +
37
'<tr>' +
38
'<th>Rouge</th>' +
39
'<td>80540</td>' +
40
'</tr>' +
41
'<tr>' +
42
'<th>Powder</th>' +
43
'<td>53540</td>' +
44
'</tr>' +
45
'</table>' +
46
'</div>');
47
48
// To work with the data adapter you need to reference the data adapter script file from AnyChart CDN
49
// (https://cdn.anychart.com/js/7.14.3/data-adapter.min.js for latest or https://cdn.anychart.com/js/7.11.1/data-adapter.min.js for the versioned file)
50
51
var tableData = anychart.data.parseHtmlTable("#table");
52
53
var chart = anychart.bar3d();
54
55
// Set data from HTML table.
56
chart.data(tableData);
57
58
chart.title("Set chart data as a table data");
59
chart.container("container");
60
chart.draw();
61
});