Creating and Configuring a Bullet Chart

Overview

Based on Stephen Few’s Bullet Graph Spec

“The bullet graph was developed to replace the meters and gauges that are often used on dashboards. Its linear and no-frills design provides a rich display of data in a small space, which is essential on a dashboard.”

– Stephen Few

How to create a basic chart

Include angularjs-nvd3-directives.js in your HTML file.

<script src="dist/angularjs-nvd3-directives.js"></script>

Include other dependencies for nvd3.js and d3.js.

<script src="../build/components/d3/d3.js"></script>
<script src="../build/components/nvd3/nv.d3.js"></script>
<link rel="stylesheet" href="path/to/nv.d3.css"/>

In the Angular App, include nvd3ChartDirectives as a dependency.

var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

Create an Angular.js Controller, and assign json data to a scope variable.

1 function ExampleCtrl($scope){
2     $scope.exampleData =  {
3         "title": "Revenue",
4         "subtitle": "US$, in thousands",
5         "ranges": [150, 225, 300],
6         "measures": [220],
7         "markers": [250]
8     };
9 }

Include the chart directive in HTML. The data html attribute should point to the scope variable (exampleData). Other directive attributes should be the same as the public attributes associated with each chart.

<div ng-controller="ExampleCtrl">
	<nvd3-bullet-chart
    	data="exampleData"
        id="exampleId"
        margin="{left:75,top:60,bottom:60,right:10}"
        width="550"
        height="160">
        	<svg></svg>
    </nvd3-bullet-chart>
</div>

Configuration Options

ID

Identifier for the chart. Utilized heavily by d3.js and nvd3.js when creating and updating charts. If there is more than one chart on a page, every chart should have a unique id. Datatype: String

Width

Controls the display width of the chart. Datatype: Number

Height

Controls the display height of the chart. Datatype: Number

Margin

Controls the external margin of the chart.

Datatype: Object, Number: {left:0,top:0,bottom:0,right:0}

No Data

Defines the message displayed when data is not available.

Datatype: String

<div ng-controller="ExampleCtrl">
	<nvd3-bullet-chart
    	data="noDataData"
        id="noDataExample"
        margin="{left:75,top:60,bottom:60,right:10}"
        width="550"
        height="160"
        noData="No Data For You!">
        	<svg></svg>
    </nvd3-bullet-chart>
</div>

Tooltips

Enables (true) or Disables (false) rendering of the tooltips.

The Interactive attribute must be included and set to true before tooltips will be rendered.

Datatype: boolean - (true/false)

<div ng-controller="ExampleCtrl">
	<nvd3-bullet-chart
    	data="exampleData"
        id="toolTipExample"
        margin="{left:75,top:60,bottom:60,right:10}"
        width="550"
        height="160"
        interactive="true"
        tooltips="true">
        	<svg></svg>
    </nvd3-bullet-chart>
</div>

Controls how the tooltips are displayed.

The Interactive attribute must be included and set to true before tooltips will be rendered.

The Tooltips attribute must be included and set to true before tooltips will be rendered.

Datatype: Function

The function has the following signature function(key, x, y, e, graph), and should return a String.

$scope.toolTipContentFunction = function(){
	return function(key, x, y, e, graph) {
    	return  'Super New Tooltip' +
        	'<h1>' + key + '</h1>' +
            '<p>' +  y + ' at ' + x + '</p>'
	}
}

<div ng-controller="ExampleCtrl">
	<nvd3-bullet-chart
    	data="exampleData"
        id="toolTipContentExample"
        margin="{left:75,top:60,bottom:60,right:10}"
        width="550"
        height="160"
        interactive="true"
        tooltips="true"
        tooltipcontent="toolTipContentFunction()">
        	<svg></svg>
    </nvd3-bullet-chart>
</div>

Orient

Determines the direction that axis numbers will be displayed. Left, top is small to large. Right and bottom displays the axis from large to small. default is left