Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<div id="container"></div>2
<div class="table">3
<div class="heading">4
<div class="cell">5
<p>Date</p>6
</div>7
<div class="cell">8
<p>ILS (₪)</p>9
</div>10
<div class="cell">11
<p>CNY (¥)</p>12
</div>13
</div>14
<div class="row">15
<div class="cell">16
<p>01/01</p>17
</div>18
<div class="cell">19
<p>2</p>20
</div>21
<div class="cell">22
<p>3</p>23
</div>24
</div>25
<div class="row">26
<div class="cell">27
<p>01/02</p>28
</div>29
<div class="cell">30
<p>2</p>31
</div>32
<div class="cell">33
<p>3</p>34
</div>35
</div>36
<div class="row">37
<div class="cell">38
<p>01/03</p>39
</div>40
<div class="cell">41
<p>2</p>42
</div>43
<div class="cell">44
<p>3</p>45
</div>46
</div>47
<div class="row">48
<div class="cell">49
<p>01/04</p>50
</div>51
<div class="cell">52
<p>2</p>53
</div>54
<div class="cell">55
<p>3</p>56
</div>57
</div>58
<div class="row">59
<div class="cell">60
<p>01/05</p>61
</div>62
<div class="cell">63
<p>2</p>64
</div>65
<div class="cell">66
<p>3</p>67
</div>68
</div>69
</div>CSScopy
x
1
* {2
margin: 0;3
padding: 0;4
}5
6
html, body {7
height: 100%;8
}9
10
#container {11
width: 50%;12
height: 100%;13
float: left;14
}15
16
.heading {17
display: table-row;18
border: 1px solid #dddddd;19
text-align: center;20
padding: 8px;21
font-weight: bold;22
}23
24
.row {25
display: table-row;26
}27
28
.cell {29
display: table-cell;30
border: 1px solid #dddddd;31
padding: 5px 3px;32
text-align: center;33
}34
35
.row:nth-of-type(odd){36
background: #dddddd;37
}JavaScriptcopy
18
1
anychart.onDocumentLoad(function() {2
// create a chart and set the data3
var chart = anychart.column();4
5
var tableData = anychart.data.parseHtmlTable(".table",6
".row",7
".cell p",8
".heading .cell p",9
".title");10
11
chart.data(tableData);12
13
chart.legend(true);14
15
// set chart container and draw16
chart.container("container").draw();17
18
});