forked from joshdover/charts.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (100 loc) · 3.25 KB
/
index.html
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
<html>
<head>
<title>Charts.js Demo</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Google JS-API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Charts.js -->
<script type="text/javascript" src="js/charts.js"></script>
<script type="text/javascript">
// Load the visualization library
google.load('visualization', '1.0', {'packages':['corechart']});
// When finished loading, make our charts using Charts.js
google.setOnLoadCallback(makeCharts);
testData = [
['Month', 'Preciption (in)', 'Temperature (F)'],
["January",1,45],
["Februrary",4,38],
["March",1,54],
["April",3,78]
];
function makeCharts() {
$("#chart-bar").chart({
chartType:'bar',
jsonData: testData
});
$("#chart-column").chart({
chartType:'column',
jsonData: testData
});
$("#chart-pie").chart({
chartType:'pie',
jsonData: testData
});
$("#chart-line").chart({
chartType:'line',
jsonData: testData
});
$("#chart-area").chart({
chartType:'area',
jsonData: testData
});
$("#chart-bubble").chart({
chartType:'bubble',
jsonData: testData
});
$("#chart-candlestick").chart({
chartType:'candlestick',
jsonData: [['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]]
});
$("#chart-scatter").chart({
chartType:'scatter',
jsonData: [
['Age', 'Weight', 'Height'],
[ 8, 12, 4.5],
[ 4, 5.5, 3.2],
[ 11, 14, 5.0],
[ 4, 5, 3.4],
[ 3, 3.5, 2.1],
[ 6.5, 7, 4.2]
]
});
$("#chart-combo").chart({
chartType:'combo',
jsonData:[
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
],
options: {
seriesType: 'bars',
series: {
5: {
type: 'line'
}
}
}
});
}
</script>
</head>
<body>
<div id="chart-bar"></div>
<div id="chart-column"></div>
<div id="chart-pie"></div>
<div id="chart-line"></div>
<div id="chart-area"></div>
<div id="chart-bubble"></div>
<div id="chart-candlestick"></div>
<div id="chart-scatter"></div>
<div id="chart-combo"></div>
</body>
</html>