teachrdan / angular-plotly

Angular 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();
    }
  });
};