Changing data in a graph after initial creation #23

filtoid · 2014-07-15T13:44:09Z

It's not clear from the documentation how to update an existing graph. I've tried simply assigning a new set of data to the scope variable but this seems to add data and then draw new data over the top - creating new Y axes as well. Is this even possible or is it a 'write once' object with updates requiring a page refresh.

nikolaswise · 2014-07-28T17:01:22Z

The examples are all pulling in external JSON, so we haven't really spent a lot of time working with live updates yet. We've structured the directives so they should be taking advantage of Angulars $scope bindings, and if the scope changes it should just redraw the chart.

Do you have some sample code I can take a look at that demonstrates the problem?

filtoid · 2014-07-30T10:04:41Z

Index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script src="http://dimplejs.org/dist/dimple.v2.0.0.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
        <script src="angular-dimple.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-app="myApp">
        <div ng-controller="myController">
            <graph data="graphData">
                <x field="Month" order-by="Date"></x>
                <y field="Unit Sales"></y>
                <line field="Owner" value="Aperture"></line>
            </graph>
            <button id="update_data" ng-click="update_data()">Change Data</button>
        </div>
    </body>
</html>

app.js

angular.module('myApp', [
  'angular-dimple'
])

.controller('myController', ['$scope',  function($scope) {

        $scope.generate_data = function () {
            var retary = [];
            for (var i = 0; i < 5; i++) {
                var date = new Date(Date.now() + i * 86400000);
                var obj = {
                    'Date': date,
                    'Month': date.getMonth() + '-' + date.getDate(),
                    'Owner': 'Aperture',
                    'Unit Sales': (Math.random() * 1000) + 1000
                };
                retary[retary.length] = obj;
            }
            return {'data': retary};
        };

        $scope.update_data = function () {
            $scope.graphData = $scope.generate_data().data;
        };

        $scope.update_data();

    }]);

The problem is exhibited on my machine (MacOS running Chrome) - basically the data draws as expected but it doesn't remove the old stuff and generates new axes on the wrong side of the graph (subsequent data draws the axes over the second axes location).

I looked through the code and it seems to be simply reassigning the data object internally so I don't understand why it isn't working (as doing this in vanilla dimple appears to work).

Thanks for looking into this.

nikolaswise · 2014-07-30T16:31:58Z

Thanks @filtoid. @paulcpederson and figured out what was going on. Right now we're binding data to the series rather than the graph - so calling chart.draw() just redraws the entire chart (including axis and legend) with the new data in the series, rather than redrawing the chart with all existing bits and pieces with new data.

We're going to re-architect the directive to make the charts behave as expected - what you want it to be doing is exactly what we would expect it to do. So uh ... thanks for the heads up that it don't.

We'll try to get it today or tomorrow - but PR's welcome if you want to crack into it yourself.

nikolaswise · 2014-07-31T00:04:52Z

Okay! This is fixed in #26. I used your random data controller (which is awesome) and built a demo.

http://nikolaswise.github.io/angular-dimple/examples/#/animation-test

filtoid · 2014-07-31T07:37:14Z

Perfect thanks for that :)

filtoid closed this as completed Jul 31, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Changing data in a graph after initial creation #23

Changing data in a graph after initial creation #23

filtoid commented Jul 15, 2014

nikolaswise commented Jul 28, 2014

filtoid commented Jul 30, 2014

nikolaswise commented Jul 30, 2014

nikolaswise commented Jul 31, 2014

filtoid commented Jul 31, 2014

Changing data in a graph after initial creation #23

Changing data in a graph after initial creation #23

Comments

filtoid commented Jul 15, 2014

nikolaswise commented Jul 28, 2014

filtoid commented Jul 30, 2014

nikolaswise commented Jul 30, 2014

nikolaswise commented Jul 31, 2014

filtoid commented Jul 31, 2014