From 40f0305e99bef9edfe60ef4d1e295c967e188887 Mon Sep 17 00:00:00 2001
From: Prashant <prashant@networkplay.in>
Date: Thu, 29 Jan 2015 13:25:47 +0530
Subject: [PATCH] Added showXLabels for Line and Bar charts.

It enables controlling the number of labels shown on x axis. Really helpful in case there are huge number of labels.

Chart.Core.js has been edited  so, showXLabels option is available to any other chart as well if anybody wants to extend this feature.
---
 docs/01-Line-Chart.md |  4 ++++
 docs/02-Bar-Chart.md  |  4 ++++
 src/Chart.Bar.js      |  1 +
 src/Chart.Core.js     | 10 +++++++++-
 src/Chart.Line.js     |  1 +
 5 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/01-Line-Chart.md b/docs/01-Line-Chart.md
index 1a5ae84c4a4..8a35939e033 100644
--- a/docs/01-Line-Chart.md
+++ b/docs/01-Line-Chart.md
@@ -57,6 +57,10 @@ These are the customisation options specific to Line charts. These options are m
 ```javascript
 {
 
+	//Boolean or Number - Number of labels to be shown on X-Axis. false: no label displayed, true: all labels
+	displayed, 10: only 10 labels displayed
+	showXLabels: 10,
+
 	///Boolean - Whether grid lines are shown across the chart
 	scaleShowGridLines : true,
 
diff --git a/docs/02-Bar-Chart.md b/docs/02-Bar-Chart.md
index cc23f38b733..138845eff5b 100644
--- a/docs/02-Bar-Chart.md
+++ b/docs/02-Bar-Chart.md
@@ -53,6 +53,10 @@ These are the customisation options specific to Bar charts. These options are me
 
 ```javascript
 {
+	//Boolean or Number - Number of labels to be shown on X-Axis. false: no label displayed, true: all labels
+	displayed, 10: only 10 labels displayed
+	showXLabels: 10,
+
 	//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
 	scaleBeginAtZero : true,
 
diff --git a/src/Chart.Bar.js b/src/Chart.Bar.js
index 87fb26ddc40..49514f22d00 100644
--- a/src/Chart.Bar.js
+++ b/src/Chart.Bar.js
@@ -209,6 +209,7 @@
 					helpers.extend(this, updatedRanges);
 				},
 				xLabels : labels,
+				showXLabels: (this.options.showXLabels) ? this.options.showXLabels : true,
 				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
 				lineWidth : this.options.scaleLineWidth,
 				lineColor : this.options.scaleLineColor,
diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index 525b0c4330d..bb5ede7bc14 100755
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -68,6 +68,9 @@
 			// Boolean - Whether to show labels on the scale
 			scaleShowLabels: true,
 
+			// Boolean or a positive integer denoting number of labels to be shown on x axis
+			showXLabels: true,
+
 			// Interpolated JS string - can access value
 			scaleLabel: "<%=value%>",
 
@@ -1644,6 +1647,9 @@
 
 				},this);
 
+				// if showXLabels is a number then divide and determine how many xLabels to skip before showing next label
+				// else, if showXLabels is true, print all labels, else never print
+				this.xLabelsSkipper = isNumber(this.showXLabels) ? Math.ceil(this.xLabels.length/this.showXLabels) : (this.showXLabels === true) ? 1 : this.xLabels.length+1;
 				each(this.xLabels,function(label,index){
 					var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
 						// Check to see if line/bar here and decide where to place the line
@@ -1695,7 +1701,9 @@
 					ctx.font = this.font;
 					ctx.textAlign = (isRotated) ? "right" : "center";
 					ctx.textBaseline = (isRotated) ? "middle" : "top";
-					ctx.fillText(label, 0, 0);
+					if(index % this.xLabelsSkipper === 0) {
+						ctx.fillText(label, 0, 0);
+					}
 					ctx.restore();
 				},this);
 
diff --git a/src/Chart.Line.js b/src/Chart.Line.js
index 34ad85b4d0a..ad8bc0aa842 100644
--- a/src/Chart.Line.js
+++ b/src/Chart.Line.js
@@ -193,6 +193,7 @@
 					helpers.extend(this, updatedRanges);
 				},
 				xLabels : labels,
+				showXLabels: (this.options.showXLabels) ? this.options.showXLabels : true,
 				font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
 				lineWidth : this.options.scaleLineWidth,
 				lineColor : this.options.scaleLineColor,