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