jquery_cheats 2.1.0 → 2.2.0

data/README.md

@@ -14,6 +14,15 @@ Then add the following to app/assets/application.js
 //= require jqueryCheats
 ```
 
+If you would like charting functionality make sure the following code is in app/assets/application.js
+
+```js
+//= require jqplot/jquery.jqplot.js
+```
+
+Depending on the chart, you will have to include the plugin too, which are loaded in the jqplot/plugins directory
+
+
 ##Functions
 
 Mouse over image, Image1 changes to Image2 when moused over:
@@ -67,3 +76,11 @@ JQuery Cheats comes packaged with JQueryPlots as of 2.1.0, but some functions ma
 ###Barchart
 
 JQuery Cheats Barchart is the first graph to be implemented and uses XML to parse the data.
+
+Make sure the following is in your app/assets/javascripts/application.js file
+
+```js
+//= require jqplot/plugins/jqplot.barRenderer.min.js
+//= require jqplot/plugins/jqplot.categoryAxisRenderer.min.js
+//= require jqplot/plugins/jqplot.pointLabels.min.js
+```

data/app/assets/javascripts/jqueryCheats.js

@@ -1,3 +1,7 @@
+//I KNOW it is global but, I am unsure of another way to do it.
+var links = [];
+//global variable used to iterate
+var categoryPos = 0;
 $(document).ready(function(){
 	//make select boxes ajax-compatible by adding two params data-onchange=true and data-url="/path/to"
 	$('select[data-onchange]').live("change",function(){
@@ -10,7 +14,7 @@ $(document).ready(function(){
 	//make radio buttons onclick compatible
 	$('input[type="radio"][data-onclick]').live("change",function()
 	{
-		var data = $(this).serialize();
+		data = $(this).serialize();
 		if($(this).attr("data-params"))
 		{
 			data += "&"+$(this).attr("data-params");
@@ -21,6 +25,23 @@ $(document).ready(function(){
 		success: function(data){eval(data);},
 		dataType: "script"});
 	});
+	//start loading the pie charts...
+	$("div.piechart").each(function(){
+		pieChart($(this).attr("id"),$(this).attr("data-xmlurl"));
+	});
+	//bind click events to  piehcart
+	//start by loading the barcharts...
+	$("div.barchart").each(function(){BarChart($(this).attr("id"),$(this).attr("data-xmlurl"))});
+	$('div.barchart').bind('jqplotDataClick', 
+        function (ev, seriesIndex, pointIndex, data) {
+            	/* To open in a NEW window use: */
+            	/* window.open(data[2]); */
+            	/* To open in the same window use: */
+   				for(i = 0; i < data.length; i++) $("#debug").append("\nData["+i+"]:"+data[i]);
+   				$("#debug").append("\nlink: "+links[data[0]-1]);
+   				window.location = links[data[0]-1]
+            }
+        );
 });
 
 ///some helpter functions here
@@ -28,18 +49,193 @@ $(document).ready(function(){
 //####THIS ONE HELPS PROCESS XML
 
 
-function BarChart(name)
+function BarChart(name,xmlurl)
 {
 	//this is the BarChart Method
-	$.jqplot(name);
+	//get the XML data
+	$.get(xmlurl,function(xml){
+		//we have the URL object as xml
+		var width = XMLWidth(xml);//The width of the chart
+		var height = XMLHeight(xml);
+		bars = getBars(xml);
+		//append these to the div
+		$("div#"+name).css("width",width);
+		$("div#"+name).css("height",height);
+			$.jqplot(name,bars,{ seriesDefaults:{
+	            renderer:$.jqplot.BarRenderer,
+	            rendererOptions: {fillToZero: true, barWidth: barWidth(xml)}
+	        },
+	        axes: {
+            // Use a category axis on the x axis and use our custom ticks.
+	            xaxis: {
+	                renderer: $.jqplot.CategoryAxisRenderer,
+	                ticks: getTicks(xml),
+	                autoscale: true
+	            },
+	            yaxis: {
+	            	min: getYAxisMin(xml),
+	            	max: getYAxisMax(xml),
+	            	autoscale: true,
+	            	tickInterval: getTickInterval(xml)
+	            }
+            }
+	        });
+		});
+}
+
+function barWidth(xml)
+{
+	var width = $(xml).find("render").attr("barWidth");
+	if(width) return width; else return null;
+}
+
+function getYAxisMin(xml)
+{
+	var min = $(xml).find("yaxis").attr("min");
+	if(min)
+	{
+		return min;
+	}
+	else
+	{
+		return null;	
+	}
 }
 
-function getTicks(url)
+function getYAxisMax(xml)
+{
+	var max = $(xml).find("yaxis").attr("max");
+	if(max) return max;
+	if(!max) return null;
+}
+function getTicks(xml)
 {
 	//this function should get the ticks from the XML
+	var ticks = [];
+	$(xml).find("tick").each(function(){
+		ticks.push($(this).attr("text"));
+	});
+	return ticks;
 }
 
-function XML2Bars(url)
+function getBars(xml)
 {
 	//this function aims at translating the data into a 2d array for rendering
+	var twoDArray = [];
+	$(xml).find("category").each(
+		function(){
+			twoDArray.push(loadBars($(this)));
+		});
+	debug2dArray(twoDArray);
+	return twoDArray;
+}
+
+function XMLWidth(xml)
+{
+	//get the width and height of the object via XML
+	return $(xml).find("size").attr("width");
+}
+
+function XMLHeight(xml)
+{
+	return $(xml).find("size").attr("height");
+}
+
+function loadBars(xml)
+{
+	bars = [];
+	$(xml).find("bar").each(
+		function(){
+			//categoryPos = categoryPos+1;
+			//$("#debug").append("\nCATEGORY POSSITION:"+categoryPos)
+			//bars.push(categoryPos);
+			bars.push($(this).attr("size"));
+			link = $(this).attr("link");
+			if(link)links.push(link); else links.push("#");
+		});
+	return bars;
+}
+
+
+function getTickInterval(xml)
+{
+	var interval = $(xml).find("yaxis").attr("tickInterval");
+	alert("INTERVAL IS: "+interval)
+	if(interval) return interval;
+	else return null;
+}
+
+function debug2dArray(arr)
+{
+	$("#debug").append("\n[");
+	for(i = 0; i < arr.length; i++)
+	{
+		$("#debug").append("\n[");
+		for(j = 0; j < arr[i].length; j++)
+		{
+			if(j != 0) $("#debug").append(","); 
+			$("#debug").append(arr[i][j]);
+		}
+		$("#debug").append("]");
+	}
+	$("#debug").append("\n]");
+	return arr;
+}
+
+///THIS IS THE PIE CHART SECTION, Somethings may be borrowed from BarCharts
+//###THINGS BORROWED FROM BARCHARTS: debug2dArray
+
+function pieChart(name,xmlurl)
+{
+	$.get(xmlurl,function(xml)
+	{
+
+		loadSize(name,xml);
+		slices= new Array();
+		slices.push(loadSlices(xml));
+		$("#debug").append("\nSLICES ARR (getting ready to load):");
+		debug2dArray(slices);
+		//debug2dArray(slices)
+		//now load in the pie chart
+		var plot1 = $.jqplot(name,[slices],
+			{
+				seriesDefaults:{
+					renderer: $.jqplot.PieRenderer,
+					rendererOptions:{
+						showDataLables: true
+					},
+				},
+				legend:{show: true, location: 'e'}
+		});
+	});//end get AJAX request
+}
+
+
+
+function loadSlices(xml)
+{
+	slices = new Array();
+	$(xml).find("category").each(
+		function()
+		{
+			$(this).find("slice").each(
+				function()
+				{
+					slice = new Array($(this).attr("name"));
+					slice.push(parseInt($(this).attr("size")));
+					slices.push(slice);
+				}
+			);
+		}
+	);
+	return slices;
+}
+
+function loadSize(divid,xml)
+{
+	width = $(xml).find("size").attr("width");
+	if(width) $("#"+divid).css("width",width);
+	height = $(xml).find("size").attr("height");
+	if(height) $("#"+divid).css("height",height);
+	$("#debug").append("\nWidth: "+width+"\nHeight:"+height);
 }

data/jquery_cheats.gemspec

@@ -2,12 +2,12 @@
 
 Gem::Specification.new do |s|
   s.name = "jquery_cheats"
-  s.version = "2.1.0"
+  s.version = "2.2.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 1.2") if s.respond_to? :required_rubygems_version=
   s.authors = ["Travis Pessettto"]
   s.date = "2012-06-07"
-  s.description = "JQuery Asset Pipeline tricks"
+  s.description = "JQuery, JQPlot graphing, and other useful items for jquery."
   s.email = "travis@pessetto.com"
   s.extra_rdoc_files = ["README.md", "lib/jquery_cheats.rb"]
   s.files = Dir["{lib,app,vendor}/**/*"]+["README.md", "Rakefile", "Manifest", "jquery_cheats.gemspec"]

data/lib/jquery_cheats.rb

@@ -35,11 +35,19 @@ module JQueryCheats
       return newlink
     end
     
-    def barchart()
-      
+    def barchart(name,xmlurl)
+      #create a new barchar div tag, class of jqplot is used to simplify jquery binding
+      html = "<div id=\"#{name}\" class=\"barchart\" data-xmlurl=\"#{xmlurl}\"></div>".html_safe
+      #we will have to relly on XML to get the rest of the data...
+    end
+    
+    def piechart(name,xmlurl)
+      #create a new barchar div tag, class of jqplot is used to simplify jquery binding
+      html = "<div id=\"#{name}\" class=\"piechart\" data-xmlurl=\"#{xmlurl}\"></div>".html_safe
+      #we will have to relly on XML to get the rest of the data...
     end
     
-    def initialize()
+    def initialize
      
     end
     

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jquery_cheats
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -11,7 +11,7 @@ bindir: bin
 cert_chain: []
 date: 2012-06-07 00:00:00.000000000Z
 dependencies: []
-description: JQuery Asset Pipeline tricks
+description: JQuery, JQPlot graphing, and other useful items for jquery.
 email: travis@pessetto.com
 executables: []
 extensions: []
@@ -23,67 +23,67 @@ files:
 - lib/jquery_cheats.rb
 - lib/railtie.rb
 - app/assets/javascripts/jqueryCheats.js
-- vendor/assets/excanvas.js
-- vendor/assets/jquery.jqplot.css
-- vendor/assets/jquery.jqplot.js
-- vendor/assets/plugins/jqplot.barRenderer.js
-- vendor/assets/plugins/jqplot.barRenderer.min.js
-- vendor/assets/plugins/jqplot.BezierCurveRenderer.js
-- vendor/assets/plugins/jqplot.BezierCurveRenderer.min.js
-- vendor/assets/plugins/jqplot.blockRenderer.js
-- vendor/assets/plugins/jqplot.blockRenderer.min.js
-- vendor/assets/plugins/jqplot.bubbleRenderer.js
-- vendor/assets/plugins/jqplot.bubbleRenderer.min.js
-- vendor/assets/plugins/jqplot.canvasAxisLabelRenderer.js
-- vendor/assets/plugins/jqplot.canvasAxisLabelRenderer.min.js
-- vendor/assets/plugins/jqplot.canvasAxisTickRenderer.js
-- vendor/assets/plugins/jqplot.canvasAxisTickRenderer.min.js
-- vendor/assets/plugins/jqplot.canvasOverlay.js
-- vendor/assets/plugins/jqplot.canvasOverlay.min.js
-- vendor/assets/plugins/jqplot.canvasTextRenderer.js
-- vendor/assets/plugins/jqplot.canvasTextRenderer.min.js
-- vendor/assets/plugins/jqplot.categoryAxisRenderer.js
-- vendor/assets/plugins/jqplot.categoryAxisRenderer.min.js
-- vendor/assets/plugins/jqplot.ciParser.js
-- vendor/assets/plugins/jqplot.ciParser.min.js
-- vendor/assets/plugins/jqplot.cursor.js
-- vendor/assets/plugins/jqplot.cursor.min.js
-- vendor/assets/plugins/jqplot.dateAxisRenderer.js
-- vendor/assets/plugins/jqplot.dateAxisRenderer.min.js
-- vendor/assets/plugins/jqplot.donutRenderer.js
-- vendor/assets/plugins/jqplot.donutRenderer.min.js
-- vendor/assets/plugins/jqplot.dragable.js
-- vendor/assets/plugins/jqplot.dragable.min.js
-- vendor/assets/plugins/jqplot.enhancedLegendRenderer.js
-- vendor/assets/plugins/jqplot.enhancedLegendRenderer.min.js
-- vendor/assets/plugins/jqplot.funnelRenderer.js
-- vendor/assets/plugins/jqplot.funnelRenderer.min.js
-- vendor/assets/plugins/jqplot.highlighter.js
-- vendor/assets/plugins/jqplot.highlighter.min.js
-- vendor/assets/plugins/jqplot.json2.js
-- vendor/assets/plugins/jqplot.json2.min.js
-- vendor/assets/plugins/jqplot.logAxisRenderer.js
-- vendor/assets/plugins/jqplot.logAxisRenderer.min.js
-- vendor/assets/plugins/jqplot.mekkoAxisRenderer.js
-- vendor/assets/plugins/jqplot.mekkoAxisRenderer.min.js
-- vendor/assets/plugins/jqplot.mekkoRenderer.js
-- vendor/assets/plugins/jqplot.mekkoRenderer.min.js
-- vendor/assets/plugins/jqplot.meterGaugeRenderer.js
-- vendor/assets/plugins/jqplot.meterGaugeRenderer.min.js
-- vendor/assets/plugins/jqplot.ohlcRenderer.js
-- vendor/assets/plugins/jqplot.ohlcRenderer.min.js
-- vendor/assets/plugins/jqplot.pieRenderer.js
-- vendor/assets/plugins/jqplot.pieRenderer.min.js
-- vendor/assets/plugins/jqplot.pointLabels.js
-- vendor/assets/plugins/jqplot.pointLabels.min.js
-- vendor/assets/plugins/jqplot.pyramidAxisRenderer.js
-- vendor/assets/plugins/jqplot.pyramidAxisRenderer.min.js
-- vendor/assets/plugins/jqplot.pyramidGridRenderer.js
-- vendor/assets/plugins/jqplot.pyramidGridRenderer.min.js
-- vendor/assets/plugins/jqplot.pyramidRenderer.js
-- vendor/assets/plugins/jqplot.pyramidRenderer.min.js
-- vendor/assets/plugins/jqplot.trendline.js
-- vendor/assets/plugins/jqplot.trendline.min.js
+- vendor/assets/javascripts/jqplot/excanvas.js
+- vendor/assets/javascripts/jqplot/jquery.jqplot.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.barRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.barRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.BezierCurveRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.BezierCurveRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.blockRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.blockRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.bubbleRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.bubbleRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.canvasAxisLabelRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.canvasOverlay.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.canvasOverlay.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.canvasTextRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.canvasTextRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.categoryAxisRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.categoryAxisRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.ciParser.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.ciParser.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.cursor.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.cursor.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.dateAxisRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.donutRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.donutRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.dragable.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.dragable.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.enhancedLegendRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.funnelRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.funnelRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.highlighter.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.highlighter.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.json2.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.json2.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.logAxisRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.logAxisRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.mekkoAxisRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.mekkoAxisRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.mekkoRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.mekkoRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.meterGaugeRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.meterGaugeRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.ohlcRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.ohlcRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pieRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pieRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pointLabels.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pointLabels.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pyramidAxisRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pyramidAxisRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pyramidGridRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pyramidGridRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pyramidRenderer.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.pyramidRenderer.min.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.trendline.js
+- vendor/assets/javascripts/jqplot/plugins/jqplot.trendline.min.js
+- vendor/assets/stylesheets/jquery.jqplot.css
 - README.md
 - Rakefile
 - Manifest