_usingThemes.html
5.52 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script src="../amcharts/serial.js" type="text/javascript"></script>
<script src="../amcharts/pie.js" type="text/javascript"></script>
<!-- theme files. you only need to include the theme you use.
feel free to modify themes and create your own themes -->
<script src="../amcharts/themes/light.js" type="text/javascript"></script>
<script src="../amcharts/themes/dark.js" type="text/javascript"></script>
<script src="../amcharts/themes/black.js" type="text/javascript"></script>
<script src="../amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="../amcharts/themes/patterns.js" type="text/javascript"></script>
<script type="text/javascript">
// in order to set theme for a chart, all you need to include theme file
// located in amcharts/themes folder and set theme property for the chart.
var chart1;
var chart2;
makeCharts("light", "#FFFFFF");
// Theme can only be applied when creating chart instance - this means
// that if you need to change theme at run time, youhave to create whole
// chart object once again.
function makeCharts(theme, bgColor, bgImage){
if(chart1){
chart1.clear();
}
if(chart2){
chart2.clear();
}
// background
if(document.body){
document.body.style.backgroundColor = bgColor;
document.body.style.backgroundImage = "url(" + bgImage + ")";
}
// column chart
chart1 = AmCharts.makeChart("chartdiv1", {
type: "serial",
theme:theme,
dataProvider: [{
"year": 2005,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2006,
"income": 26.2,
"expenses": 22.8
}, {
"year": 2007,
"income": 30.1,
"expenses": 23.9
}, {
"year": 2008,
"income": 29.5,
"expenses": 25.1
}, {
"year": 2009,
"income": 24.6,
"expenses": 25
}],
categoryField: "year",
startDuration: 1,
categoryAxis: {
gridPosition: "start"
},
valueAxes: [{
title: "Million USD"
}],
graphs: [{
type: "column",
title: "Income",
valueField: "income",
lineAlpha: 0,
fillAlphas: 0.8,
balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
}, {
type: "line",
title: "Expenses",
valueField: "expenses",
lineThickness: 2,
fillAlphas: 0,
bullet: "round",
balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
}],
legend: {
useGraphSettings: true
}
});
// pie chart
chart2 = AmCharts.makeChart("chartdiv2", {
type: "pie",
theme: theme,
dataProvider: [{
"country": "Czech Republic",
"litres": 156.9
}, {
"country": "Ireland",
"litres": 131.1
}, {
"country": "Germany",
"litres": 115.8
}, {
"country": "Australia",
"litres": 109.9
}, {
"country": "Austria",
"litres": 108.3
}, {
"country": "UK",
"litres": 65
}, {
"country": "Belgium",
"litres": 50
}],
titleField: "country",
valueField: "litres",
balloonText: "[[title]]<br><b>[[value]]</b> ([[percents]]%)",
legend: {
align: "center",
markerType: "circle"
}
});
}
</script>
</head>
<body style="font-size:15px;">Select theme:
<a href="#" onclick="makeCharts('light', '#ffffff');">Light</a> |
<a href="#" onclick="makeCharts('dark', '#282828')">Dark</a> |
<a href="#" onclick="makeCharts('black', '#222222')">Black</a> |
<a href="#" onclick="makeCharts('patterns', '#ffffff')">Patterns</a> |
<a href="#" onclick="makeCharts('chalk', '#282828', 'images/board.jpg')">Chalk</a>
<div id="chartdiv1" style="width: 600px; height: 400px;"></div>
<div id="chartdiv2" style="width: 600px; height: 400px;"></div>
</body>
</html>