Search code examples
javascriptxmlangularjsnvd3.jsangular-nvd3

Angular NVD3 Y-Axis sets minimum data value as max range value


I'm pushing parsed xml data to the values and labels for the nvd3 chart. For some reason, one of my discrete bar charts, the one under "Top 5 SIC by Comments" in the drop down menu, isn't doing what it should. The y-axis range is set to the minimum y value from all the points, so it makes all of the bars the same size. I've copied the settings from the other graphs I made, so I'm not sure what went wrong (I don't think it could be a typo, and my other discrete bar charts are working). I've tried changing the values in the xml file sample4.xml, but the sizes still stay the same. The only way that the bars, or rather the y-axis, reverts to its correct format, is when I manually change the number value to "900" in the controller itself, but I can't have this because I need the values to be pushed from the xml file. Is there a problem with the configuration that I'm missing? Or maybe there is a way to force the y-axis to set the max range value to the max value in the data set?

Here is my plnkr

I've tried researching online but I haven't found any instances of this bug in a forum. Any help would be appreciated.


Solution

  • Please try using api object provided by angular-nvd3 library to call it's updateWithData(data) method, each time you update the data. (if you update options too, you would call updateWithOptions (updatedOptions).

    In your .html get an api object assigned. (make sure, you don't crate the object name-barApi inside your controller's scope beforehand, that's the mistake I did.) :-

    <nvd3 options="optionsBar" data="barData" api="barApi"></nvd3>
    

    In your drop-down change event, you would put call like :-

    $scope.barApi.updateWithData(data)
    

    where data is your dataobject. Also refer the comment of [krispo commented on Sep 16, 2014] on following thread. https://github.com/krispo/angular-nvd3/issues/37