angularjs-nvd3-directives/angularjs-nvd3-directives

Angular.js directives for nvd3.js

angularjs-nvd3-directives's Issues

How to attach onclick event to bar in discrete bar chart?

Similar to:

d3.selectAll(".nv-bar").on("click", function(data) {
    doSomething();
});

Show dates as dates

Is there a way to show dates on the X Axis as actual dates isntead of milliseconds? I know in nvd3 there is a method to set the format (in which the milliseconds can be converted to a nice date format), but would not know how to do this in your directives? Is there a workaround? Thanks! (added image from your own page - I have the same issue in my sample application)

how to start both y-axis from 0 in a nvd3-line-plus-bar-chart

hi, i'm trying to create a chart where we have 2 series.
it's for comparing goals to definitely reached values.
how can we make sure that the y-axis start at the same value so we really can compare the graphs?
thanks for any enlightment

Discrete bar chart : set margin

Hello,
I've two questions :

1. In your directive 'nvd3-discrete-bar-chart', you specify scope.margin as a function link and not like a binding object. Why ?

2. I want to set a left margin to my discrete-bar chart and it did'nt work.
   After some search I found that the method initializeWidth() call initializeMargin() if "not" left margin or "not" right margin return true.
   So If I set right-margin to 0 it return true.... and I loose my margin configuration.
   Why not use angular.isDefined and set only "undefined" margin to a default margin

Thank you in advance.

Pie not refreshing after i changed my data content

hello,
i want my pie graph to refresh when i add an item to my data param array.

It does not refresh but as soon i open my chrome dev tools it refreshes.

Is this a bug?

I use windows 7

Having some trouble making with line chart options

I'm trying to format my graph and the way it's setup in the directive I don't believe works right because it doesn't pas the var 'd' back.

// in the directive
if(attrs.xaxistickformat){
    chart.xAxis.tickFormat(function(d) {
        return d3.time.format(scope.xaxistickformat())(new Date(d))
    });

    //chart.xAxis.tickFormat(scope.xaxistickformat());
}

// in my controller
$scope.xAxisTickFormat = function() {
    return "%x";
}

Gets me this but I can't figure out how to use the scope.xaxisstickformat() any other way.

add legend documentation

Add pie chart option to set nvd3 piechart align to false

Hello,
First of all, thank you for sharing you library.
Is it possible to add a variable in piechart directive (legendAlign) to set chart align to false ?

Legend and Controls overlap in charts

It looks like there are instances where you might end up getting overlapping controls and legends...

If you force the data to get refreshed or if you click on the controls, you can get the overlapping to fix itself:

I think this only happens when you're inside a hidden div. It looks like there are similar issues other folks have experienced:

novus/nvd3#107
http://stackoverflow.com/questions/15408468/nvd3-legends-overlap

I think the solution has to do with adding a chart refresh somewhere in the angular nvd3 directive file, but so far I haven't been able to find the right place yet.

This is the command I think all the examples use:

nv.utils.windowResize(chart.update);

Ideas?

Why quotes around "undefined" when checking for width and height attrs?

In a checkin that refactored setting the width and height, a change was made in the way undefined attrs are handled. Before https://github.com/cmaurer/angularjs-nvd3-directives/blob/cd7e64e6be37e3e21b6c155138a49aaf542d555f/src/directives/nvd3Directives.js we would see code that looked like this:

scope.width = (attrs.width || element[0].parentElement.offsetWidth) - (margin.left + margin.right);

As seen, if attrs.width is falsy (say, undefined), then we do our best to set the scope.width appropriately. However, after the refactoring, we see code that looks like this:

scope.width = (attrs.width  === "undefined" ? ((element[0].parentElement.offsetWidth) - (margin.left + margin.right)) : (+attrs.width - (margin.left + margin.right)));

This doesn't behave the same way. Although the unary + to convert to Number is welcome, the quotes around the "undefined" seem to be a strict test that the width is the String "undefined" and not actually undefined. If you catch my drift?

