I'm trying to apply a scale to y-axis in my chart, but when I do it I get a blank svg object.
I did the same thing with the x-axis and it's working fine.
Problem happens when you uncomment this section
// .y(function(d) {
// return yScale(d[1])
// })
http://jsfiddle.net/MgwR5/1/
Could anyone tell me what I'm doing wrong?
The area functions are y0() and y1(), not y(). Ref: D3 API documentation
Have a look at the js bin. I've put a bunch of comments in that should help and I've assumed that you wanted a line chart.
If you want to put axis's on your chart you should be looking to use the d3.svg.axis function. It does most of the heavy lifting for you. You also need to make space for the axis try using some padding and margins (you might want to look at this example or the example on the js bin d3 page - use the link at the top of the google groups d3 page). You also probably want to separate out your axis's and your plot by using svg's group ('g').
Cheers
Related
In this plunker I'm trying to make the xAxis text (the states) render on top of the rect element.
The usual fix is to select the .axis.axis--x and place it after the rect.
I've also tried to change the z-index in various classes and elements without any success.
Anyone that knows what I'm missing?
You should insert your layer containers (which contain your rects) before x-axis. Change your code on 186-188 string this way:
let barGroups = g.selectAll("g.layer").data(series);
barGroups.enter().insert("g", ".axis--x") // <== !!!
.classed('layer', true);
Look at my fork of your plunker.
Maintaining the correct order of <g> elements should work just fine. You need to make sure the <g class=".axis.axis--x"> comes after your bars in document order. There are multiple ways to achieve this; one way is to use selection.insert("g", ".axis.axis--x") to insert the bars right before the x axis group:
// Stacked bars
let barGroups = g.selectAll("g.layer").data(series);
barGroups.enter().insert("g", ".axis.axis--x")
.classed('layer', true);
Have a look at this working fork of your code.
Please have a look at this JSFIDDLE. I'm trying to follow a tutorial to create a very basic scatter chart in NVD3.js, but to no avail.
function createBasicChart1(){
var chart;
nv.addGraph(function(){
//Create chart
chart = nv.models.scatterChart()
.showLegend(false) // Remove legend (will put it back later)
.showDistX(true) // Show X axis
.showDistY(true) // Show Y axis
.useVoronoi(false) // For now, disable hovering on points
.color(d3.scale.category10().range()) // Colormap
.duration(500); // Fade in duration
// Generate toy data
data = [{key: "", values:[{x:0,y:0},{x:1,y:1}, {x:3, y:3}, {x:3, y:10}]}];
//Add chart to page
d3.select("#basicChart1").datum(data).call(chart)
// Register chart with window resize event
nv.utils.windowResize(chart.update);
return chart
});
}
Could you please tell what I'm missing here? I've added all the resources like the tutorial says.
There is one mistake from you and one mistake from the tutorial's author.
Your mistake is that the ID of the SVG is basicChart1, not basicChart. Actually, it is on the tutorial:
When you write the javascript code, make sure to change the d3 selector id to a one that will match with the template.
The author's mistake is a little bit more strange: in his tutorial, the author never calls createBasicChart1. But, of course, unless it is an IIFE, you have to call it:
createBasicChart1()
Here is your updated fiddle: https://jsfiddle.net/5eydu463/
I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.
I tested it by running the line:
d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')
in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?
EDIT:
I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).
Going by your comments:
You don't want to see the " the first vertical line in the grid for an nvd3 chart"
Which is the y axis:
Two ways to achieve that:
Option1
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(false) //hide the y-axis
.showXAxis(true); //Show the x-axis
Option2:
Since in your example you are going for a CSS option
d3.selectAll('.nv-y').attr('display','none')
I will prefer Option1
EDIT post your clarification, you wish to make the y axis line light you can use:
d3.selectAll('.nv-y path').attr('opacity','0.1')
or if you want to hide it completely
d3.selectAll('.nv-y path').attr('display','none')
One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.
Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.
So I'm trying to get my highcharts plot to draw the recent minima and maxima.
I already figured the correct JSON sub-object is "plotLines", however my script just refuses to draw them without any error. Maybe someone of you can spot my error. The corresponding (and probably wrong, but that doesn't really matter for this example) values are listed to the left
thanks!
With you current values, the lines will never plot.
Your axis min is sitting at 500, and you are plotting lines at 498.
The axis will not expand to show plotLines or plotBands - it will only expand to show data (or based on minPadding/maxPAdding, etc).
You will need to check that your lines are within your axis min/max in order to display them.
You can do that by using the getExtremes() method, and if needed, the setExtremes() method:
http://api.highcharts.com/highcharts#Axis.getExtremes
http://api.highcharts.com/highcharts#Axis.setExtremes
Edit to incorporate comments:
If the line is the same value as a grid line, you will need to set a zIndex on either the plotLine or the gridLines - by default the gridLines are above the plotLines
I have a Highchart bar chart with negative values (with the bars then going downwards). Now I would like to paint a black line for y=0 like so: .
I haven't found a trivial way to do this and I would like to avoid directly modifing the SVG or adding a fake line chart or something. Maybe someone knows better way? I've already played around with (minor)tickInterval and (minor)gridLineColor but that wouldn't solve my problem.
you can use plot lines for this like shown in this example http://jsfiddle.net/4rpNU/
yAxis:{
plotLines:{}
}
here is the api reference for it http://api.highcharts.com/highcharts#yAxis.plotLines
Hope this will be useful for you :)