angularjs-nvd3-directives / angularjs-nvd3-directives Goto Github PK

Angular.js directives for nvd3.js

Home Page: http://angularjs-nvd3-directives.github.io/angularjs-nvd3-directives

License: Apache License 2.0

JavaScript 98.15% CSS 1.85%

angularjs-nvd3-directives's Introduction

##Angular.js Directives for nvd3.js, d3.js charts

<nvd3-line-chart
    data="exampleData"
    width="600"
    height="350"
    showXAxis="true"
    showYAxis="true"
    xAxisTickFormat="xAxisTickFormat_Date_Format()"
    yAxisTickFormat="yAxisFormatFunction()">
</nvd3-line-chart>

<nvd3-stacked-area-chart
    data="exampleData"
    width="600"
    height="350"
    showXAxis="true"
    showYAxis="true"
    xAxisTickFormat="xAxisTickFormat()">
</nvd3-stacked-area-chart>

More Examples

Basic Quick Start

1. Install dependencies in your application with bower

Install these if you don't already have it.

Angular.js

bower install angular --save

d3.js

bower install d3 --save

nvd3.js

bower install nvd3 --save

Angularjs-nvd3-Directives.js

bower install angularjs-nvd3-directives --save

2. Create basic Angular.js application

Create a html page and start with the following code. For d3.js it is important that the page include <meta charset="utf-8">, otherwise you will get error messages about special characters.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

Include the downloaded dependencies in the <head> section of the html.

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

Create a <script> block for the angular application

    <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]]
                }];

        }
    </script>

For this example we are hardcoding the data to make it easer to quickly create a chart. In the wild, this would obviously not be ideal, but it is more involved than a basic quick start can accomplish.

Close out the head

</head>

Setup the <body> and the rest of the angular application

<body ng-app='nvd3TestApp'>

The add the ng-app attribute to the <body> element, and set the value to nvd3TestApp, which is the same value used in the script block above angular.module('nvd3TestApp', ...).

Add the Directive to the body of the application

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

</div>

The directive is wrapped inside of a <div> that has a ng-controller attribute that has the same value as the name of the function created in the <script> block above.

Close out the body and html elements.

</body>
</html>

3. Test

If everything is setup correctly, you should be able to open the page and see a basic line chart.

Developers

For those of you wanting to debug, fix, enhance angularjs-nvd3-directives, follow the steps below after cloning this repository:

npm install
grunt bower-install

You can now run the unit tests simply by typing:

grunt test

If you wish to issue a pull request, please add a unit test for the change you are making, ensure that it is shown to fail without your fix and pass with your fix.

NOTE: we are just starting to add the foundations for unit testing here, so please chip in to help enhance the stability of this framework and be patient with us as we work towards that goal.

angularjs-nvd3-directives's People

Stargazers

Watchers

Forkers

patrickrs sprucelearning aydinsakar renlaydel safiyu sharondio robschley indergujral dcolens ondengmargaret karlhelgason scribblet unsignedint lostinbrittany dev-tim falsetto dexdexdexdexdex carly-io thebobg vikaskonsam davidmcfarland fraywing redbugz speedjing kojoru witq nowells matthiaslao jeffsteinmetz tanbamboo eyalfingold kidliang ericlvb aboodysa nozominetworks brettatoms nvdnkpr viktor-bjorn mt0803 elieuw talwai jondejong wojno imclab vamshis alecava cengizism portchaw tlvince julienmeyer blend haorui tabraiz12 ghachey adammagaluk nikolawannabe pensacola1989 saidimu sebastibe jdazacon chiester maxklenk elpofigisto jocami vishwassharma lodlock ehealthafrica maximeflamant maxwell2022 timemosaic jasadams schmod pawlowskim elmor34 joeyjmorales vecteur-plus junzhusecurity fransvelocity eehaight bharani23 vqcomms douglaspeng vonwenm vthinkxie noyb34 a00vabes ivan706 sheryever weblaborer srolel stevenvandijk t0lkman fauverism apauu mrestivill inno-v bryder markandrewj kyorry seamus-flurry

angularjs-nvd3-directives's Issues

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.

add documentation for line with focus chart

Add auto-resize configuration to documentation

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.

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)

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

Events Documentation

Implement docs in gh-pages branch for events

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

Implement Dual Y Axis Chart

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?

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

Implement Line with Fisheye Chart

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

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?

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?

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();
                         }
                    );

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.

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?

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.

Add automated tests to build

unit tests for directives and associated code
e2e tests

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

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 ?

Implement Line Plus Bar With Focus Chart

Discrete bar chart : set margin

Hello,
I've two questions :

In your directive 'nvd3-discrete-bar-chart', you specify scope.margin as a function link and not like a binding object. Why ?
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.

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

<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?

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."

Implement Multi Bar Time Series Chart

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!

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 ?

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

Similar to:

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

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 ?

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!

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.

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

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

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>

Documentation

write it

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.

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

Implement Horizon Graph

Stephen Few - Horizon Graph

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.

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

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?

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)

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?