associating plotly graphs and angular JS data

Question

I am trying to create a plotly.js plot with angularJS.

This is the app.js ...

var app = angular.module('graphPlotterDemoApp', []);

app.controller('PlotCtrl1', function ($scope) {
    $scope.data = [{
        x: [1, 2, 3, 4],
        y: [10, 15, 12, 17]}];
});

app.directive('linePlot', function () {

    // Create a link function
    function linkFunc(scope, element, attrs) {
        scope.$watch('data', function (plots) {
            var layout = {
                'width': attrs.width,
                'height': attrs.height,
                'pad':'0',
                'margin': { 't': 0, 'b':20, 'l':40, 'r':0 },
            };

            Plotly.newPlot(element[0], plots, layout);
        });
    }

    // Return this function for linking ...
    return {
        link: linkFunc
    };
});

And I have this html

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Plotly Graph Plotter Directive for AngularJS - Demo</title>
    <script src="jquery.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="plotly.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="graphPlotterDemoApp">

before div = PlotCtrl1
<div  ng-controller="PlotCtrl1">
    {{data}}
    <table>
    <thead><tr><td>x</td><td>y</td></tr></thead>
    <tbody ng-repeat='x1 in data[0].x'>
        <tr>
            <td><input type='number' ng-model='data[0].x[$index]'></td>
            <td><input type='number' ng-model='data[0].y[$index]'></td>
        </tr>    
    </tbody>
    </table>

    <line-plot width=300, height=200>
</div>

</body>
</html>

The plot appears, but it turns out that when I am changing the value within the input boxes, although the data actually changes, the plot does not change. Is there a way of fixing this?

Try using $watchCollection or $watch with the objectEquality parameter set to true for complex objects. e.g $watch('data',function(){},true); — Simon McClive
– Simon McClive, Commented Feb 8, 2016 at 22:31
Yes! Thanks you!!!! I would never have been able to do it by myself. You can post that as an answer, and Ill be happy to uproot you :) — ssm
– ssm, Commented Feb 8, 2016 at 22:43

Simon McClive · Accepted Answer · 2016-02-08 22:44:04Z

1

Try using $watchCollection or $watch with the objectEquality parameter set to true for complex objects. e.g $watch('data',function(){},true);

answered Feb 8, 2016 at 22:44

Simon McClive

2,6163 gold badges19 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

associating plotly graphs and angular JS data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related