renamed chart-gauge to chart-area. added area demo.

Marak · Jun 17, 2010 · 6a6258f · 6a6258f
1 parent d24cfba
commit 6a6258f
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 9 deletions.
diff --git a/BUILD/behave/chart/area/index.js b/BUILD/behave/chart/area/index.js
@@ -0,0 +1,66 @@
+var chart;
+chart = new Highcharts.Chart({
+		chart: {
+			renderTo: options.selector, 
+			defaultSeriesType: 'area'
+		},
+		title: {
+			text: 'US and USSR nuclear stockpiles'
+		},
+		subtitle: {
+			text: 'Source: http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf'
+		},
+		xAxis: {
+		},
+		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, null, ' ') +'</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]
+		}]
+	});
+
diff --git a/BUILD/behave/chart/bar/index.js b/BUILD/behave/chart/bar/index.js
@@ -10,6 +10,9 @@
     
 */
 
+
+/* we should update the stubs here to use the configuration object we are going to mixin to options */
+
 chart = new Highcharts.Chart({
 				chart: {
 					renderTo: options.selector,

diff --git a/BUILD/behave/chart/gauge/index.js b/BUILD/behave/chart/gauge/index.js
diff --git a/BUILD/behave/chart/pie/index.js b/BUILD/behave/chart/pie/index.js
@@ -1,8 +1,18 @@
- options.data = eval($(options.selector).attr('data-resource')).data;
- options.title = eval($(options.selector).attr('data-resource')).title;
-
+/**************** open-behaviors - chart-pie ****************
+
+    the chart-pie behavior will turn an empty element into a HighCharts pie chart
+    
+    arguments : 
+      options.selector 
+        css selector or DOM node that we are going to apply the behavior to
+      options.data.series
+        data series for chart
+      options.data.title
+        chart title  
+*/
+
+/* we should update the stubs here to use the configuration object we are going to mixin to options with*/
 
-
 
    var chart;
 			chart = new Highcharts.Chart({
@@ -11,7 +21,7 @@
 					margin: [50, 200, 60, 170]
 				},
 				title: {
-					text: options.title
+					text: options.data.title
 				},
 				plotArea: {
 					shadow: null,
@@ -50,7 +60,7 @@
 			  series: [{
 					type: 'pie',
 					name: 'Browser share',
-					data: options.data
+					data: options.data.series
 					//data: [3.40, 1.05, 2.90, 1.65, 1.35, 2.59, 1.39, 3.07, 2.82]
 				}]
 			});

diff --git a/examples/browser/charts.html b/examples/browser/charts.html
@@ -49,8 +49,17 @@
   </head>
   <body>
 
+    <h3>Pie</h3>
+    &lt;div class = "chart" data-behaviors="chart-pie" data-resource = "chart_bar_data_1"&gt; <br/>
+    <div class="chart" data-behaviors = "chart-pie" data-resource = "chart_data" ></div>
+
     &lt;div class = "chart" data-behaviors="chart-bar" data-resource = "chart_bar_data_1"&gt; <br/>
     <div class = "chart" data-behaviors="chart-bar" data-resource = "chart_bar_data_1"></div>
+
+    &lt;div class = "chart" data-behaviors="chart-gauge" data-resource = "chart_bar_data_1"&gt; <br/>
+    <div class = "chart" data-behaviors="chart-area"></div>
+
+
     <hr/>
   </body>
 </html>
diff --git a/examples/js/sampleData.js b/examples/js/sampleData.js
@@ -87,11 +87,11 @@ chart_data_1.data =
 
 chart_data_1.title = "Browser market shares at a specific website, 2008";
 
-var chart_data_2 = {};
+var chart_data = {};
 
-chart_data_2.title = "The Battle";
+chart_data.title = "The Battle";
 
-chart_data_2.data =
+chart_data.series =
 [
 	['Knowing',   50],
 	{