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");
Related
I want to change the origin of the c3 bar graph from zero to one.All the values must be drawn from one not from zero.For better understanding i have attached an image.
There is no config/easy way to change the origin from (0,0) to something different(0,100).
So the alternate/easy way to do this is by changing the axis tick labels and putting grid lines, and manipulating the data values, as shown below:-
In below example, I have tried to move the origin(x-axis from 0 to 100)
Hope this helps.
var chart = c3.generate({
bindto:'#chart_example',
data: {
columns: [
//['data1', 0, 200, -100, 400, 150, -250, 50, 100, 250] // Actual values
['data1', -100, 100, -200, 300, 50, -350, -50, 0, 150] // actual values -100
],
type: 'bar'
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9'],
show: false,
},
y : {
tick: {
//format: d3.format("$,")
format: function (d) { return "$" + (d+100); }
}
}
},
grid: {
y: {
lines: [
{value: 0, text: ''},
]
}
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<div id="chart_example"/>
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
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
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'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