Charts
Pages comes bundled with two popular charting libraries: Rickshaw and NVD3. These libraries render charts in SVG format which makes them highly customizable using CSS and JS.
Rickshaw Charts
Rickshaw is a simple framework for drawing charts of time series data on a web page, built on top of Mike Bostock's delightful D3 library. These charts can be powered by static historical data sets, or living data that continuously updates in real time.
jQuery users
Please refer to Rickshaw Tutorial to learn more about the library
Step one
Include the plugin stylesheet rickshaw.min.css.css <head>
. Please view Stylesheet inclusion guideline rules
<link type="text/css" rel="stylesheet" href="assets/plugins/rickshaw/rickshaw.min.css"></link>
Step two
Include the plugin javascript file and D3 library inside the
<body>
before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/d3/d3.min.js"></script>
<script src="assets/plugins/rickshaw/rickshaw.min.js"></script>
Step three
Create the markup
<div id="chart"></div>
Step four
Apply the plugin. This example renders a basic area chart
<script>
var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 580,
height: 250,
series: [ {
color: 'steelblue',
data: data
} ]
} );
graph.render();
</script>
AngularJS users
Pages uses angular-rickshaw directive for Rickshaw charts.
Step One
Include the rickshaw
ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more
Step two
Add chart data to scope
$scope.options = {
renderer: 'line'
};
$scope.features = {
hover: {
xFormatter: function(x) {
return 't=' + x;
},
yFormatter: function(y) {
return '$' + y;
}
}
};
$scope.series = [{
name: 'Series 1',
color: 'steelblue',
data: [{
x: 0,
y: 23
}, {
x: 1,
y: 15
}, {
x: 2,
y: 79
}, {
x: 3,
y: 31
}, {
x: 4,
y: 60
}]
}, {
name: 'Series 2',
color: 'lightblue',
data: [{
x: 0,
y: 30
}, {
x: 1,
y: 20
}, {
x: 2,
y: 64
}, {
x: 3,
y: 50
}, {
x: 4,
y: 15
}]
}];
Step three
Add following markup to your page. Note the use of directive rickshaw
<rickshaw
rickshaw-options="options"
rickshaw-features="features"
rickshaw-series="series">
</rickshaw>
NVD3 Charts
NVD3 is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you.
jQuery users
Please refer to NVD3 Tutorial to learn about the basics of the library
Step one
Include the plugin stylesheet rickshaw.min.css.css <head>
. Please view Stylesheet inclusion guideline rules
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/nvd3/nv.d3.min.css"></link>
Step two
Include the plugin javascript files inside the
<body>
before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script type="text/javascript" src="assets/plugins/nvd3/lib/d3.v3.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/nv.d3.min.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/utils.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/tooltip.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/interactiveLayer.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/models/axis.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/models/line.js"></script>
<script type="text/javascript" src="assets/plugins/nvd3/src/models/lineWithFocusChart.js"></script>
Step three
Create the markup. Apply the class line-chart
to get the Pages pre-defined style for NVD3 charts. Use data-attributes to customize the style
<div id="nvd3" class="line-chart"
data-line-color="success"
data-area-color="master"
data-points="true"
data-point-color="white"
data-stroke-width="2">
<svg></svg>
</div>
Available data attributes:
Data Attribute | Available values | Description |
---|---|---|
data-line-color |
white | master | success | info | complete | primary | warning | danger | Change the line color of a line chart |
data-area-color |
white | master | success | info | complete | primary | warning | danger | Change the area color of a line chart with area option |
data-points |
true | false | Show/hide point circles |
data-point-color |
white | master | success | info | complete | primary | warning | danger | Change the point color |
data-stroke-width |
1 | 2 | 3 | Change the stroke width of a line chart. Values are in pixels |
AngularJS users
Pages uses angular-nvd3 directive for NVD3 charts.
Step One
Include the nvd3
ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more
Step two
Inject nvd3
directive into angular module, set up some chart options and push some data to the controller
angular.module('myApp', ['nvd3'])
.controller('myCtrl', function($scope){
/* Chart options */
$scope.options = { /* JSON data */ };
/* Chart data */
$scope.data = { /* JSON data */ }
})
Step three
Add following markup to your page.
<div ng-app="myApp">
<div ng-controller="myCtrl">
<nvd3 options="options" data="data"></nvd3>
</div>
</div>
Sparkline Charts
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
jQuery users
Please refer to Sparkline Documentation to learn more about the library
Step one
Include the plugin javascript files inside the
<body>
before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script type="text/javascript" src="assets/plugins/jquery-sparkline/jquery.sparkline.min.js"></script>
Step two
Create the markup.
<div id="sparkline"></div>
Step three
Apply the plugin. This example renders a basic line chart
<script>
$("#sparkline").sparkline([5,6,7,9,9,5,3,2,2,4,6,7], {type: 'line'});
</script>
AngularJS users
AngularJS directive for sparkline is based on a gist by Peter John Smith
Step One
Include the sparkline
ocLazyLoad module in your dependency list of router config. Please refer to AngularJS guide for more
Step two
Add sparkline options into scope
$scope.sparkline_pie_data = [4, 3, 2, 1];
$scope.sparkline_pie_options = {
type: 'pie',
width: 300,
height: '200',
sliceColors: ['yello','red', 'blue', 'orange']
};
Step three
Add following markup to your page.
<div jq-sparkline class="sparkline-chart" ng-model="sparkline_pie_data" opts="{{ sparkline_pie_options }}"></div>