Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add support for bullet title position

Bullet titles can be set with the bulletTitlePosition option.  Valid
values are "left" (the default, as prior to this change), "right",
"top", and "bottom".  For bullet graphs with vertical orientation,
titles on left and right are rotated 90 degrees; on top and bottom,
titles are not rotated.
  • Loading branch information...
commit f31b9b3d666015485f4ec1686dde42e2ef0fa04a 1 parent eae35b8
@cwarden cwarden authored
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);
Please sign in to comment.
Something went wrong with that request. Please try again.