Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 
<html>
3 
 
4 
    <head>
5 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 
        <title>amCharts examples</title>
7 
        <link rel="stylesheet" href="style.css" type="text/css">
8 
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>
9 
        <script src="../amcharts/serial.js" type="text/javascript"></script>
10 
 
11 
        <script>
12 
			var chart;
13 
 
14 
			var chartData = [
15 
				{
16 
					"category": "Evaluation",
17 
					"excelent": 20,
18 
					"good": 20,
19 
					"average": 20,
20 
					"poor": 20,
21 
					"bad": 20,
22 
					"limit": 78,
23 
					"full": 100,
24 
					"bullet": 65
25 
				}
26 
			];
27 
 
28 
 
29 
			AmCharts.ready(function () {
30 
 
31 
				// FIRST BULLET CHART
32 
				// bullet chart is a simple serial chart
33 
				chart = new AmCharts.AmSerialChart();
34 
				chart.dataProvider = chartData;
35 
				chart.categoryField = "category";
36 
				chart.rotate = true; // if you want vertical bullet chart, set rotate to false
37 
				chart.columnWidth = 1;
38 
				chart.startDuration = 1;
39 
 
40 
				// AXES
41 
				// category
42 
				var categoryAxis = chart.categoryAxis;
43 
				categoryAxis.gridAlpha = 0;
44 
 
45 
				// value
46 
				var valueAxis = new AmCharts.ValueAxis();
47 
				valueAxis.maximum = 100;
48 
				valueAxis.axisAlpha = 1;
49 
				valueAxis.gridAlpha = 0;
50 
				valueAxis.stackType = "regular"; // we use stacked graphs to make color fills
51 
				chart.addValueAxis(valueAxis);
52 
 
53 
				// this graph displays the short dash, which usually indicates maximum value reached.
54 
				var graph = new AmCharts.AmGraph();
55 
				graph.valueField = "limit";
56 
				graph.lineColor = "#000000";
57 
				// it's a step line with no risers
58 
				graph.type = "step";
59 
				graph.noStepRisers = true;
60 
				graph.lineAlpha = 1;
61 
				graph.lineThickness = 3;
62 
				graph.columnWidth = 0.5; // change this if you want wider dash
63 
				graph.stackable = false; // this graph shouldn't be stacked
64 
				chart.addGraph(graph);
65 
 
66 
				// The following graphs produce color bands
67 
				graph = new AmCharts.AmGraph();
68 
				graph.valueField = "excelent";
69 
				graph.lineColor = "#19d228";
70 
				graph.showBalloon = false;
71 
				graph.type = "column";
72 
				graph.fillAlphas = 0.8;
73 
				chart.addGraph(graph);
74 
 
75 
				graph = new AmCharts.AmGraph();
76 
				graph.valueField = "good";
77 
				graph.lineColor = "#b4dd1e";
78 
				graph.showBalloon = false;
79 
				graph.type = "column";
80 
				graph.fillAlphas = 0.8;
81 
				chart.addGraph(graph);
82 
 
83 
				graph = new AmCharts.AmGraph();
84 
				graph.valueField = "average";
85 
				graph.lineColor = "#f4fb16";
86 
				graph.showBalloon = false;
87 
				graph.type = "column";
88 
				graph.fillAlphas = 0.8;
89 
				chart.addGraph(graph);
90 
 
91 
				graph = new AmCharts.AmGraph();
92 
				graph.valueField = "poor";
93 
				graph.lineColor = "#f6d32b";
94 
				graph.showBalloon = false;
95 
				graph.type = "column";
96 
				graph.fillAlphas = 0.8;
97 
				chart.addGraph(graph);
98 
 
99 
				graph = new AmCharts.AmGraph();
100 
				graph.valueField = "bad";
101 
				graph.lineColor = "#fb7116";
102 
				graph.showBalloon = false;
103 
				graph.type = "column";
104 
				graph.fillAlphas = 0.8;
105 
				chart.addGraph(graph);
106 
 
107 
				// this is the "bullet" graph - black bar showing current value
108 
				graph = new AmCharts.AmGraph();
109 
				graph.valueField = "bullet";
110 
				graph.lineColor = "#000000";
111 
				graph.type = "column";
112 
				graph.lineAlpha = 1;
113 
				graph.fillAlphas = 1;
114 
				graph.columnWidth = 0.3; // this makes it narrower than color graphs
115 
				graph.stackable = false; // bullet graph should not stack
116 
				graph.clustered = false; // this makes the trick - one column above another
117 
				chart.addGraph(graph);
118 
 
119 
				// WRITE
120 
				chart.write("chartdiv");
121 
 
122 
 
123 
 
124 
				// SECOND BULLET CHART
125 
				// bullet chart is a simple serial chart
126 
				chart = new AmCharts.AmSerialChart();
127 
				chart.dataProvider = chartData;
128 
				chart.categoryField = "category";
129 
				chart.rotate = false; // if you want horizontal bullet chart, set rotate to true
130 
				chart.columnWidth = 1;
131 
				chart.startDuration = 1;
132 
 
133 
 
134 
				// AXES
135 
				// category
136 
				categoryAxis = chart.categoryAxis;
137 
				categoryAxis.gridAlpha = 0;
138 
 
139 
				// value
140 
				valueAxis = new AmCharts.ValueAxis();
141 
				valueAxis.maximum = 100;
142 
				valueAxis.minimum = 0;
143 
				valueAxis.axisAlpha = 1;
144 
				valueAxis.gridAlpha = 0;
145 
				chart.addValueAxis(valueAxis);
146 
 
147 
 
148 
 
149 
				// this graph displays the short dash, which usually indicates maximum value reached.
150 
				graph = new AmCharts.AmGraph();
151 
				graph.valueField = "limit";
152 
				graph.lineColor = "#000000";
153 
				graph.type = "step";
154 
				graph.noStepRisers = true;
155 
				graph.lineAlpha = 1;
156 
				graph.lineThickness = 3;
157 
				graph.columnWidth = 0.5;
158 
				graph.stackable = false;
159 
				chart.addGraph(graph);
160 
 
161 
				// this is the color range graph.
162 
				// we use only one graph here (not like in the first example, and set gradient fill)
163 
				graph = new AmCharts.AmGraph();
164 
				graph.valueField = "full";
165 
				graph.showBalloon = false;
166 
				graph.type = "column";
167 
				graph.lineAlpha = 0;
168 
				graph.fillAlphas = 0.8;
169 
				graph.fillColors = ["#19d228", "#f6d32b", "#fb2316"];
170 
				graph.gradientOrientation = "vertical";
171 
				chart.addGraph(graph);
172 
 
173 
				// this is the "bullet" graph - black bar showing current value
174 
				graph = new AmCharts.AmGraph();
175 
				graph.valueField = "bullet";
176 
				graph.lineColor = "#000000";
177 
				graph.type = "column";
178 
				graph.lineAlpha = 1;
179 
				graph.fillAlphas = 1;
180 
				graph.columnWidth = 0.3; // this makes it narrower than color graph
181 
				graph.clustered = false; // this makes the trick - one column above another
182 
				chart.addGraph(graph);
183 
 
184 
				// WRITE
185 
				chart.write("chartdiv2");
186 
 
187 
			});
188 
        </script>
189 
    </head>
190 
 
191 
    <body>
192 
        <div id="chartdiv" style="width: 600px; height: 100px;"></div>
193 
		<div id="chartdiv2" style="width: 120px; height: 600px;"></div>
194 
    </body>
195 
</html>