Iframe
HTML with links
ZIP with files
Column Chart
Geo Map
Line Chart
Pie Chart
Stock Chart
From scratchHTMLcopy
1
<select id="themeSelect" onchange="changeTheme()">2
<option value="defaultTheme" selected>Default</option>3
<option value="lightBlue">Light Blue</option>4
<option value="darkEarth">Dark Earth</option>5
<option value="lightEarth">Light Earth</option>6
<option value="darkGlamour">Dark Glamour</option>7
<option value="lightGlamour">Light Glamour</option>8
<option value="darkProvence">Dark Provence</option>9
<option value="lightProvence">Light Provence</option>10
<option value="darkTurquoise">Dark Turquoise</option>11
<option value="lightTurquoise">Light Turquoise</option>12
<option value="coffee">Coffee</option>13
<option value="monochrome">Monochrome</option>14
<option value="morning">Morning</option>15
<option value="pastel">Pastel</option>16
<option value="sea">Sea</option>17
<option value="wines">Wines</option>18
</select>19
<div id="container"></div>CSScopy
15
1
html, body {2
width: 100%;3
height: 100%;4
margin: 0;5
padding: 0;6
}7
select {8
margin: 10px 0 10px 10px;9
} 10
#container {11
position: absolute;12
width: 100%;13
top: 35px;14
bottom: 0;15
}JavaScriptcopy
x
1
var chart;2
// create a chart when document is ready3
anychart.onDocumentReady(function(){4
// create chart when document is ready5
createChart("defaultTheme")6
});7
8
// function to creat a chart9
function createChart(theme) {10
// dispose chart if there is one already11
if (chart != null) chart.dispose();12
13
// set theme14
anychart.theme(theme); 15
16
// create chart17
chart = anychart.column([["Earth", 1], ["Fire", 2], ["Wind", 3], ["Water", 1.5]]);18
chart.title("Theme: " + theme);19
20
// set container and draw chart21
chart.container("container").draw();22
}23
function changeTheme(){24
// recreate chart to reset theme25
var select = document.getElementById("themeSelect");26
createChart(select.value);27
}