Updated data from csv and added data from xml

rikapo · Oct 12, 2011 · 0fceb3f · 0fceb3f
1 parent 70d7685
commit 0fceb3f
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 5 deletions.
diff --git a/studies/data-from-csv.htm b/studies/data-from-csv.htm
@@ -6,11 +6,8 @@
 
 
 		<!-- 1. Add these JavaScript inclusions in the head of your page -->
-		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 		<script type="text/javascript" src="../js/highcharts.js"></script>
-		<!--[if IE]>
-			<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
-		<![endif]-->
 
 
 		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
@@ -21,7 +18,7 @@
 			var options = {
 				chart: {
 					renderTo: 'container',
-					defaultSeriesType: 'column'
+					type: 'column'
 				},
 				title: {
 					text: 'Fruit Consumption'

diff --git a/studies/data-from-xml.htm b/studies/data-from-xml.htm
@@ -0,0 +1,80 @@
+<!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.6.2/jquery.min.js"></script>
+		<script type="text/javascript" src="../js/highcharts.js"></script>
+
+
+		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
+		<script type="text/javascript">
+		$(document).ready(function() {
+
+
+			var options = {
+				chart: {
+					renderTo: 'container',
+					type: 'column'
+				},
+				title: {
+					text: 'Fruit Consumption'
+				},
+				xAxis: {
+					categories: []
+				},
+				yAxis: {
+					title: {
+						text: 'Units'
+					}
+				},
+				series: []
+			};
+
+			// Load the data from the XML file 
+			$.get('data.xml', function(xml) {
+
+				// Split the lines
+				var $xml = $(xml);
+
+				// push categories
+				$xml.find('categories item').each(function(i, category) {
+					options.xAxis.categories.push($(category).text());
+				});
+
+				// push series
+				$xml.find('series').each(function(i, series) {
+					var seriesOptions = {
+						name: $(series).find('name').text(),
+						data: []
+					};
+
+					// push data points
+					$(series).find('data point').each(function(i, point) {
+						seriesOptions.data.push(
+							parseInt($(point).text())
+						);
+					});
+
+					// add it to the options
+					options.series.push(seriesOptions);
+				});
+				var chart = new Highcharts.Chart(options);
+			});
+
+
+		});
+		</script>
+
+	</head>
+	<body>
+
+		<!-- 3. Add the container -->
+		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
+
+
+	</body>
+</html>
diff --git a/studies/data.csv b/studies/data.csv
@@ -0,0 +1,5 @@
+Categories,Apples,Pears,Oranges,Bananas
+John,8,4,6,5
+Jane,3,4,2,3
+Joe,86,76,79,77
+Janet,3,16,13,15
diff --git a/studies/data.xml b/studies/data.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0"?>
+<chart>
+	<categories>
+		<item>Categories</item>
+		<item>Apples</item>
+		<item>Pears</item>
+		<item>Oranges</item>
+		<item>Bananas</item>
+	</categories>
+	<series>
+		<name>John</name>
+		<data>
+			<point>8</point>
+			<point>4</point>
+			<point>6</point>
+			<point>5</point>
+		</data>
+	</series>
+	<series>
+		<name>Jane</name>
+		<data>
+			<point>3</point>
+			<point>4</point>
+			<point>2</point>
+			<point>3</point>
+		</data>
+	</series>
+	<series>
+		<name>Joe</name>
+		<data>
+			<point>86</point>
+			<point>76</point>
+			<point>79</point>
+			<point>77</point>
+		</data>
+	</series>
+	<series>
+		<name>Janet</name>
+		<data>
+			<point>3</point>
+			<point>16</point>
+			<point>13</point>
+			<point>15</point>
+		</data>
+	</series>
+</chart>