angular-plotly

WebJar for angular-plotly

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-plotly
Last Version

Last Version

0.1.3
Release Date

Release Date

Type

Type

jar
Description

Description

angular-plotly
WebJar for angular-plotly
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/alonho/angular-plotly

Download angular-plotly

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-plotly/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-plotly</artifactId>
    <version>0.1.3</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-plotly/
implementation 'org.webjars.bower:angular-plotly:0.1.3'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-plotly/
implementation ("org.webjars.bower:angular-plotly:0.1.3")
'org.webjars.bower:angular-plotly:jar:0.1.3'
<dependency org="org.webjars.bower" name="angular-plotly" rev="0.1.3">
  <artifact name="angular-plotly" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-plotly', version='0.1.3')
)
libraryDependencies += "org.webjars.bower" % "angular-plotly" % "0.1.3"
[org.webjars.bower/angular-plotly "0.1.3"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bower : angular jar [1.0.0,2)
org.webjars.bower : plotly.js jar [1.10.2,2)

Project Modules

There are no modules declared in this project.

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

Versions

Version
0.1.3