Nvd3 - scatter chart won't load despite adding all external resources - javascript

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/

Related

Double clicking on c3js line chart

I'm trying to create a double-click event on a c3js line chart. I've created double-click events with other kinds of charts with the following code:
chart.internal.main.selectAll('.' + c3.chart.internal.fn.CLASS.eventRect).on('dblclick', function (d) {
var $$ = chart.internal;
$$.main.selectAll('.' + c3.chart.internal.fn.CLASS.bar).each(function (d) {
if ($$.isWithinShape(this, d)) {
...
}
});
But when I try this on a line chart (changing c3.chart.internal.fn.CLASS.bar to c3.chart.internal.fn.CLASS.line) it catches all the lines in the chart, and gives no information on where on the X-axis I'm clicking. I looked through all the other values under CLASS but can't find anything that might correspond to the dots that separate the line segments.
I figured it out. I need to use c3.chart.internal.fn.CLASS.circle. That will tell me which datapoint is being clicked on.
I haven't tried this with circles turned off. It might not work then.

Alter first vertical grid line in nvd3

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.

Removing X-Labels of barChart in DC.js

I have a bar chart that created in dc.js and hosted in jsfiddle. i want to remove x labels of this chart . after searching i find this SF question. but even i set
.xAxis().ticks(0)
it doesn't work and i can see the label.so how can i remove the xAxis labels.
Use the .tickValues() function instead, passing an empty array:
.xAxis().tickValues([]);
Complete demo here.

NVD3.js piechart use in Leaflet control

I am trying to add some data visualization to web map I am working on and I am exploring the use of D3, specifically NVD3. I am using the PieChart Example as a test run for a proof of concept.
I add a leaflet control to my map like this (forgive the bad formatting):
var visualizationControl = L.control({ position: 'bottomleft' });
var visualizationDiv = L.DomUtil.get("visualizationContainerDiv");
// ...
visualizationControl.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'control');
this._div.innerHTML = result;
return this._div;
}
visualizationControl.addTo(MapProvider.map);
nv.addGraph(function () {
var chart = nv.models.pieChart()
.x(function (d) { return d.label })
.y(function (d) { return d.value })
.showLabels(false);
d3.select("#chart svg") //div with chart Id and svg container within that div
.datum(exampleData())
.transition().duration(350)
.call(chart);
return chart;
});
The chart will render ok in my control, and the on hover behaviour does register correctly.
However, when it appends the tooltip to the DOM it appends it to the body instead of my SVG or even the control div.
It's difficult to tell from this image but this was taken during an on.hover over one of the slices of the pie and it should write out the tooltip on top of the pie slice. Notice the "One 29.77" sitting off to the side in the navbar.
I have been poking around the development version of the NVD3 js and found a few blocks that refer to the tooltip container and it looks like it should append it to the SVG container.
I also tried changing the css of the tooltip to no avail.
I don't want to give up on this just yet. Any suggestions, help, ideas would be greatly appreciated. Thanks.
Using the current versions of leaflet, D3 and NVD3, debugging/testing in Chrome.
UPDATE
I did not solve this problem using NVD3 I did, however, end up using C3js. It also has a pie chart and this played nicely with my L.control(). A word of caution though, (if you try to go with C3) look carefully at how the charts are looking to receive the data that is being passed to them. I had to play with this for while to get them to work.

d3.js - blank object when applying y-axis scale

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

Categories