I'm new to this d3 and nvd3.I'm trying to build a multi line chart using nvd3 and i have got 2 issues
1) the x axis doesn't seem to show the right values for hour and minutes as in json data which has date in standard utc format.
2) when i put the the first value as non-zero for both memory and cpu it scales down to negative y axis and looks weird.
Ty for the help. here is the plunk
nv.addGraph(function() {
var chart = nv.models.cumulativeLineChart()
.x(function(d) {
console.log(d.time)
return d.time
})
.y(function(d) {
console.log(d.value)
return d.value
})
.color(["#FF0000", "#000000"])
.height(210)
.width(420)
.useInteractiveGuideline(false)
.showControls(false)
.forceY(0)
;
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%H:%M')(new Date(d))
});
chart.yAxis.tickFormat(d3.format(',.1'));
d3.select('nv-indexLine').fill("black");
d3.select('#chart svg')
.datum(formattedData)
.call(chart);
nv.utils.windowResize(chart.update);
chart.lines.interactive(false);
return chart;
});
One change make your function like this for return x values it should return a Date object.
So instead of doing this
.x(function(d) {
console.log(d.time)
return d.time
})
Do like this to return Date object
.x(function(d) {
console.log(d.time)
return new Date(d.time)
})
working code here
Related
I need to add circules/nodes to each point on a line chart of nvd3.
I have my codes here - https://jsfiddle.net/sujit77/7ns2g4a1/12/
Also I need to have these circles with different colors depending on value at that point.
I tried to follow "http://www.d3noob.org/2013/01/change-line-chart-into-scatter-plot.html". But messed up my code between D3 and nvd3 functions.
nv.addGraph(function() {
var chart = nv.models.lineChart()
.x(function(d) {
return d3.time.format("%Y-%m-%d %H:%M:%S").parse(d['key']);
})
.y(function(d){ return d.value; })
var format = d3.time.format("%m %d %Y");
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%Y %b %d')(new Date(d))
});
d3.select('#line-charts').append('svg')
.attr('height', 250)
.attr('width', 400)
.datum(dataValue)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I found similar question - Draw a circle at a point on an NVD3 line chart, but its unaswered yet.
I am quite new in D3 and nvd3. I am trying to plot a graph with date axis and data axis - https://jsfiddle.net/sujit77/7ns2g4a1/6/.
var dataValue = [{'key':'Line', 'values':[{"key":"2016-04-04 0:0:0","value":1},{"key":"2016-04-05 0:0:0","value":1},{"key":"2016-04-07 0:0:0","value":1},{"key":"2016-04-08 0:0:0","value":1},{"key":"2016-04-11 0:0:0","value":1},{"key":"2016-04-13 0:0:0","value":1},{"key":"2016-04-14 0:0:0","value":0.5},{"key":"2016-04-19 0:0:0","value":1},{"key":"2016-04-20 0:0:0","value":1},{"key":"2016-04-22 0:0:0","value":1},{"key":"2016-04-25 0:0:0","value":1},{"key":"2016-04-26 0:0:0","value":1},{"key":"2016-04-27 0:0:0","value":1},{"key":"2016-04-28 0:0:0","value":1},{"key":"2016-04-29 0:0:0","value":1},{"key":"2016-05-03 0:0:0","value":1},{"key":"2016-05-04 0:0:0","value":0},{"key":"2016-05-06 0:0:0","value":1},{"key":"2016-05-09 0:0:0","value":1},{"key":"2016-05-10 0:0:0","value":1},{"key":"2016-05-11 0:0:0","value":1},{"key":"2016-05-12 0:0:0","value":1},{"key":"2016-05-13 0:0:0","value":1},{"key":"2016-05-16 0:0:0","value":1},{"key":"2016-05-17 0:0:0","value":1},{"key":"2016-05-19 0:0:0","value":1},{"key":"2016-05-24 0:0:0","value":0},{"key":"2016-05-25 0:0:0","value":0.5},{"key":"2016-05-26 0:0:0","value":1}]}];
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart()
//.showControls(false)
//.showMaxMin(false);
.x(function(d) {return d3.time.format("%Y-%m-%d %H:%M:%S").parse(d['key']);})
var format = d3.time.format("%m %d %Y");
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%Y %b %d')(new Date(d)) });
d3.select('#line-charts').append('svg')
.attr('height', 250)
.attr('width', 400)
.datum(dataValue)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I am not able to plot the graph which should have been generated using the sample data. I am getting following error in browser's console window -
Error: attribute transform: Trailing garbage, "translate(0,NaN)".
Along with that I am trying to hide the bottom scale and min-max value in X-axis using ".showControls(false)" and ".showMaxMin(false)". But those are not working.
You forgot to do the y accessor.
Do something like:
chart.y(function (d) { return d.value; });
I am new to d3.js (currently using d3.v4) and am stuck trying to use d3.nest to plot multiple lines.
This is the code I have:
var color = d3.scaleOrdinal().range(
'#673ab7',
'#9c27b0',
'#e91e63',
'#f44336',
'#ff5722',
'#ff9800',
'#ffc107',
'#ffeb3b',
'#cddc39',
'#8bc34a',
'#4caf50',
'#009688']);
var line = d3.line()
.x(function(d) { return x(d.day); })
.y(function(d) { return y(d.temp); });
d3.csv('/static/data/temp_d3.csv', function(error, data){
data.forEach(function(d){
d.day= +d.day,
d.temp= +d.temp;
});
//nest the entries by month
var dataNest = d3.nest()
.key(function(d) {return d.month;}).sortKeys(d3.ascending)
.key(function(d) {return d.day;}).sortKeys(d3.ascending)
.entries(data);
//loop through each symbol/key
dataNest.forEach(function(d){
svg.append('path')
.data([data])
.attr('class','line')
.style('stroke',function() {
return d.color = color(d.key);})
.attr('d', line);
});
});//end of read csv
This is the graph I get, which doesn't seem like the points are sorted at all.
My data file is in the format of
[month,day,temp]
[x , y ,z]
.
.
[x, y, z ]
and the file is not sorted in any way. I want to nest and sort by month and day and have 12 different lines (with different colors) on a plot.. Can somebody help me? Thanks.
To my mind you're wanting to nest by month and sort by day, but not nest by day like you're currently doing:
var dataNest = d3.nest()
.key(function(d) {return d.month;}).sortKeys(d3.ascending)
//.key(function(d) {return d.day;}).sortKeys(d3.ascending)
.sortValues (function(a,b) { return a.day > b.day ? 1 : -1; })
.entries(data)
;
the line function will then need to be called slightly differently as the data is in the .values part of d
.attr('d', function(d) { return line (d.values); })
(This of course depends on not having multiple temperatures with the same month and day, in which case you'd nest on day as well but then need more code to average the temperatures, which would be a bit more complicated)
To be a completist I'd also change your adding the lines code to be more d3'ish like so, but this is v3 code I'm using here (I haven't updated myself to v4 yet)
svg.selectAll("path.line").data(dataNest, function(d) { return d.key; })
.enter()
.append('path')
.attr('class','line')
.style('stroke',function(d) {
return color(d.key);})
.attr('d', function(d) { return line (d.values); })
;
I want to control maximum and minimum of x scale on this graph made with d3js.
The graph is constructed with a following code:
nv.addGraph(function() {
var chart = nv.models.twoLinesWithFocusChart()
.x(function(d) {
return d[0]
})
.y(function(d) {
return d[1]
})
.clipEdge(true);
chart.xAxis
.orient("bottom") // this adds a label to the axis
.tickFormat(function(d) {
return d3.time.format('%d/%m/%y')(new Date(d))
});
chart.yAxis
.axisLabel('Values:') // this adds a label to the axis
.tickFormat(d3.format('d'));
chart.x2Axis
.tickFormat(function(d) {
return d3.time.format('%d/%m/%y')(new Date(d))
});
d3.select('#' + svgChartId + ' svg')
.datum(data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
Best regards.
There is a simillar question here by using :-
xScale.domain([minValue,maxValue]);
or you could try using :-
chart.forceX([minValue,maxValue]);
Hope it helps.
How can I invert the xAxis for the NVD3 MultiBar chart? The data is the same (except I had to convert an {x: ... , y: ... } object for the values property to a paired array for the stacked area chart. The data is displaying correctly on the lineChart as well.
FYI, the date data is ordered from latest to earliest in the array but that shouldn't matter for a time scale, right?
// Stacked Area Chart
var renderStackedAreaChart = function(data){
var newData = convertData(data);
nv.addGraph(function() {
var chart = nv.models.stackedAreaChart()
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; })
.clipEdge(true);
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%b')(new Date(d)); });
chart.yAxis
.tickFormat(d3.format('$,.2f'));
d3.select('#graph svg')
.datum(newData)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
};
// Stacked MultiBar Chart
var renderStackedMultiBar = function(data) {
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%b')(new Date(d)); });
chart.yAxis
.tickFormat(d3.format('$,.2f'));
d3.select('#graph svg')
.datum(data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
This isn't supported by NVD3 -- you would have to modify the source code. A quick and dirty workaround is (as you've suggested in the comments) to use an ordinal scale instead of a time scale. This way, the order of the values you specify as domain matters and you can simply pass it in in reverse order.
Note that you'll lose the advantages of a time scale this way though, e.g. automatic label format depending on the time range shown.