Location: PHPKode > projects > IntraMessenger > common/library/highcharts/examples/area-basic.htm
<!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>Highcharts Example</title>
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="../js/highcharts.js"></script>
		
		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="../js/themes/gray.js"></script>
		-->
		
		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="../js/modules/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container', 
						defaultSeriesType: 'area'
					},
					title: {
						text: 'US and USSR nuclear stockpiles'
					},
					subtitle: {
						text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
							'thebulletin.metapress.com</a>'
					},
					xAxis: {
						labels: {
							formatter: function() {
								return this.value; // clean, unformatted number for year
							}
						}							
					},
					yAxis: {
						title: {
							text: 'Nuclear weapon states'
						},
						labels: {
							formatter: function() {
								return this.value / 1000 +'k';
							}
						}
					},
					tooltip: {
						formatter: function() {
							return this.series.name +' produced <b>'+
								Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x;
						}
					},
					plotOptions: {
						area: {
							pointStart: 1940,
							marker: {
								enabled: false,
								symbol: 'circle',
								radius: 2,
								states: {
									hover: {
										enabled: true
									}
								}
							}
						}
					},
					series: [{
						name: 'USA',
						data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640, 
							1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 
							27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 
							26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 
							24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 
							22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 
							10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
					}, {
						name: 'USSR/Russia',
						data: [null, null, null, null, null, null, null , null , null ,null, 
						5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 
						4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 
						15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 
						33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 
						35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 
						21000, 20000, 19000, 18000, 18000, 17000, 16000]
					}]
				});
				
				
			});
				
		</script>
		
	</head>
	<body>
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
		
				
	</body>
</html>
Return current item: IntraMessenger