alonho / angular-plotly Goto Github PK

License: MIT License

JavaScript 51.64% HTML 48.36%

angular-plotly's Introduction

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

angular-plotly's People

Contributors

Stargazers

Watchers

angular-plotly's Issues

Bower install pulls old version

bower install angular-plotly

pulls old version (0.1.2)

updating data when only updating graph data

In the case of updating data on a short interval - e.g., one second - the update approach in this directive may not be optimal.

https://community.plot.ly/t/what-is-the-most-performant-way-to-update-a-graph-with-new-data/639

Looks like it should be using either extendTraces or restyle methods from plotly.

There is no dependencies in the bower for plot.ly

At the moment, using bower only installs the port and doesn't include the plotly.js dependency.

Multiple graph on single page.

I've this issue.
I need multiple graph on single page.
In template i have:

        <div class="col-md-12">
            <plotly id="grafico01" plotly-data="vm.data" plotly-layout="vm.layout" plotly-options="vm.options" plotly-events="vm.eventGrafico01"></plotly>
        </div>
    </div>

    <div class="row">
        <div class="col col-md-12">
            <plotly id="grafico02"  plotly-data="vm.sentimentbycategory" plotly-layout="vm.layout1" plotly-options="vm.sentimentbycategoryoptions" plotly-events="vm.eventGrafico02"></plotly>
        </div>
    </div>

and all binding are correctly filled.
But the html element used by plotly it's always the first.

Destroying & recreating a chart inherits zoom levels

Hello,

we are currently facing an issue when we destroy a view where a chart is displayed. This happens quite often in our application, because charts are rendered in a modal only if a user clicked on a button to show details for a given entity. When the modal is closed, the chart is supposed to be destroyed. When the user clicks the same button on another entity, another chart (of the same type, just with different data) is supposed to be drawn inside a modal. However, it seems that the "new" chart inherits zoom levels from the old chart. I thought it might have something to do with a missing scope.$on($destroy, function (){}); in this directive, which is why I added

scope.$on('$destroy', function() {
    Plotly.Plots.purge(graph);
    element.remove();
});

to the bottom of the directive. Unfortunately, this does not change anyhing. New charts are always created with the zoom levels of the old chart. 😒

Plotly error "Resize must be passed a displayed plot div element."

When resizing a window while a plot is not visible, plotly logs this error.
To fix this you can add this test in onResize() (the same check as in plotly that triggers this error):

let e = window.getComputedStyle(graph).display;
if ( !e || "none" === e) return;

I don't know if this has an impact on the onResize() functionality.

attributes conflicts

Hi there !

I faced an issue when I tried to use this plotly directive with angular-material framework. The "layout" attribute of the plotly directive was always undefined and then ignored by plotly so I was not able to display a title (for example) to my graph neither change their size.

The reason is because "layout" as html plotly tag attribute is also an angular-material directive. I suppose that the framework was then transforming the attribute causing him to be undefined.

I renamed the attributes of the plotly directive to "plotly-data", "plotly-layout" and "plotly-options" and it totally resolved my issue.

Well, I don't know if you should actually change the code and prefix attributes or if each user should adapt it itself but, now, people are aware of this kind of conflict.

10 $digest iterations reached

Hello. I'm not sure if this is an issue with angular-plotly, but every time I change the data I get this error:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: regularInterceptedExpression","newVal":[{"x":"...","y":"...","type":"bar"}],"oldVal":[{"x":"...","y":"...","type":"bar"}]}],[{"msg":"fn: regularInterceptedExpression","newVal":[{"x":"...","y":"...","type":"bar"}],"oldVal":"..."}],[{"msg":"fn: regularInterceptedExpression","newVal":[{"x":"...","y":"...","type":"bar"}],"oldVal":"..."}],[{"msg":"fn: regularInterceptedExpression","newVal":[{"x":"...","y":"...","type":"bar"}],"oldVal":"..."}],[{"msg":"fn: regularInterceptedExpression","newVal":[{"x":"...","y":"...","type":"bar"}],"oldVal":"..."}]]

The graph does actually update, but it stops the other operations because of the error. Any idea what might be going on?

Updating the code to the following works:

scope.$watch(function() {
            return {
              'h': graph.offsetHeight,
              'w': graph.offsetWidth
            };
          }

Cheers!

Adjust size in percent

Is there a way to adjust the size of the figure element in %?

e.g.:

layout.height = '100%';
layout.width = '100%';