krispo / angular-nvd3 Goto Github PK

Hello,

I downloaded and tried to follow the same example as mentioned on the page, but it could not render the chart. I see there are exceptions from the line element.empty() of clearElement function;

Below is the exception:
TypeError: undefined is not a function
at Object.scope.api.clearElement (http://localhost:9999/portal/app/lib/angularnvd3/angular-nvd3.js:163:37)
at Object.scope.api.updateWithOptions (http://localhost:9999/portal/app/lib/angularnvd3/angular-nvd3.js:36:39)
at Object.scope.api.refresh (http://localhost:9999/portal/app/lib/angularnvd3/angular-nvd3.js:31:39)
at Object.fn (http://localhost:9999/portal/app/lib/angularnvd3/angular-nvd3.js:307:93)
at Scope.$digest (http://localhost:9999/portal/app/lib/angular/angular.js:10569:27)
at Scope.$apply (http://localhost:9999/portal/app/lib/angular/angular.js:10802:24)
at done (http://localhost:9999/portal/app/lib/angular/angular.js:6937:45)
at completeRequest (http://localhost:9999/portal/app/lib/angular/angular.js:7102:7)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9999/portal/app/lib/angular/angular.js:7058:11)

when I comment out the line, it worked fine. I am not sure what the problem was. Can you please help?

I am using angular routing, that is the only difference.

// Fully clear directive element
clearElement: function (){
element.find('.title').remove();
element.find('.subtitle').remove();
element.find('.caption').remove();
element.empty();
scope.chart = null;
}

I would like to know if there's a way to copy the generated SVG image from the browser to the clipboard, without using screenshots of course. Any tips or advice on how this could be done?

You have this in your basic usage instructions:
.controller('myCtrl', function('$scope'){...

Because the $scope is surrounded by quotes, this will fail silently...no chart will show up and there will be no messages to the console. Most will spot this quickly and move on but beginners could get stuck for a while.

Please remove the quotes around $scope, so:
.controller('myCtrl', function($scope){...

Thanks!

Hi,

When I try to install angular-nvd3 by typing "bower install angular-nvd3", I get an error message like "Unable to find a suitable version for d3".
I am not sure if this affects the normal usage of angular-nvd3.

Information below is what I got on my MacBook.
bower install angular-nvd3
bower not-cached git://github.com/krispo/angular-nvd3.git#*
bower resolve git://github.com/krispo/angular-nvd3.git#*
bower download https://github.com/krispo/angular-nvd3/archive/v0.0.8.tar.gz
... ...
bower download https://github.com/mbostock/d3/archive/v3.3.13.tar.gz
bower extract d3#~3.3.13 archive.tar.gz
bower resolved git://github.com/mbostock/d3.git#3.3.13

Unable to find a suitable version for d3, please choose one:
1) d3#~3.3.13 which resolved to 3.3.13 and is required by nvd3#1.1.15-beta
2) d3#~3.4 which resolved to 3.4.8 and is required by angular-nvd3#0.0.8
... ...

Ye

In the examples page, when you change from an example to another and try to resize the graph, multiples exceptions are thrown in the console: Error: Invalid value for attribute transform="translate(NaN,5)". Seems that the resize event is not properly deleted.

Krispo, could you please provide working example for lineWithFocusChart with Time Series Data? As we need to apply sorting to json data and then fill up the gaps in the data, etc I am struggling to make it work. When select date range slider the main chart does not show up properly. It may help some others also who are spending time on this example. The sample on the website for lineWithFocusChart is of not time series data. If you want me to post I can post my trails till now in a plunker.

@krispo,

Is it possible to add gauge chart & 3d pie chart to the library? I have seen these charts supported by d3, but not in nvd3. How difficult it is to add directives for gauge & 3d pie in this library?

http://www.amcharts.com/demos/3d-pie-chart/
http://www.amcharts.com/demos/angular-gauge/#theme-patterns

This might have to do with nvd3 but would you happen to know an easy way to change the label colors of a graph?

I can change the color with:

d3.selectAll('.nvd3.nv-legend g').style('fill', "white")

in the console, but am unsure how where to make the corrections in relation to angular + nvd3 lifecycle

I am using the 0.0.8 version of the directive. The controls - stacked and grouped options aren't working as expected. The graph by default shows up in grouped and stacked option is always disabled. It works if i pass stacked:true in options but then grouped gets disabled.

Legends have same kind of behaviour - I can only click on the legend once - ti doesn't work like toggle as in your examples on plunker. Any idea what could be the issue?

I'm sure this is a result of me simply not understanding the API, but I can't see to set/customize the size of my graph data points.

The only thing that seems to respond is Math.random()

Here is my config:

chart: {
  type: 'scatterChart',
  height: 250,
  color: [],
  showLegend: false,
  showControls: false,
  scatter: {
    onlyCircles: true
  },
  showDistX: true,
  showDistY: true,
  showMaxMin: true,
  tooltipContent: function(key) {
    return '<h3>' + key + '</h3>';
  },
  transitionDuration: 350,
  xAxis: {
    axisLabel: 'Belief',
    showMaxMin: true,
    tickFormat: function(d){
      return d3.format('.02f')(d);
    }
  },
  yAxis: {
    axisLabel: 'Emphasis',
    showMaxMin: true,
    tickFormat: function(d){
      return d3.format('.02f')(d);
    },
    axisLabelDistance: 30
  }
}

Here is the code that builds up the data:

      $scope.chart.data.push({
        key: node.title,
        values: [{
          y: yValue,
          x: xValue,
          shape: 'circle',
          size: Math.random()
        }]
      });

Is there a way to get every point to be of uniform size?

Thanks! Great Library!

I was setting up a chart with a callback to add some extra pieces to the chart and noticed the chart callback is being called multiple times. I added:

callback: function(chart) {
    console.log('chart');
}

And it's logging 3 times - is that intended or only supposed to be called once upon chart init? I'm guessing this is actually more of an NVD3 issue and not the directive.

You can see it in the console in this plunker: http://plnkr.co/edit/g7D4kTx5BrdZTrgpdn3I

Help me in disabling legends from Multichart.
PS: showLegend = false isn't working.

Hi all,
I used nvd3 linechart, and d3 pie, arc, and they work on Chrome and Opera.
However thw graphs are not showing on Safari.
Anyone has any idea with this issue?

Hi Krispo,

          Thanks for Your Reply in StackOverflow.

I tried ur Lineplusbarfocus chart.I posted my issue in stackoverflow,like I want to change the first value of the Dataset as "String"

My example,dataset is below,

var testdata = [

{

"key" : "Quantity" ,

 "bar": true,

"values" : [ [  'EGG' , 121000.0] , [ 1138683600000 , 127000.0] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89] ]

},

{

"key" : "Price" ,

"values" : [ [  'EGG' , 71.89] , [ 1138683600000 , 75.51],[  "EGG" , 71.89] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89] ,[  "EGG" , 71.89]  ]

}

]

If I try this in your LinePlusBarFocus chart.

My chart looks like the below image..can you help me..

Hi Krispo,

Could you cook up a simple example of feeding data parameters to the controller from attributes in the html? Something similar to what I have done here.

Thanks!

Hi Krispo,,Thanks for your Reply in LinePlusBarChart,I am Using nvd3 pie chart,my labels are not aligning correctly inside the Pie..Can you hep me find out this..

Regards,
Yuvaraj..

Is there a way to force the range of a graph?

Use case:

If I know my chart has an X range of -1, 1 and a Y range of 0, 1, is there a way I can force the axes to show those values, even if a data point doesn't reach it?

The inserted image shows a chart with the aforementioned range, however the X axis stops at 0.83 as that is the highest data point that is available. Is there a way I can always have the axes show the min/max that I want?

Thanks!

I am working with multicharts but i did not find anything to remove gridlines of multibar chart. please help.

like this?
http://bost.ocks.org/mike/path/

Hi krispo,

I am using line chart in my project but the last x-axis tick is being cut.

The ticks are just dates in this format 2014-02-14.

For other chart like discrete bar chart it is working fine its just the issue with line chart.

I am not setting width for my charts as I want the charts to be responsive.

Please, add some basic documentation.

The demo site looks awesome!

Hi,
I am trying custom shap points to plot on line chart. I did it using custom .css. Now I want to use custom shape and it is possible with nvd3 as given in below issue :-
novus/nvd3#321
Can we please make it possible in Angular-nvd3

I have data in this form:

var data = [
  { count: 2, avg_duration: 4.6, date: { year: 2014, month: 8, day: 11 } },
  { count: 6, avg_duration: 8.5, date: { year: 2014, month: 8, day: 12 } }
  ...
]

I want to use a linePlusBarChart to display this data, where count forms the bar portion and avg_duration forms the line portion. I tried the following:

$scope.time_series.data = [
  { key: 'Number of views', bar: true, values: data },
  { key: 'Average duration (seconds)', values: data }
]

$scope.time_series.options = {
    chart: {
        type: 'linePlusBarChart',
        height: 350,
        margin: {
          top: 20,
          right: 20,
          bottom: 60,
          left: 55
        },
        x: function(d) {
          return new Date(d.date.year, d.date.month, d.date.day)
        },
        y1: function(d) {
          return d.count
        },
        y2: function(d) {
          return d.avg_duration
        },
        color: d3.scale.category10().range(),
        transitionDuration: 250,
        xAxis: {
            axisLabel: 'Date',
            tickFormat: function(d) {
                return d3.time.format('%x')(new Date(d))
            },
            showMaxMin: false,
            staggerLabels: true
        },
        y1Axis: {
            axisLabel: 'Number of views',
            tickFormat: function(d) {
              return d3.format(',f')(d)
            }
        },
        y2Axis: {
            axisLabel: 'Average duration (seconds)',
            tickFormat: function(d) { 
              return d3.format(',.2f')(d)
            }
        }
    }
}

But this doesn't work. Is there only one way specify the y data?

Hello. Thanks for directive, it's very useful.

How I can add padding to my data? As you see, my chart is start from bottom and then up to top.

I want something like this.

Start from center and then render as usual. How I can make it?

Please see http://plnkr.co/edit/OzfK37?p=preview .

I'm trying to understand 2 things.

• Why is the left label displayed below the right label?
• How can I make the columns thinner?

Thank you for your help

Now options are always extended to full nvd3 options api. It may sometimes seem rather bulky.
So, issue is to add an ability for using custom basic options without extending.

I'm trying to use boilerplate system from called mean.io from linnovate. For some reason when I follow the installation instructions and try to create a standard multibar graph I get javascript errors saying d3 is not defined.

I've ruled out the script to being linked to correctly, the presence of the meta tag for charset and tried multiple different orders of linking to all the scripts, none work. I'm using d3 version 3.4.8

http://krispo.github.io/angular-nvd3/#/lineChart

Try to check it in IE. The Y-axis is cutting in half.

It would be great if you could fix the issue as soon as possible.

I found your demo really cool so I went with your library.

Please help me out here :)

I noticed this behavior on the line chart. When I set "useInteractiveGuideline": false, errors are thrown when the user mouses over the chart, clicks it, etc.

Uncaught TypeError: Cannot read property 'x' of null d3.js:5133
2Uncaught TypeError: Cannot read property 'data' of undefined nv.d3.js:11190
Uncaught TypeError: Cannot read property 'x' of null d3.js:5133
7Uncaught TypeError: Cannot read property 'data' of undefined 

It appears that the following happens during refresh():
updateWithOptions() calls clearElement() which calls element.empty()

This removes the svg element and later updateWithData() tries to remove that same svg element using d3 but the element no longer exists. Could this be a potential problem or is it working as expected?

Thanks,
Bryan

Hi krispo,

I was wondering if a simple view for a line chart like :

would refresh(redraw new graph) if the data changes.

If no, is there is any way to do it?

Hello,

How can I get the chart object back after it has been created by the directive..

I would like to attach to the stacked chart event
chart.interactiveLayer.dispatch.on('elementMousemove.gp', function(e) {
var xValue = chart.xAxis.tickFormat()(e.pointXValue);
...
})

Also, do you have a full example of how to hook into the chart events?
It looks like this describes it to some degree..
#32

Thank you!

-John

Hi,
I'm pretty new to both d3 and nvd3 but not to angular, so my question might be a bit nube one.
I'm using version 1.1.15b.
I'm trying to use the API, with the syntax given in the "quickstart": $scope.api.getScope().chart
Each property of chart is a function, which resolves to an error when called without parameters.
I thought this should return the chart's object (as written in the docs), so when I write: $scope.api.getScope().chart.width it would return the chart's width. In effect, it returns a function.
More specifically, I'm trying to get the xAxis and yAxis properties, and preferably the width of the chart (I succeed using jQuery but this seems like I'm missing some cool and elegant apiish way to do it).
How do I use this api? Is there someplace I can read more about it or see an example of how to use it?
Thanks

Thank you for this job.
Now i try to use it define the tooltip_content, but not work.

type: 'lineChart',

height: 450,

margin : {

top: 20,

right: 20,

bottom: 40,

left: 55

},

x: function(d){ return d.x; },

y: function(d){ return d.y; },

useInteractiveGuideline: true,

tooltipContent:function(key, x, y, e, graph){

return 'TestA';

},

dispatch: {

stateChange: function(e){ console.log("stateChange"); },

changeState: function(e){ console.log("changeState"); },

tooltipShow: function(e){ console.log("tooltipShow"); },

tooltipHide: function(e){ console.log("tooltipHide"); }

},

xAxis: {

axisLabel: '时间',

tickFormat: function(d){

return d3.time.format('%m/%d/%y %H:%M:%S')(new Date(d))

}

},

yAxis: {

axisLabel: 'QPS',

tickFormat: function(d){

return d3.format('.02f')(d);

},

axisLabelDistance: 30

},

callback: function(chart){

console.log("!!! lineChart callback !!!");

}

Hi
I've tried to solve this, but now i can't find the reason of this problem.
the tooltip on my chart shows up with this bad looking, and it doesn't have any animation. whats wrong?

these are files i've included in my file:

    <meta charset="utf-8">  <!-- it's important for d3.js -->
    <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> <!-- or use another assembly -->
    <script src="bower_components/angular-nvd3/dist/angular-nvd3.js"></script>
    <link rel="stylesheet" href="bower_components/nvd3/nv.d3.css"> 

and this is my config:

        chart: {
            type: 'lineChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 40,
                left: 55
            },
            x: function(d){ return d.x; },
            y: function(d){ return d.y; },
            useInteractiveGuideline: true,
            dispatch: {
                stateChange: function(e){ console.log("stateChange"); },
                changeState: function(e){ console.log("changeState"); },
                tooltipShow: function(e){ console.log("tooltipShow"); },
                tooltipHide: function(e){ console.log("tooltipHide"); }
            },
            xAxis: {
                axisLabel: 'Time (ms)'
            },
            yAxis: {
                axisLabel: 'Voltage (v)',
                tickFormat: function(d){
                    return d3.format('.02f')(d);
                },
                axisLabelDistance: 30
            },
            callback: function(chart){
                console.log("!!! lineChart callback !!!");
            },
            transitionDuration: 1000,
        },

these are nearly the same as example in the docs.

I want to set range of y-axis in linePlusBarChart. I founded a solution is set forceY but i can't set in linePlusBarChart.
How to set forceY in linePlusBarChart ???

The tooltipShow event doesn't appear to fire on linechart.

Can anyone tell me how to force the Y2 axis on a bar and line chart to start at a fixed minimum value(i.e. 0), as opposed to the minimum value in the dataset? I have tried setting both the domain, and range values of the Y2 Axis

y2Axis: {
axisLabel: 'Y2 Axis',
domain:[0,600.00], // range has been tried here as well
showMaxMin: false,
tickFormat: function(d) { return '$' + d3.format(',.2f')(d);}
}

I have also tried setting y2Domain, y2Range in the main chart section as well, with not luck.

Thanks

If I switch this example chart http://krispo.github.io/angular-nvd3/#/multiBarChart to "Extended" and then resize the browser window, I get the following console error:

Error: Invalid value for <g> attribute transform="translate(NaN,5)"

Hi again, sorry for opening so many tickets.

The current business requirements behind the scatter chart stem from needing the hover text display the title of the data point itself and not the group it belongs to. Some of my charts have dozens of nodes in them.

The resulting error is:

This happens on page load and on every subsequent hover.

The above error comes from a chart with 94 Data points, all with unique keys with a data structure as follows:

The only thing I can do to make it not error is if I create a chart with only a handful of points.

My problem would be solved if:

1. I could set the hover text of the point to be something other than the key
2. I could give each point an explicit color value.

Are these things possible?

I've got several charts that get displayed in various Bootstrap panels, I would like to size the chart to fit in the dynamically-sized + positioned panel. I'm going nuts trying to make that happen. Naturally, my controller which sets up the options for the chart knows nothing about the DOM, so I can't get it to lookup the size of the parent div. I tried updating angular-nvd3.js in the directive to set scope.options.chart.width based on element[0].parentElement.clientWidth, but that seems to be overwritten by something by the time we hit updateWithData, so I tried hard-coding it in the updateWithData function on both the svg width attr set and the svg style width, but the chart still winds up being 1/2 the width it should be! Where am I going wrong?

Not sure if this is a limitation of nvd3, d3, or this library. If data is an associative array, for example:

$scope.data = {
    'some_key' : [[0, 1], [1, 2], [2, 3]],
    'another_key': [[0, 1], [1, 2], [2, 3]]
}

The chart sees empty data. The object/ associative array needs to be converted into a 0 indexed array for this to work...

Hi
From what I've unserstood till now, it may be possible to have a historical bar with focus chart. How can I do that? Is it possible only using the config? If not, can you guide me to change the code to achieve it?
The reason I need it is to show status of a relay (on/off) over an extended period. So since technically it is possible to be shown with line chart, it is more convenient using bars.
Thanx ;)

How can I create a custom tooltip and show it instead of default guideline tooltip in stackedareachart

Is it possible ?

Thanks !

Hi
I'm using your lib, and as powerful it is, it really lacks in documentation. right now, I lost nearly 3 hours trying to populate a line with focus chart with my data. before, I had filled it with dummy data successfully, and after that, I populated simple line chart with a series that had "time" and "value" fields instead of "x" and "y", and then I tried to do the same with focus chart. at last, I figured out that I have to add both "lines" and "lines2" fields with proper "x" and "y" functions to do the job. BTW, I still don't know what are "lines" and "lines2"!
hope that this is helpful for someone in similar situation.

You said: "Many options of nvd3 models are specified by the functions. But functions can not be displayed in the output json string. Functions are now supported in JSON-tree model for interactive customization. Feel free to use functions in your javascript json code as usual."

I have not been able to make this work. I have been successful at sending data from the directive, of course, but not when sending options (the JSON template for chart configuration). So, what is the proper syntax for specifying a function in the JSON template, say:
x: function(d){return d[0];},

NOTE: I have added the references to the json-tree files in my html. And, by all means, if I totally misread your instructions and am completely off, please let me know.

I am trying to make the chart behavior like this one (http://jsfiddle.net/odiseo/ZnkN6/light/), looks like it does not work, I viewed the source code, and add the ".ease("elastic")" at the end of line 149, it still does not work, did I miss anything?

Thanks,
Jack

I just tried to use angular-nvd3 with Angular 1.3 and I got this error (it worked with angular 1.2):

Error: [$compile:multidir] Multiple directives [ngController, nvd3] asking for new/isolated scope

• Is this caused by a problem in my code which needs to be changed for 1.3 or in the angular-nvd3 directive?
• Should I use the rewrite branch (2.0) of the "nvd3" library / is this issue already addressed there?

I tried working on creating a mean line over a stacked bar chart. Is there any patch to have this feature or is it going to be implemented in newer version?

this is simple line chart
tooltips aren't displaying near mouse, but only if the chart isn't on top of the website
if the chart is on the top, everythig is ok