An AngularJS directive for plotly.js
npm install angular-plotlyInstall with bower:
``bash`
bower install angular-plotly
Include angular, plotly and angular-plotly:
`html`
Add plotly dependency:
`js`
var app = angular.module('yourApp', ['plotly']);
Add a chart:
`html`
The values expected for data, layout and options can be found in plotly's documentation.
Run a simple webserver from the root of your repository:
`bash`
python -m SimpleHTTPServer 8000
Open the following url:
`
http://127.0.0.1:8000/example/index.html
Plotly can also be initialized with plotly-eventshtml`
Where 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:
`javascript``
$scope.NumberOfSelectedPoints = 0;
$scope.plotlyEvents = function (graph){
graph.on('plotly_selecting', function(event){
if (event) {
$scope.NumberOfSelectedPoints = event.points.length;
$scope.$digest();
}
});
};