I have a working d3.js area chart How can I change it to become a line chart instead? I have been trying to include a line variable var line = d3.svg.line() without success.
You could just add the following css, to show the area as line:
.area{
fill:none;
stroke:#000;
}
Live example here:
http://jsfiddle.net/e9hmd/3/
Here's an example using d3.svg.line instead of d3.svg.area:
http://jsfiddle.net/e9hmd/4/
Related
I might have missed something obvious but how do you plot a non-stacked line chart in dc-js ?
I have used the example jsFiddle as a base to try and add a second group to the lineChart definition but to no avail here : https://jsfiddle.net/chapo/pcn7mot5/
I defined a second group as :
speedSumGroup2 = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 500;});
How do I plot it along with speedSumGroup ?
The stacked chart adds each line to the previous.
If the lines should be independent, the series chart is the way to go.
Currently, i'm developing realtime stackedAreaChart using nvd3.js.
nvd3.js is great, but i have two problem.
Example is following
http://jsfiddle.net/logo1318/1hkxfqhw/
1. First Problem
when i use following code
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%X')(new Date(d)); })
Tooltip shows "Nan:Nan:NaN" like following pic, but i want to show "12:33:33".
2. Second Problem
When i mouse over some position in chart, tooltip shows that position's content.
When chart is moving(updating) , tooltip doesn't show current position's content
But, until i move a mouse, tooltip content is not updating.
How can i update tooltip content like following examples in rickshaw.js?
http://code.shutterstock.com/rickshaw/examples/extensions.html
Thanks.
I want to implement wrapping long labels like http://bl.ocks.org/mbostock/7555321 in NVD3 Horizontal Multi-Bar Chart http://nvd3.org/examples/multiBarHorizontal.html
I tried to do it by adding some line break by <br /> or \n in label text like below:
var xTicks = d3.select('.nv-x.nv-axis > g > g').selectAll('g').selectAll('text');
xTicks.text(function(d,i){
return d+"<br />"+i; // trying to test by adding iteration but it does not work
})
but I did not achieve it so Please suggest, how can I implement it using NVD3 library.
I am new to D3. Would be grateful if someone answer my folowing doubts:
On clicking a radio button i am updating the line chart using following code
d3.selectAll(".line").attr("d", line);
However, this updates all the line charts present on page. How do I update line corresponding to this particular graph.
You must label each chart in some way, then use that in the selection.
Set an ID on each chart #chart-1, #chart-2, ..., #chart-n
The select either like this:
d3.selectAll("#chart-1 .line").attr("d", line);
or
d3.select("#chart-1").selectAll(".line").attr("d", line);
With the second one you can store the chart and use it later, it's more efficient then:
var chart1 = d3.select("chart-1");
// ...possibly other code
chart1.selectAll(".line").attr("d", line);
Let's say you have a selection of charts:
var charts = d3.selectAll('.line').data(data);
charts.enter().append('path').attr('class', 'line').attr('d', line);
To work with a specific chart, just filter your charts seletion:
var chart;
chart = charts.filter(function(d) { d.name === selectedGraph; });
// or
chart = charts.filter('#chart-' + selectedGraph)
I am using NVD3 chart library to display charts in my application.I used to show many chart types say line,bar,pie,scatter,etc..
Till now ,i used to show only integer/float values at x-axis of line/bar chart chart..Its working well.(Sample data : (x-10, y-50),(x-20, y-100))
But the problem is,when am trying to display the line chart with some string value at x-axis,the nvd3 chart doesn't display anything..Dont know where am going wrong?
(sample data : (x-sun,y-50),(x-mon,y-75),(x-tue,y-100))
Need help.Thanks in advance
Try this, it works for me:
select all the svg element that corresponds to text. container is a variable referring a string for selection of text;
d3.selectAll(container + ' .nv-x .tick text').text(function(d){return d;})