alonho / angular-plotly Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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?
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.
Hi,
I am having an issue with the resize. Works in firefox but not in chrome or safari. I think that instead of watching changes on the parent div, we should watch changes on the "graph" element instead.
Updating the code to the following works:
scope.$watch(function() {
return {
'h': graph.offsetHeight,
'w': graph.offsetWidth
};
}
Cheers!
Sir i am not able apply Plotly.restyle method in your angular plotly.
Guide me regarding how can i write plotly.resize method .
Currently, it's not possible to create branches to create pull requests, thus contributing improvements isn't possible.
Do you prefer another contributing approach?
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. ๐
Is there a way to adjust the size of the figure element in %
?
e.g.:
layout.height = '100%';
layout.width = '100%';
How to add multiple y axis using angular plotly?
Without angular we can do this by adding traces. Is there any similar thing in angular plotly?
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.
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.
It will be nice tutorial session or example to have Angularcli framework to deploy this one.
Even through plotly chart with very small data will help people to start using it.
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.
I started with bower, and it's ok. but NPM is the way things are going.
even typescript is using it now.
bower install angular-plotly
pulls old version (0.1.2)
At the moment, using bower only installs the port and doesn't include the plotly.js dependency.
I am building an app and I want the graph to be the full width of its parent element. When I change the data values, the plot.ly element width resets to 700px.
need to add tests for easier contribution
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.