Good afternoon

I have a angular controller which has data that i show in a chart

<nvd3-multi-bar-horizontal-chart
                ng-model="Data"
                data="Data"
                id="exampleId"
                xAxisTickFormat="xAxisTickFormatFunction()"
                yAxisTickFormat="yAxisTickFormatFunction()"
                height={{height}}
                showValues="true"
                color="colorFunction()"
                showXAxis="true"
                margin="{left:100}"
                interactive="true"
                >
            <svg></svg>
</nvd3-multi-bar-horizontal-chart>

EDIT: What the app needs to do is show all the data in an array and the user can adjust 1 element of that array

i tried simulating this for now with a button on the page with ng-click which executes the following method which adjusts 1 element in the array

$scope.buttonClick = function(){

        $scope.Data[0].values[0][1] = 2345; //this changes the data but does not update the chart

        $scope.Data = [
            {
                key: "timeData",
                values: [
                    ["test", 1234]
                ]
            }
        ] //this pletely overrides the array and replaces it (which i dont want)
    };

The controller updates the Data but the chart does not update

I tested this with showing the first entry from the data in a paragraph which does update correctly

Does anyone have an idea how to solve this

(link to directive used in angular chart directive)

Thanks in advance

Good afternoon

I have a angular controller which has data that i show in a chart

<nvd3-multi-bar-horizontal-chart
                ng-model="Data"
                data="Data"
                id="exampleId"
                xAxisTickFormat="xAxisTickFormatFunction()"
                yAxisTickFormat="yAxisTickFormatFunction()"
                height={{height}}
                showValues="true"
                color="colorFunction()"
                showXAxis="true"
                margin="{left:100}"
                interactive="true"
                >
            <svg></svg>
</nvd3-multi-bar-horizontal-chart>

EDIT: What the app needs to do is show all the data in an array and the user can adjust 1 element of that array

i tried simulating this for now with a button on the page with ng-click which executes the following method which adjusts 1 element in the array

$scope.buttonClick = function(){

        $scope.Data[0].values[0][1] = 2345; //this changes the data but does not update the chart

        $scope.Data = [
            {
                key: "timeData",
                values: [
                    ["test", 1234]
                ]
            }
        ] //this pletely overrides the array and replaces it (which i dont want)
    };

The controller updates the Data but the chart does not update

I tested this with showing the first entry from the data in a paragraph which does update correctly

Does anyone have an idea how to solve this

(link to directive used in angular chart directive)

Thanks in advance

• javascript
• angularjs
• d3.js

Share Improve this question Follow edited Apr 16, 2014 at 15:09 asked Apr 16, 2014 at 13:31 user3541398user3541398 3

• Can you show how you update the data? I just did it in a fiddle with no issue ... jsfiddle/ncapito/A6Tk5 – Nix Commented Apr 16, 2014 at 14:00
• thanks for the help already, with looking at the fiddle you did i atleast saw it change which is already a step forward, I editted my post a bit to show you what the code does and what i tried to do to change the data. in the buttonClick method you see 2 things i tried, once which actually updates and one that updates the data but not the chart. I don't know why it does this ... Regards – user3541398 Commented Apr 16, 2014 at 15:10
• It doesn't know the data is changing... it only looks at the reference to $scope.Data. – Nix Commented Apr 16, 2014 at 15:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Please post your solution.

The documentation says to set objectequality="true"

Ref: nvd3

From looking at the source you need to set objectequality="false". It sets up a $scope.$watch(data, objectequality).

I am no expert on this directive but try:

<nvd3-multi-bar-horizontal-chart
      ...
      objectequality="false"
      ...
>
        <svg></svg>
</nvd3-multi-bar-horizontal-chart>

You can also use this methode:

$timeout(function () {
  $scope.api.refresh();
}, 1);