I seldom specify explicit widths and heights. Before the change, my svg elements contained annoying but harmless "NaN" values for height and width. Since the change, they contain "0", which prevents my charts from being rendered in Firefox.

Is this a bug, or are the quotes deliberate?

Implement Sparkline Chart with Bandlines

Stephen Few - Bandlines

Bandlines use horizontal bands of color in the background of the plot area to display information about the distribution of values

-- Stephen Few

Examples assume bower_components folder in root

E.g. from discreteBar.html:

<script src="../dist/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="../bower_components/nvd3/src/nv.d3.css"/>

Round Y labes

hello i'm testing stacked bars and i have big numbers in my series values

the left most digit get cuts out of image in the y axis

for example
766780

is shown as 766780,00 ( by the way i want rounded numbers) and the number 7 is missing

Help please

multiple charts do not work

I have tried both using bower install and manually adding the d3, nv.d3, nv.d3.css files, to no prevail.

The error message is a single object undefined in the browser console.

Some of the graphs work.

Please feel free to gchat me. Thanks for the good work!

Implement Dual Y Axis Chart

Y axis values are croping if digit are more than 8

In my line chart i am showing amount in Y axis if amount cross 7 digits left side digits are hiding even after setting width and height for container div its not working

Having trouble getting line chart example working

Hi, I'm having issues replicating the line chart example. I'm able to get it mostly working -- the points & line are at the correct places, the axis is correct, etc., however, the issue is that some of the HTML attributes are seemingly not getting applied.

For instance, in the top graph, I set isArea="false", but it still paints the area.

And the 2nd chart in this image is when I set isInteractive="true", which looks pretty cool but isn't the effect I was going for :(

http://i.imgur.com/5dgNWld.png

Any idea what I may be doing wrong?

bower install

Hey there - having some trouble getting this through bower. I think there's just a versioning issue in the bower.json, but not positive.

Here's what I get:
(1515)-> bower install --save angularjs-nvd3-directives
bower not-cached git://github.com/cmaurer/angularjs-nvd3-directives.git#*
bower resolve git://github.com/cmaurer/angularjs-nvd3-directives.git#*
bower download https://github.com/cmaurer/angularjs-nvd3-directives/archive/v0.0.1-beta.tar.gz
bower extract angularjs-nvd3-directives#* archive.tar.gz
bower mismatch Version declared in the json (0.0.0) is different than the resolved one (0.0.1-beta)
bower resolved git://github.com/cmaurer/angularjs-nvd3-directives.git#0.0.1-beta
bower cached git://github.com/mbostock/d3.git#3.3.7
bower validate 3.3.7 against git://github.com/mbostock/d3.git#~3.3.5
bower not-cached git://github.com/novus/nvd3.git#~v1.1.13-beta
bower resolve git://github.com/novus/nvd3.git#~v1.1.13-beta
bower not-cached git://github.com/timrwood/moment.git#~2.3.0
bower resolve git://github.com/timrwood/moment.git#~2.3.0
bower download https://github.com/novus/nvd3/archive/v1.1.13-beta.tar.gz
bower download https://github.com/timrwood/moment/archive/2.3.1.tar.gz
bower extract moment#~2.3.0 archive.tar.gz
bower resolved git://github.com/timrwood/moment.git#2.3.1
bower extract nvd3#~v1.1.13-beta archive.tar.gz
bower EMALFORMED Failed to read /var/folders/s5/918d_wcx7kgf2sknt_dpxr200000gn/T/clayton/bower/nvd3-6673-dMWThS/bower.json

Additional error details:
Unexpected token d

Multi-bar label type percent?

I looked through the source and noticed it didn't have a label type. Is there a way to make percentage label type for multi bar charts and disable the decimal point?

Also, is there a way to actually show the value in the bar on a stacked bar chart?

Great work on this library! Thanks in advance!

DOM ID requirement

Greetings,

I see in the source a lot of uses like this:

d3.select('#' + attrs.id + ' svg')

However, I've found that it seems to work happily if I replace that with:

d3.select($element[0]).select('svg')

