Blame view
samples/_usingThemes.html
5.52 KB
eed3c9f67
first file
|
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>
|