JarCastingAngular Plotly.js
Usage
Install with bower:
bower install angular-plotly
Include angular, plotly and angular-plotly:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="bower_components/angular-plotly/src/angular-plotly.js"></script>
Add plotly dependency:
var app = angular.module('yourApp', ['plotly']);
Add a chart:
<plotly plotly-data="data" plotly-layout="layout" plotly-options="options"></plotly>
The values expected for data, layout and options can be found in plotly's documentation.
Running the example
Run a simple webserver from the root of your repository:
python -m SimpleHTTPServer 8000
Open the following url:
http://127.0.0.1:8000/example/index.html
Optional Event Subscription:
Plotly can also be initialized with plotly-events
<plotly plotly-data="data" plotly-layout="layout" plotly-options="options" plotly-events="plotlyEvents"></plotly>
Where plotlyEvents is a function that accepts the plotly.graph Object as a parameter. This function is only called once during initialization and can be used to create listeners for the various plot events such as:
- plotly_click
- plotly_beforehover
- plotly_hover
- plotly_unhover
- plotly_relayout
- plotly_selecting
- plotly_deselect
- plotly_doubleclick
- plotly_beforeexport
- plotly_afterexport
- plotly_afterplot
- plotly_redraw
- plotly_clickannotation
An example plotlyEvents definition is:
$scope.NumberOfSelectedPoints = 0;
$scope.plotlyEvents = function (graph){
graph.on('plotly_selecting', function(event){
if (event) {
$scope.NumberOfSelectedPoints = event.points.length;
$scope.$digest();
}
});
};