Why would I want to make such a change? Because I have no need for an ID, and have been trying to create them dynamically but have run into issues while trying to incorporate an <nvd3-sparkline-chart/> into a cell template for ng-grid.

While the reason I can't get the dynamic ID's to work may be silly (still haven't figured it out after several hours), it would seem that it's not required for the proper functioning of the directives (though I can see that it might be useful for external interactions).

Agree/disagree?

Documentation

write it

x Labels

Hello i cannot get my months in the x axis

                        var month=[1354034656,
                                    1356626656,
                                    1359305056,
                                    1361983456,
                                    1364402656,
                                    1367081056,
                                    1369673056,
                                    1372351456,
                                    1374943456,
                                    1377621856,
                                    1380300256,
                                    1385570656];

        $scope.xAxisTickFormat = function(){
            return function(d){
              console.log(d);
                return d3.time.format('%x')(new Date(d));

            }
        }                            


<nvd3-stacked-area-chart
        margin="{left:80,top:0,bottom:30,right:10}"
        data="exampleData"
        id="exampleId"

        objectEquality="true"
        showLegend="true"
        interactive="true"
        tooltips="true"

        xAxisTickFormat="xAxisTickFormat()"
        noData="..."

        >
    <svg></svg>

the console.log prints

1355000000
1360000000
1365000000
1370000000
1375000000
1380000000
1385000000
1354034656
1385570656
1355000000
1360000000
1365000000
1370000000
1375000000
1380000000
1385000000
1354034656
1385570656

this is not my array?

why?

Grabbing Data from and URL?

Instead of having the data "hardcoded" in the javascript, would it be possible to have the data downloaded from an URL and have the chart render after the data has been downloaded?

Support multiple lines on the same graph

Update the line graph to support any amount of separate lines. It might also be useful to also allow configuring left/right y axis similar to http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html.

Add objectEquality documentation to gh-pages

Based on a number of issues related to chart not updating, add docs about object equality, when to use it, etc.

Line chart resize

I have a line chart that has two sets of data feeding into, thus drawing two lines:

        $scope.exampleData = [{
            "key": "Series 1",
            "values": $scope.areaResults
        }, {
            "key": "Series 2",
            "values": $localStorage.OverDraftLimit
        }];

$localStorage.OverDraftLimit is always a negative value. ($scope.areaResults is normally positive)
When i first draw the grid, both lines draw as expected, however when i resize the window, the grid redraws and the Y axis starts a 0 (it was at -4500), this results in the "series 2, $localStorage.OverDraftLimit" line not being shown.

Resizing issues

I've seen strange things happen to the charts as I resize the browers. Sometimes they disappear altogether and never come back.

Why do you have your own resizing function?

If I take out your resizing stuff and add the following it all seems to work just fine (only testing in FireFox)

nv.utils.windowResize(
                    function() {
                            chart.update();
                         }
                    );

pie.values() is no longer supported error in nv.d3.js

I am trying to make simple pie chart, but the console returns this error :

"pie.values() is no longer supported."

configureXaxis() uses attrs and not scope : why ?

In your function configureXaxis(), you test differents variables from attrs and not from scope. Why ?

You sould use a var x = attrs.X || scope.X and test value of 'x' no ?

My test : set xaxisrotatelabels to 20 for discretebar chart and it doesn't work if I don't change attrs to scope in configureXaxis.

Focus area in line chart with focus missing ?

I was going through the examples and I can't seem to find the focus area in the line chart with focus ? Is it yet to be implemented ?

Add auto-resize configuration to documentation

Version and Release Project

Version for the following reasons

• be able to create a release
• support non-backwards compatible changes to upgraded dependencies (i.e. nvd3, etc)
• add to bower

Events Documentation

Implement docs in gh-pages branch for events

Implement Line with Fisheye Chart

Is there a way to softwrap labels?

I saw the stagger labels, but since these labels are drawn by SVG, how would I go about adding line breaks? I'm thinking of using d3.selectAll('text') and then adding a line break after the first space.

Discrete bar with multiple series looks much thinner..

Discrete bar with multiple series looks much thinner than with one Series..
Not sure if it's bug or i am doing something wrong.

With 2 series
http://jsfiddle.net/phillycoder/DP9BT/

With 4 series, more thinner

http://jsfiddle.net/phillycoder/DP9BT/5/

Ability to put label in the middle of the donut

I need to write a number in the center of the donut pie graph.

legend color not correct, and legend missing on multibar

I updated to the last version of the directive and there are two problems:

• the small dots in the legends are not getting the correct colors.
• the legend on the multibar charts disapeared.
• here is the old version (working) : http://goo.gl/IVqIwS
• new version (not working) : http://goo.gl/uNdyNF

Can't display a pie chart

I've copied data from example in my controller. I can display them in an element near the element binded by the directive nvd3-pie-chart. I've copied to the example html.

It works for multi-bar but not for pie chart... Is there a conflict known issue ?

This is my controller :

Frex.controllers.home = function ($scope, $state, $timeout, proxy) {
    'use strict';

    $scope.init = function () {
        $scope.leads = [
            {
                "key"    : "Series 1",
                "values" : [
                    [1025, 0],
                    [1028, 6],
                    [1030, 5],
                    [1033, 11],
                    [1036, 5],
                    [1038, 0],
                    [1041, 5],
                    [1043, 5],
                    [1046, 7],
                    [1049, 6],
                    [1051, 0],
                    [1054, 7],
                    [1056, 9]
                ]
            }
        ];

        $scope.ltt = [
            { key : "One", y : 5 },
            { key : "Two", y : 2 },
            { key : "Three", y : 9 },
            { key : "Four", y : 7 },
            { key : "Five", y : 4 },
            { key : "Six", y : 3 },
            { key : "Seven", y : 9 }
        ];
    };

    $scope.init();
};

And the HTML :

{{leads}}
<nvd3-multi-bar-chart
        data="leads"
        id="leads_graph"
        width="900"
        height="550">
    <svg></svg>
</nvd3-multi-bar-chart>

{{ltt}}
<nvd3-pie-chart
        data="ltt"
        id="ltt_graph"
        width="900"
        height="550"
        x="xFunction()"
        y="yFunction()">
    <svg height="250"></svg>
</nvd3-pie-chart>

It doesn't work. I can see data in the scope element when displayed directly, I have a blank zone under the bar chart but nothing is displayed. Have an idea ?

Implement Multi Bar Time Series Chart

Add automated tests to build

unit tests for directives and associated code
e2e tests

Implement Line Plus Bar With Focus Chart

Data Getting "Clipped" in MultiBarChart

This is basically the code copied from your multibarchart example with the data changed. The one minor change I made was adding:

yAxisShowMaxMin="false"

... but the clipping happens even if I did not set that.

<script>
  var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

  function ExampleCtrl($scope){
    $scope.exampleData = [
      {
        "key": "Series 1",
        "values": [ [ 1025409600000 , 0.5] , [ 1028088000000 , 8.5] , [ 1030766400000 , 6] ]
      }
    ]

  }
</script>


<body ng-app='nvd3TestApp'>

<div ng-controller="ExampleCtrl">
  <nvd3-multi-bar-chart
  data="exampleData"
  id="exampleId"
  width="800"
  height="400"
  yAxisShowMaxMin="false"
  ><svg></svg></nvd3-multi-bar-chart>
</div>

</body>

Notice the bar for the 1st data point doesn't show up.

I've used the same data in an NVD3 chart that I had created without the directives and it does show the bar.

<svg> nodes

It seems that the naked <svg/> nodes might be better generated at runtime via .append("svg"), since the <svg/> is an implementation detail, and at least in the samples that I've looked at, is always just an empty, attributeless node. This is not that big of a deal, but it would seem cleaner to have this:

<nvd3-sparkline-chart data="..." />

As opposed to this:

<nvd3-sparkline-chart data="...">
  <svg></svg>
</nvd3-sparkline-chart>

Thoughts?

Passing JSON data url instead of data

Is there any plans to add dataurl instead of data so that d3.json can be called to fetch json at render time.

Implement Horizon Graph

Stephen Few - Horizon Graph

add documentation for line with focus chart

Height and width are NaN in 'auto-resize' examples

Here's the console log:

Error: Invalid value for <svg> attribute height="NaN" d3.js:575
attrConstant d3.js:575
(anonymous function) d3.js:865
d3_selection_each d3.js:871
d3_selectionPrototype.each d3.js:864
d3_selectionPrototype.attr d3.js:564
nv.addGraph.generate angularjs-nvd3-directives.js:795
(anonymous function) nv.d3.js:59

Error: Invalid value for <svg> attribute width="NaN" d3.js:575
attrConstant d3.js:575
(anonymous function) d3.js:865
d3_selection_each d3.js:871
d3_selectionPrototype.each d3.js:864
d3_selectionPrototype.attr d3.js:564
nv.addGraph.generate angularjs-nvd3-directives.js:796
(anonymous function)

manual update

hello, i using it with dynamic data, but i don't know how to manually update, if i resize the screen the chart updates.

why is the method to update via js?

thx

Reseting chart data does not remove the old graph

If you reset the data for a chart that allready has old data, it will display the "no data" message, but will not remove the old data.

Modified lineChart.html example

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Angular.js nvd3.js Line Chart Directive</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF8">
    <script src="js/angular.js"></script>
    <script src="js/d3.js"></script>
    <script src="js/nv.d3.js"></script>
    <script src="js/moment.js"></script>
    <script src="../dist/angularjs-nvd3-directives.js"></script>
    <link rel="stylesheet" href="stylesheets/nv.d3.css"/>
    <script>
        var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

        function ExampleCtrl($scope){
            $scope.exampleData = [
                {
                    "key": "Series 1",
                    "values": [ [ 1025409600000 , 0] , [ 1028088000000 , -6.3382185140371] , [ 1030766400000 , -5.9507873460847] , [ 1033358400000 , -11.569146943813] , [ 1036040400000 , -5.4767332317425] , [ 1038632400000 , 0.50794682203014] , [ 1041310800000 , -5.5310285460542] , [ 1043989200000 , -5.7838296963382] , [ 1046408400000 , -7.3249341615649] , [ 1049086800000 , -6.7078630712489] , [ 1051675200000 , 0.44227126150934] , [ 1054353600000 , 7.2481659343222] , [ 1056945600000 , 9.2512381306992] , [ 1059624000000 , 11.341210982529] , [ 1062302400000 , 14.734820409020] , [ 1064894400000 , 12.387148007542] , [ 1067576400000 , 18.436471461827] , [ 1070168400000 , 19.830742266977] , [ 1072846800000 , 22.643205829887] , [ 1075525200000 , 26.743156781239] , [ 1078030800000 , 29.597478802228] , [ 1080709200000 , 30.831697585341] , [ 1083297600000 , 28.054068024708] , [ 1085976000000 , 29.294079423832] , [ 1088568000000 , 30.269264061274] , [ 1091246400000 , 24.934526898906] , [ 1093924800000 , 24.265982759406] , [ 1096516800000 , 27.217794897473] , [ 1099195200000 , 30.802601992077] , [ 1101790800000 , 36.331003758254] , [ 1104469200000 , 43.142498700060] , [ 1107147600000 , 40.558263931958] , [ 1109566800000 , 42.543622385800] , [ 1112245200000 , 41.683584710331] , [ 1114833600000 , 36.375367302328] , [ 1117512000000 , 40.719688980730] , [ 1120104000000 , 43.897963036919] , [ 1122782400000 , 49.797033975368] , [ 1125460800000 , 47.085993935989] , [ 1128052800000 , 46.601972859745] , [ 1130734800000 , 41.567784572762] , [ 1133326800000 , 47.296923737245] , [ 1136005200000 , 47.642969612080] , [ 1138683600000 , 50.781515820954] , [ 1141102800000 , 52.600229204305] , [ 1143781200000 , 55.599684490628] , [ 1146369600000 , 57.920388436633] , [ 1149048000000 , 53.503593218971] , [ 1151640000000 , 53.522973979964] , [ 1154318400000 , 49.846822298548] , [ 1156996800000 , 54.721341614650] , [ 1159588800000 , 58.186236223191] , [ 1162270800000 , 63.908065540997] , [ 1164862800000 , 69.767285129367] , [ 1167541200000 , 72.534013373592] , [ 1170219600000 , 77.991819436573] , [ 1172638800000 , 78.143584404990] , [ 1175313600000 , 83.702398665233] , [ 1177905600000 , 91.140859312418] , [ 1180584000000 , 98.590960607028] , [ 1183176000000 , 96.245634754228] , [ 1185854400000 , 92.326364432615] , [ 1188532800000 , 97.068765332230] , [ 1191124800000 , 105.81025556260] , [ 1193803200000 , 114.38348777791] , [ 1196398800000 , 103.59604949810] , [ 1199077200000 , 101.72488429307] , [ 1201755600000 , 89.840147735028] , [ 1204261200000 , 86.963597532664] , [ 1206936000000 , 84.075505208491] , [ 1209528000000 , 93.170105645831] , [ 1212206400000 , 103.62838083121] , [ 1214798400000 , 87.458241365091] , [ 1217476800000 , 85.808374141319] , [ 1220155200000 , 93.158054469193] , [ 1222747200000 , 65.973252382360] , [ 1225425600000 , 44.580686638224] , [ 1228021200000 , 36.418977140128] , [ 1230699600000 , 38.727678144761] , [ 1233378000000 , 36.692674173387] , [ 1235797200000 , 30.033022809480] , [ 1238472000000 , 36.707532162718] , [ 1241064000000 , 52.191457688389] , [ 1243742400000 , 56.357883979735] , [ 1246334400000 , 57.629002180305] , [ 1249012800000 , 66.650985790166] , [ 1251691200000 , 70.839243432186] , [ 1254283200000 , 78.731998491499] , [ 1256961600000 , 72.375528540349] , [ 1259557200000 , 81.738387881630] , [ 1262235600000 , 87.539792394232] , [ 1264914000000 , 84.320762662273] , [ 1267333200000 , 90.621278391889] , [ 1270008000000 , 102.47144881651] , [ 1272600000000 , 102.79320353429] , [ 1275278400000 , 90.529736050479] , [ 1277870400000 , 76.580859994531] , [ 1280548800000 , 86.548979376972] , [ 1283227200000 , 81.879653334089] , [ 1285819200000 , 101.72550015956] , [ 1288497600000 , 107.97964852260] , [ 1291093200000 , 106.16240630785] , [ 1293771600000 , 114.84268599533] , [ 1296450000000 , 121.60793322282] , [ 1298869200000 , 133.41437346605] , [ 1301544000000 , 125.46646042904] , [ 1304136000000 , 129.76784954301] , [ 1306814400000 , 128.15798861044] , [ 1309406400000 , 121.92388706072] , [ 1312084800000 , 116.70036100870] , [ 1314763200000 , 88.367701837033] , [ 1317355200000 , 59.159665765725] , [ 1320033600000 , 79.793568139753] , [ 1322629200000 , 75.903834028417] , [ 1325307600000 , 72.704218209157] , [ 1327986000000 , 84.936990804097] , [ 1330491600000 , 93.388148670744]]
                }];
            $scope.legendColorFunction = function(){
                return function(d){
                    console.log(d);
                    return '#E01B5D';
                }
            };
            $scope.clearData = function(){$scope.exampleData = []};
        }
    </script>

</head>
<body ng-app='nvd3TestApp'>

<div ng-controller="ExampleCtrl">
    <nvd3-line-chart
        data="exampleData"
        showXAxis="true"
        showYAxis="true"
        tooltips="true"
        interactive="true"
        showLegend="true"
        legendColor="legendColorFunction()">
    </nvd3-line-chart>

     <a ng-href='#here' ng-click='clearData()' >Clear data</a>
</div>

</body>
</html>