I am very new to charting with D3 and NDV3.
I am putting the charts inside tabs. (Using Foundation 6.4)
The first chart is fine but the chart on the next clicked tab has a width issue. If I re-size the window it expands to the proper size.
Here is the code based on their example. Both charts are the same code - just with different IDs.
Thanks for any insight on using charts inside jquery tabs.
the code:
<div id="chart1"></div>
<script>
var chart;
var data;
var legendPosition = "top";
nv.addGraph(function () {
chart = nv.models.lineChart()
.options({
duration: 300,
useInteractiveGuideline: true
})
;
chart.xAxis
.axisLabel("Time (s)")
.tickFormat(d3.format(',.1f'))
.staggerLabels(true)
;
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(function (d) {
return d3.format(',.2f')(d);
})
;
data = sinAndCos();
d3.select('#chart1').append('svg')
.datum(data)
.attr('height', 400)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function sinAndCos() { ... }
</script>
First tab is fine - second one is very narrow.
this is the link for the Foundation Tabs.
https://foundation.zurb.com/sites/docs/tabs.html
Thank you very much. Cheers.
Looking at the source code of nvd3 the width and height are determined by the style attribute of the svg.
Add the svg to the div yourself and give it a style attribute. Maybe it also works with a CSS style width and height, for responsive websites. Just like an image you specify the size.
<div id="chart1">
<svg id="svg-chart1" style="width:800;height:400;"></svg>
</div>
<script>
....
d3.select('#svg-chart1')
.datum(data)
.call(chart);
....
</script>
Or with a different selector
<div id="chart1">
<svg style="width:800;height:400;"></svg>
</div>
<script>
....
d3.select('#chart1 svg')
.datum(data)
.call(chart);
....
</script>
I used the line chart example from the NVD3 site and got errors on these lines
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
so I commented them out. But looking at your example you set these with the options() method. Using options() I get the interactive guideline and no errors.
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'm using nvd3 for drawing line chart for two series.As u can see in plunk PlunkLink my legends are stacked vertically .I want them to be horizantal for this width. Note: I can't edit the nvd3.js and also cant increase the width of chart for my app.I have tried few suggestions but it didn't work for line chart.Ty for ur response
nv.addGraph(function() {
var chart = nv.models.lineChart()
.x(function(d) {
return new Date(d.time)
})
.y(function(d) {
return d.value
})
.color(["#FF0000", "#000000"])
.useInteractiveGuideline(false)
.forceY(0)
.width(300)
.height(200)
;
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%H:%M')(new Date(d))
});
chart.xScale(d3.time.scale.utc());
chart.options({
noData: "Not enough data to graph",
rightAlignYAxis: false,
});
chart.yAxis.tickFormat(d3.format('values'));
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;
});
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.
How can I set my domain to [0,400] with nvd3? Here is my code:
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart().x(function(d) {
return d.label
}).y(function(d) {
return d.value
}).margin({
top : 30,
right : 20,
bottom : 50,
left : 175
}).barColor(d3.scale.category20().range()).transitionDuration(250).stacked(true)
chart.yAxis.tickFormat(d3.format(',.2f'));
d3.select('#chart1 svg').datum(long_short_data).call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
You could use xDomain or yDomain depending on you axis requirement and finally
chart.xDomain([0,400])
If you want to play around with the ranges on the yAxis you could try
chart.forceY([0, 400]); or chart.forceX([0, 400]);
Hope it helps.
Just to add one note that forcing axis values work at the time of chart instantiation. Axis values do not set if I do it after chart instantiation.