usage - Angular NVD3 LineChart
I am getting data, but when data is 0, it plots the graph and plot y axis from range -1,0,1.
But i do want to plot in negative y axis, since my data can never be negative.
X-axis contains time.
My graph progresses as the time elapsed increases, issue is like for first few minutes data will be 0, then afterwards i will start getting data.
JavaScript Code
$scope.options = {
chart: {
type: 'lineChart',
height: 120,
margin : {
top: 8,
bottom: 30,
left:40,
right:50,
},
color: ['#e4a91d','#444fa2','#de0000']
, showLegend: false
, wrapLabels: true
, tooltips:true
, reduceXTicks: false,
x: function(d){ return d[0]; },
y: function(d){ return d[1]; },
showDistY: true,
showDistX: true,
useInteractiveGuideline: true,
transitionDuration: 10,
xAxis: {
axisLabel: '',
tickFormat: function(d) {
return d3.time.format('%H:%M')(new Date(d));
},
tickPadding: 10,
axisLabelDistance: 1,
ticks: 10,
},
yAxis: {
axisLabel: '1 / 2 / 3',
tickFormat: function(d){
return d;
},
ticks: 4,
}
}
};
Html Code
<div>
<nvd3 options="options" data="data" api="api"></nvd3>
</div>
Screenshot
I think this should work.
Add These to your chart object
yDomain: [0, maxY] // maxY being whatever you want your max y value to be
I used something like that in my chart. Found it here https://github.com/krispo/angular-nvd3/issues/47
Related
I am learning highchart with angularJs, first tick of x axis is not starting from 0 or we can say that left most corner of chart, here I attached screen shot of output which I am having now,
For this I refer this solution which worked but not working properly when only 2 values are there on x-axis it displayed 0.5 only on center on x axis, not showing actual value.
I am doing like this in my example,
xAxis: {
labels: {
enabled: true,
formatter: function () {
return this.value;
}
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
align: "left",
lineColor: 'transparent'
}
Can anyone please guide me for the same.?
Add the following for the required functionality, it will start from leftmost point :
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
}
I think set Y-axis min value and X-axis min value.
xAxis: {
labels: {
enabled: true,
formatter: function () {
return this.value;
}
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
min: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
align: "left",
lineColor: 'transparent'
},
yAxis: {
min: minYAxisValue,
max: maxYAxisValue
}
Hope so it may be helpful..
I have generated a bar chart for the data to show ratings of five topics on scale of 5 (Ratings).On x-axis I showed Topic names.
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.label;
},
y: function(d) {
return d.value;
},
showValues: true,
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
$scope.data = [{
values: $scope.Details.ratings
}];
HTML:
<nvd3 options="options" data="data"></nvd3>
On y-axis the max value should be 5, but here it is taking the maximum value among the data and the bars in the bar chart are having large width. How can I change the bar width and max range on y-axis?
i used the following code to set bar width and adjust the bar curvature
enter code here
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
putting
groupSpacing : 0.57,
in chart dict will also help to adjust width dynamically
I am trying to get a basic NVD3 graph, and here's the code snippet.
$scope.options = {
chart: {
type: 'stackedAreaChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 30,
left: 40
},
x: function(d){ return Date(d[1]);},
y: function(d){return d[0];},
useVoronoi: false,
clipEdge: true,
duration: 0,
useInteractiveGuideline: true,
xScale: d3.time.scale(),
xAxis: {
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%x')(new Date(d));
}
},
yAxis: {
tickFormat: function(d){
return d;
}
}
}
};
The data that is fed to the chart is like this:
$scope.data = [
{
"key" : "mac1" ,
"values" : [ [ 5000 , "2016-02-03T11:07:58.940Z"] , [ 5200 , "2016-02-03T11:08:09.862Z"] ]
}
];
There's no line or stacked area in the graph.
The X-axis, which is the time series, has the dates of 1/1/1970.
I am unsure where I am going wrong. Help please?
A few similar stackoverflow questions didn't help were -
nvd3 date formatting
The mistake I had done was this, x: function(d){ return Date(d[1]);} this line would return the date format and I was re-formatting the date again in the tickFormat.
Changing to x: function(d){ return d[1];} helped the graph to come up on the screen.
I also tried modifying the duration: 100 yet the graph is unable to be refreshed from server. Any help here?
I made a nvd3 chart. I have a problem. I want to draw a simple red line along y axis. Example: x:i y:180. But I do not want to treat as a data, than has value. So as a simple line.
Sourcecode:
vm.fhrOptions = {
chart: {
type: 'lineChart',
useInteractiveGuideline: true,
height: 300,
forceY:([60,200]),
lineY:([120,180]),
fitScreen: true,
margin : {
left:70,
bottom:0
},
transitionDuration: 1000,
xAxis: xAxisOptions,
yAxis: {
axisLabelDistance:50,
lines: {value: 120},
color : { pattern:['#1f77b4', '#aec7e8']},
axisLabel: 'FHR [pulzus/perc]',
tickFormat: function(d){
return d===null?'NaN':d3.format('d')(d);
},
rotateYLabel: -45,
showMaxMin: false,
domain:([80, 160]),
showLegend:true
}
}
};
Use the following to draw a single line across your chart, change parameters as necessary and change '#chart svg' to your selector name.
d3.select('#chart svg')
.append('line')
.attr({
x1: 500 + chart.xAxis.scale()(0),
y1: 35 + chart.yAxis.scale()(10),
x2: 57 + chart.xAxis.scale()(3),
y2: 35 + chart.yAxis.scale()(10)
})
.style("stroke", "#FF0000")
.style("fill", "#ff0000");
I'm working on project and I'm using NVD3 lineChart, and I couldn't edit chart's grid.
This is the chart's options:
chart: {
type: 'lineChart',
height: 430,
margin: {
top: 20,
right: 20,
bottom: 80,
left: 40
},
x: function (d) {
return d.x;
},
y: function (d) {
return d.y;
},
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'Date',
showMaxMin: false,
tickFormat: function (d) {
return d3.time.format('%b %d')(new Date(d));
},
reduceXTicks: false,
ticks: 13
},
yAxis: {
axisLabel: 'People count',
tickFormat: function (d) {
return d3.format('1d')(d);
}
}
},
title: {
enable: true,
text: 'People count Vs Date'
}
I want to have 7 grid x-axis if there're 7 values for example.
Notice: By editing ticks value to any number the grid doesn't change.
And this is the current chart
https://www.dropbox.com/s/yfin991k0ovycnv/chart.png?dl=0
So, how can I edit chart grid?
The lineChart model exposes the axis as xAxis and yAxis, and those have options on them as well. For instance, you can do:
var chart = nv.models.lineChart();
chart.xAxis.ticks(1);
chart.yAxis.tickVAlues([1,2,3,4,5]);
Most of those options are based on D3 options, for the above example see:
https://github.com/mbostock/d3/wiki/SVG-Axes#ticks (tickValues is right below that one)
For a full list of axis options in nvd3, see the documentation from the community fork here:
https://nvd3-community.github.io/nvd3/examples/documentation.html#axis