Browse files

Merge pull request #18 from cwarden/bullet-title-position-option

Add support for bullet title position
  • Loading branch information...
2 parents eae35b8 + f31b9b3 commit 0fdbc1ed3b048d93924c918f42520575e88a2878 @pamval pamval committed May 18, 2012
Showing with 86 additions and 19 deletions.
  1. +75 −13 src/pvc/pvcBulletChart.js
  2. +11 −6 src/pvcTestBullet.html
View
88 src/pvc/pvcBulletChart.js
@@ -47,6 +47,9 @@ pvc.BulletChart = pvc.BaseChart.extend({
bulletRanges: null, // Ranges
bulletTitle: "Bullet", // Title
bulletSubtitle: "", // Subtitle
+ bulletTitlePosition: "left", // Position of bullet title relative to bullet
+
+
axisDoubleClickAction: null,
@@ -111,31 +114,88 @@ pvc.BulletChartPanel = pvc.BasePanel.extend({
this.base();
var anchor = myself.chart.options.orientation=="horizontal"?"left":"bottom";
- var size, angle, align, titleOffset, ruleAnchor, leftPos, topPos;
+ var size, angle, align, titleLeftOffset, titleTopOffset, ruleAnchor, leftPos, topPos, titleSpace;
if(myself.chart.options.orientation=="horizontal"){
size = this.width - this.chart.options.bulletMargin - 20;
angle=0;
- align = "right";
- titleOffset = 0;
+ switch (myself.chart.options.bulletTitlePosition) {
+ case 'top':
+ leftPos = this.chart.options.bulletMargin;
+ titleLeftOffset = 0;
+ align = 'left';
+ titleTopOffset = -12;
+ titleSpace = parseInt(myself.chart.options.titleSize/2);
+ break;
+ case 'bottom':
+ leftPos = this.chart.options.bulletMargin;
+ titleLeftOffset = 0;
+ align = 'left';
+ titleTopOffset = myself.chart.options.bulletSize + 32;
+ titleSpace = 0;
+ break;
+ case 'right':
+ leftPos = 5;
+ titleLeftOffset = size + 5;
+ align = 'left';
+ titleTopOffset = parseInt(myself.chart.options.bulletSize/2);
+ titleSpace = 0;
+ break;
+ case 'left':
+ default:
+ leftPos = this.chart.options.bulletMargin;
+ titleLeftOffset = 0;
+ titleTopOffset = parseInt(myself.chart.options.bulletSize/2);
+ align = 'right';
+ titleSpace = 0;
+ }
ruleAnchor = "bottom";
- leftPos = this.chart.options.bulletMargin;
topPos = function(){
//TODO: 10
- return (this.index * (myself.chart.options.bulletSize + myself.chart.options.bulletSpacing));
+ return (this.index * (myself.chart.options.bulletSize + myself.chart.options.bulletSpacing)) + titleSpace;
};
}
else
{
size = this.height - this.chart.options.bulletMargin - 20;
- angle = -Math.PI/2;
- align = "left";
- titleOffset = -12;
+ switch (myself.chart.options.bulletTitlePosition) {
+ case 'top':
+ leftPos = this.chart.options.bulletMargin;
+ titleLeftOffset = 0;
+ align = 'left';
+ titleTopOffset = -20;
+ angle = 0;
+ topPos = undefined;
+ break;
+ case 'bottom':
+ leftPos = this.chart.options.bulletMargin;
+ titleLeftOffset = 0;
+ align = 'left';
+ titleTopOffset = size + 20;
+ angle = 0;
+ topPos = 20;
+ break;
+ case 'right':
+ leftPos = 5;
+ titleLeftOffset = this.chart.options.bulletSize + 40;
+ align = 'left';
+ titleTopOffset = size;
+ angle = -Math.PI/2;
+ topPos = undefined;
+ break;
+ case 'left':
+ default:
+ leftPos = this.chart.options.bulletMargin;
+ titleLeftOffset = -12;
+ titleTopOffset = this.height - this.chart.options.bulletMargin - 20;
+ align = 'left';
+ angle = -Math.PI/2;
+ topPos = undefined;
+ }
ruleAnchor = "right";
leftPos = function(){
return myself.chart.options.bulletMargin + this.index * (myself.chart.options.bulletSize + myself.chart.options.bulletSpacing);
};
- topPos = undefined;
}
@@ -144,7 +204,7 @@ pvc.BulletChartPanel = pvc.BasePanel.extend({
[pvc.BasePanel.orthogonalLength[anchor]](size)
[pvc.BasePanel.parallelLength[anchor]](this.chart.options.bulletSize)
.margin(20)
- .left(leftPos) // titles will be on left always
+ .left(leftPos)
.top(topPos);
@@ -207,7 +267,8 @@ pvc.BulletChartPanel = pvc.BasePanel.extend({
.left(-10)
.textAlign(align)
.textBaseline("bottom")
- .left(titleOffset)
+ .left(titleLeftOffset)
+ .top(titleTopOffset)
.text(function(d){
return d.formattedTitle;
});
@@ -217,7 +278,8 @@ pvc.BulletChartPanel = pvc.BasePanel.extend({
.textAngle(angle)
.textAlign(align)
.textBaseline("top")
- .left(titleOffset)
+ .left(titleLeftOffset)
+ .top(titleTopOffset)
.text(function(d){
return d.formattedSubtitle;
});
@@ -330,4 +392,4 @@ pvc.BulletChartPanel = pvc.BasePanel.extend({
return data;
}
-});
+});
View
17 src/pvcTestBullet.html
@@ -74,6 +74,7 @@
<li>bulletSize - bullet height</li>
<li>bulletSpacing - spacing between bullets</li>
<li>bulletMargin - left margin</li>
+ <li>bulletTitlePosition - position of bullet title relative to bullet</li>
</ul>
<h2>Extension Points</h2>
The following&nbsp;list&nbsp;serves as the basis
@@ -121,6 +122,7 @@
// Specific values
bulletTitle: "My Test",
bulletSubtitle: "description",
+ bulletTitlePosition: "left",
bulletMeasures: [50],
bulletMarkers: [90],
bulletRanges: [30,80,100],
@@ -187,7 +189,8 @@
// Specific values
bulletRanges: [30,80,100],
bulletTitle: "My Test",
- bulletSubtitle: "value"
+ bulletSubtitle: "value",
+ bulletTitlePosition: "top"
});
bullet2.setData(bullet_valueOnly);
bullet2.render();
@@ -196,23 +199,24 @@
<div id="pvcBullet2"></div>
<h4>Bullet chart based on a datasource with two columns: Title and value</h4>
-<textarea cols="55" rows="15" id="pvcBullet3Code">
+<textarea cols="55" rows="20" id="pvcBullet3Code">
var bullet3 = new pvc.BulletChart({
canvas: "pvcBullet3",
width: 400,
- height: 250,
+ height: 300,
animate: false,
title: "Bullet charts, title and value",
titlePosition: "top",
titleSize: 40,
bulletSize: 25,
- bulletSpacing: 50,
+ bulletSpacing: 60,
bulletMargin: 100,
// Specific values
bulletRanges: [200,500,1000],
- bulletSubtitle: "description"
+ bulletSubtitle: "description",
+ bulletTitlePosition: "bottom",
});
bullet3.setData(bullet_NameValue);
bullet3.render();
@@ -260,7 +264,8 @@
orientation: "vertical",
bulletSize: 25,
bulletSpacing: 80,
- bulletMargin: 30
+ bulletMargin: 30,
+ bulletTitlePosition: "left"
});
bullet5.setData(bullet_NameDescValueMarkerRanges);

0 comments on commit 0fdbc1e

Please sign in to comment.