angularjs-nvd3-directives
Angular.js directives for nvd3.js
Angular.js Directives for nvd3.js and d3.js ~ nvd3js d3js angularjs angular.js directives for d3.js and nvd3.js charts
I got a scenario where in I need to display value for every stack in stacked multi-bar chart - nvd3 graph as we can display value in discrete value - nvd3 graph.
I understand, 'showvalue' is used in discrete bar controller (http://nvd3.org/examples/discreteBar.html), can we use 'showvalue' in stacked graph, if not please suggest with an alternative solution.
Thanks in advance
Source: (StackOverflow)
I am trying to create an angular multibarchart with only Lines excluding the bars. I would like to generate data using json instead of Lee Byron's test data generator. But I have no idea how to change the Lee Byron's test data to json data. I am new to angular and nvd3 as well. Please help me to find out a solution.
I want to get data from JSON file for the same
Source: (StackOverflow)
I am using angular nvd3 directives here to build a multi-line chart. The chart automatically scales the y-axis to the maximum and minimum values among all the series that are plotted. Can I change this to perhaps 1.5 times the minimum and maximum values instead? Or any other dynamic configuration of my choosing?
Source: (StackOverflow)
Issue: Compile syntax {{vm.names}} spits out the variable, so I know the view has access to it. However, using vm.names inside directives like ng-repeat has no effect. I did a console.log(typoeof()) which says "object" so I know its not a string.
Code:
function nameDirective (){
return {
template: [
'{{vm.names}}',
'<tr ng-repeat"name in vm.names">',
'<td>{{name.id}}</td>',
'<td>{{name.fName}}</td>',
'<td>{{name.lName}}</td>',
'</tr>'
].join(''),
"scope":{
names:"="
},
"controller": nameDirectiveCtrl,
"controllerAs": 'vm'
};
}
function nameDirectiveCtrl($scope) {
var vm = this;
vm.names = $scope.names;
}
Demo http://plnkr.co/edit/6vlqXFshSxPe5b3Wu7mf?p=preview
Source: (StackOverflow)
I am using angularjs-nvd3-directives to create some pie charts and stacked bar charts and was wondering how to change the transition duration or even the type, but the duration is the one I'm primarily looking to adjust.
Here is my code:
<nvd3-multi-bar-horizontal-chart
data="stackedData"
id="stackedExample2"
showvalues="true"
valueformat="valueFormatFunction()"
showlegend="true"
tooltips="true"
showlabels="true"
stacked="true"
color="colourFunction()"
legendcolor="colourFunction()"
showxaxis="true"
showyaxis="true"
x="xFunctionBar()"
showcontrols="false"
interactive="true"
margin="{left:100}"
transitionduration="1000">
<svg></svg>
</nvd3-multi-bar-horizontal-chart>
The transitionduration only affects the initial load of the graph, but when the data changes and the chart is re-drawn the bars or pie slices transition to the new values too quickly. I would like to be able to slow this down and alter the transition type if possible. It currently defaults to transitioning from top left to bottom right - which is fine for a slow chart load but the transitions look terrible.
I have tried delay="500" but that doesn't seem to do anything. Am I missing something here?
Source: (StackOverflow)
Im using Stacked area chart of nvd3-angularjs
This is my html
<div ng-controller="Eth2GraphController">
<nvd3-stacked-area-chart
data="GraphData"
noData="No Data For You!"
id="eth2Graphs"
showXAxis="true"
showYAxis="true"
showLegend="true"
interactive="true"
tooltips="true"
objectEquality="true"
margin="{left:100,right:100}"
useInteractiveGuideline="true"
tooltipcontent="toolTipContentFunction()"
xAxisTickFormat="xAxisTickFormatFunction()"
yAxisTickFormat="yAxisTickFormatFunction()"
color="colorFunction()"
legendColor="colorFunction()"
>
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Now, I have a function that should format the tooltipcontent, but its not working. Maybe it has something to do with the useInteractiveGuideline attribute. I used the same tooltipcontent function to edit the tooltip of my other charts, its working on those charts the only difference is that those chart dont use useInteractiveGuideline.
$scope.toolTipContentFunction = function() {
return function(key, x, y, e, graph) {
return '<h3>' + x + '</h3>' +
'<p>' + key + ' ' + y + '</p>';
}
};
I want x to be in the center, and other formatting for the data. How would I do that? Am I using the correct attribute that would format the tooltip?
Source: (StackOverflow)
Sometimes svg chart appear more small than normal. This problem is solved Reloading Screen.
//Values Graphic
$scope.$watch(vm.dataGraphic.watch, function () {
var data = vm.dataGraphic.watch ? $scope.$eval(vm.dataGraphic.watch) : vm.dataGraphic;
setTimeout(sleep,500); //patch to "solve" this issue
function sleep(){
vm.dataValues = getDataValues(data);
}
});
function getDataValues(data) {
vm.dataGraphic = data || dataGraphicTest;
if (vm.dataGraphic.values.length == 0) {
return [];
} else {
vm.dataKeyValues = transformForKeyValues(vm.dataGraphic.values, vm.dataGraphic.accumulated);
vm.barValues = transformBarValues(vm.dataGraphic.values, vm.dataGraphic.limit);
var lineValues = transformLineValues(vm.barValues, vm.dataGraphic.limit, vm.dataGraphic.accumulated, vm.dataGraphic.startMonthlyLimit);
vm.maxY = calculateMaxY(vm.barValues, lineValues);
return [
{
"key": vm.dataGraphic.labelX.name,
"bar": true,
"color": _graphicsColors.bar,
"values": vm.barValues
},
{
"key": _graphicsValorPorDefecto,
"color": _graphicsColors.line,
"values": lineValues
}
];
}
}
SVG element with the following html tags appears with wrong dimensions.
<g class="nvd3 nv-wrap nv-linePlusBar" transform="translate(35,10)">
This problem does not always happen, but when it happens is arranged refreshing the screen.
I think this patch is a bad idea and I would like to understand what is happening .
Thanks
Source: (StackOverflow)
nvd3 angular error: [$rootscope:infdig] 10 $digest() iterations reached. aborting!
I'm getting this error using nvd3 angular directive. Afaik this error happens when you modify models from within the view. But I don't think I'm doing that.
Here is the code:
//controller
var options = getChartOptions();
var data = getChartData();
$scope.chart = {
data: data,
options: options
};
//view
<nvd3 class="metrics-chart" options="chart.options" data="chart.data"></nvd3>
Here is the full controller:
var options = getChartOptions();
var data = getChartData();
$scope.chart = {
data: data,
options: options
};
function getChartOptions(){
return ChartConfigService.getChartOptions();
}
function getChartData(){
var data = [];
var colors = {
'GET': '#f00',
'POST': '#0f0',
'PUT': '#00f',
'DELETE': '#ff0'
};
var verbs = ['GET', 'POST', 'PUT', 'DELETE'];
verbs.forEach(function(verb){
var i = 0;
var values = [];
var now = moment();
while ( i < 10 ) {
values.push({
x: moment(now).add(i, 'minutes'),
y: Math.round(Math.random() * 10)
});
i++;
}
data.push({
values: values, //values - represents the array of {x,y} data points
key: verb, //key - the name of the series.
color: colors[verb] //color - optional: choose your own line color.
});
});
return data;
}
Source: (StackOverflow)
Custom colours for doughnut chart is not showing in legend, rather legends take arbitrary colours. How can I make it pickup those custom colours?
app.controller("ExampleController", ["$scope", function ($scope) {
$scope.pie = [
{key: "Passed", y: 2},
{key: "Failed", y: 3}
];
var colorArray = ['red', 'green'];
$scope.colorFunction = function() {
return function(d, i) {
return colorArray[i];
};
};
...x y functions ...
}]);
HTML
...
<nvd3-pie-chart
data="pie"
id="donutLabelsOutsideExample"
width="450"
height="350"
x="xFunction()"
y="yFunction()"
donut="true"
showLabels="true"
showLegend="true"
donutLabelsOutside="true"
labelType="percent"
color="colorFunction()">
<svg height="250"></svg>
</nvd3-pie-chart>
...
Source: (StackOverflow)
I'm using angular-nvd3-directives to create line chart.
This is the HTML file
<div class="line-chart" ng-controller="LineChartController as viewAll">
<nvd3-line-chart
data="viewAll.linechart"
id="exampleId"
width="800"
height="400"
showXAxis="true"
showYAxis="true"
tooltips="true"
interactive="true"
xAxisTickValues="[1378387500, 1378388100, 1378388700, 1378389900]"
xAxisTickFormat="xAxisTickFormatFunction()"
margin="{left:50,top:50,bottom:50,right:50}">
<svg></svg>
</nvd3-line-chart>
</div>
This is the JS file
(function() {
var app = angular.module('linechart-directives', ['nvd3ChartDirectives', 'LocalStorageModule']);
app.controller('LineChartController', function($scope, $http, localStorageService, $interval) {
$scope.viewAll = this;
$scope.viewAll.linechart = [];
$scope.pollActiveCon = function() {
if (localStorageService.get("getAll") == 0 || localStorageService.get("getAll") == undefined) {
$http.get('/statistics/getAllData').success(function(data) {
$scope.viewAll.linechart = data;
localStorageService.set("getAllData",1);
});
}else{
$http.get('/statistics/getLastData').success(function(data) {
if ($scope.viewAll.linechart[0]==null) {
$scope.viewAll.linechart = data;
}else{
console.log($scope.viewAll.linechart);
$scope.viewAll.linechart[0]['values'].push(data[0]['values'][0]);
}
});
}
};
$scope.pollActiveCon();
$interval( function(){
$scope.pollActiveCon();
}, 120000);
$scope.xFunction =function(){
return function(d){
return d[0];
}
}
$scope.yFunction = function(){
return function(d){
return d[1];
}
}
$scope.xAxisTicksFunction = function() {
console.log('xAxisTicksFunction');
console.log(d3.svg.axis().ticks(d3.time.minutes, 5));
return function(d) {
return d3.svg.axis().ticks(d3.time.minutes, 5);
};
};
$scope.xAxisTickFormatFunction = function() {
return function(d) {
return d3.time.format('%H:%M')(moment.unix(d).toDate());
};
};
});
})();
The problem is the data is not updating in the chart, but when I checked the $scope.viewAll.linechart variable, the last data was added successfully to it. What am I missing?
Source: (StackOverflow)
It looks like AnjularJS-nvd3 is using the JSON data for their charts internally and i would like to know whether is it possible to pass an external JSON data url and use those data in charts. I don't know where to start.
Thank you in advance.
Source: (StackOverflow)
I am trying to make a dashboard using d3/angularjs. I am stuck at adding the word cloud into the main.html.
this is the word cloud i generated before.
<div class="main-container" ng-controller="MainCtrl">
<div class="unit-title">
{{ unit.name }}
</div>
.......
.......
<div class="col-1-2">
<h1>Word Cloud</h1>
<script>
var fill = d3.scale.category20();
// var w = window.innerWidth,
// h = window.innerHeight;
var jWord = [ "unit", "content", "flipped", "twitter", "learning", "discussion", "material", "topics", "interesting", "good" ];
var jCount = [ "90", "80", "80", "70", "60", "60", "50", "50", "40", "40" ];
d3.layout.cloud().size([600, 600])
.words(d3.zip(jWord, jCount).map(function(d) {
return {text: d[0], size: d[1]};
}))
.padding(5)
.rotate(function() { return ~~(0.2* 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size})
.on("end", draw)
.start();
function draw(words) {
d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 600)
.style('background',"#93A1A1")
.append("g")
.attr("transform", "translate(600,600)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
</script>
</div>
</div>
when I include the into
<div class="main-container" ng-controller="MainCtrl">
<div class="unit-title">
{{ unit.name }}
</div>
.......
.......
<div class="col-1-2">
<h1>Word Cloud</h1>
<script>
var fill = d3.scale.category20();
// var w = window.innerWidth,
// h = window.innerHeight;
var jWord = [ "unit", "content", "flipped", "twitter", "learning", "discussion", "material", "topics", "interesting", "good" ];
var jCount = [ "90", "80", "80", "70", "60", "60", "50", "50", "40", "40" ];
d3.layout.cloud().size([600, 600])
.words(d3.zip(jWord, jCount).map(function(d) {
return {text: d[0], size: d[1]};
}))
.padding(5)
.rotate(function() { return ~~(0.2* 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size})
.on("end", draw)
.start();
function draw(words) {
d3.select("body").append("svg")
.attr("width", 600)
.attr("height", 600)
.style('background',"#93A1A1")
.append("g")
.attr("transform", "translate(600,600)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
</script>
</div>
</div>
it doesnt come inside the "class=col-1-2"
Source: (StackOverflow)
I am using nvd3-multi-bar-chart for displaying a graph in my application. An example chart would be like below
I have used the following for generating graphs:
NVD3 Multibar chart
Everything is working good and the charts are also displaying well. But my problem is, i need to display the data on the bar like
I have referred the following links before for solving this but did not helped me in solving my requirement
Link 1, Link 2, Link 3 and so on ...
Source: (StackOverflow)
i'm using angular-nvd3-directives piechart.
I'm setting the piechart with a list of values with siteId (as x axis) and usersCount (as y axis).
The application usually starts with at list one set of (siteId, usersCount) object.
The application allows the users to change the list of site sets - (siteId, usersCount) List,
and when the new list is loaded and there is no data in it, the piechart prints the nodata text, but the piechart stays behind the text with the previous data.
I used the nv.graphs[0].update() to refresh it, but it seems not natural.
I also set the objectequality attribute to true (for the deep watch on the data).
The list of data looks in debug like this: {object[1]} - when there is data,
and {object[0]} - when there is no data.
many thanks in advance :)
Source: (StackOverflow)