There are two things I want to achieve in nvd3 bullet chart.
I want the starting point to change the starting point from 0. As can be seen in the example, all my relevant data is in the higher side and it gets too crowded at the right end of bullet chart if I start from 0. View would be much better if starting point is around 2000.
I want to display something on mouse over on the markers. Is this possible?
This is my code:
var data = {
"title": "Price in Locality",
"subtitle": "US$, in thousands",
"ranges": [2500,2700,2900, 3000],
"measures": [2850],
"markers": [2800]
};
nv.addGraph(function() {
var chart = nv.models.bulletChart();
d3.select('#chart svg')
.datum(data)
.transition().duration(1000)
.call(chart);
return chart;
});
Here is my jsfiddle example.
Any help?
The answer to your question
2. I want to display something on mouse over on the markers. Is this possible?
Yes, its possible, make sure you pull the latest version on NVD3 from here, it has tooltip enabled. Shows the ranges,measures and markers on hover.
Not quite clear on the question 1 sorry about it.
Nearly a year late on this, but I figured I'd throw this up anyway.
Based on the source of the bullet chart, there doesn't seem to be a way to change the starting position from 0 to something higher, as in your first question. (In fact, there seems to be little you can change, except the ranges and the color.)
However, it looks like your ranges are in the 2000s. So you could divide all your numbers by 100 and make your subtitle property millions instead of thousands and format your number as a Fixed.
Related
My d3 timeline chart is showing some junk value (decimal) in the x-axis tick, instead of showing the date and time.
This only happens when there is a single data in the graph.
As shown in the diagram below.
code sandbox - https://codesandbox.io/s/exciting-clarke-yfd1e
I found the root cause of this, It is happening because of the initial call on the chart load. I am doing a zoom transform on the chart load. If I remove this line it works as expected but I can't remove as this is required (Initial zoom transform to apply on default chart load - d3.zoomIdentity).
Code creating the issue is below -
var transform = d3.zoomIdentity.translate(200, 0).scale(0.5);
svg.call(zoom.transform, transform); //This is initial call on chart load
Please suggest to me how to fix this issue in the d3 chart.
Thanks in advance.
This seems to be an issue with the scale, so when there is only one data the default behavior is considering it as a date but after transforming it's considered as a number
and the junk value is coming as last 3 digits of the number i.e, in your case
startTime: "1574504520049" is .049
So if you update the scale to somewhere near that you will be able to get time as
d3.zoomIdentity.translate(100, 50).scale(0.0000000001)
Please check https://github.com/d3/d3-zoom/issues/57
it will help you find a proper scale for the problem.
I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/
I’m new to to d3 and have combined mbostock’s stacked bar graph example ( http://bl.ocks.org/mbostock/3886208 ) with a map to show data (canada.json)
I would like the graph to display an updated chart on the d3.mouseover event of the province:
http://gao8a.github.io/ (something like this)
Unfortunately, I was only able to get the axises to display. It's showing either multiple or the same axis overlapping:
(These will take ~ 3 seconds to load)
Multiple:
http://bl.ocks.org/GAO8A/566e238a72e5ebd1e2c1
Same Axis overlap
http://bl.ocks.org/GAO8A/64f94bb494c4a73f2bf6
I understand I probably need a ‘mouseout’ event to delete the previous but I’m not quite sure how to design that either.
Can anyone point out what I’m doing wrong and how I should be loading the data?
PS:
I was going to make a jsfiddle but can’t seem to get it to get it to work with my hosted canada.json data.
https://raw.githubusercontent.com/GAO8A/GAO8A.github.io/master/canada.json
Thanks
Your issue is that you keep adding the axes in the tooltip element. Unfortunately this creates the overlaps. What you could do is add the axes once, and the readjust their domain with the new values that correspond to the element being hovered.
So in essence if you could add the following lines:
var X_AXIS = tooltip.append("g").attr("class", "x axis x-axis").attr("transform", "translate(0," + height + ")");
X_AXIS.call(xAxis)
X_AXIS.append("text").attr("dy", "3em").attr("dx", "50em").style("text-anchor", "end").text("Month");
var Y_AXIS = tooltip.append("g").attr("class", "y axis y-axis")
Y_AXIS.call(yAxis)
Y_AXIS.append("text").attr("transform", "rotate(-90)").attr("dy", "-3em").attr("dx", "-8em").style("text-anchor", "end").text("Temperature (Celcius)");
just before adding your map, this would in a sense 'initialize' the axes.
So further, in your mouseover handler, you could add the following lines, just after you determine your x and y domains.
X_AXIS.call(xAxis)
Y_AXIS.call(yAxis)
or better still, to add some transition:
X_AXIS.transition().duration(400).call(xAxis)
Y_AXIS.transition().duration(400).call(yAxis)
This way, you don't keep adding axes, you just readjust the ones currently intialized.
Hope this helps.
I feel like I'm trying to do something fairly straightforward, but I can't seem to figure out how. I have a page displaying several bar graphs, and I'm trying to build a button that makes certain bars appear and disappear. The bars have labels, and when the button is toggled, I want half the bars to dissappear, the remaining bars to double in size and the labels for the bars to move down a little bit.
I'm using D3.js to draw my graphs, and I've got almost everything working, except these little labels. All I'm trying to do is increment their "y" attribute by about 15 pixels, but I can't seem to find a way to request this value before changing it!
Initially I thought
d3.selectAll(".bar-value-label").attr("y", function(d,i){ return d + 15;})
should work. However, when I logged what this "d" was, it turned out to be a reference to the data object initially used to create this element.
So, basically I'm just trying to find a way to get the current value and in- or decrement it. Is there a nice way to do this within D3?
Regards,
Linus
EDIT:
Okay, so I've found a way that works. I'm very doubtfull that this is the best/most efficient way, so answers are still very much welcome :)
var resp_labels = d3.selectAll(".bar-value-label-resp")[0];
resp_labels.forEach(function(d,i){
var old_y = parseFloat(d.getAttribute("y"));
d3.select(d).transition().attr("y", function(i){ return old_y - barheight/4 ;});
});
I haven't had a chance to check that it works, but I think that this is a slightly simplified version of your solution:
var resp_label = d3.select(".bar-value-label-resp");
var old_y = +resp_label.attr("y");
resp_label.transition().attr("y", old_y - barheight/4);
I'm currently using a the NVD3 discreteBarChart but I have a lot of data and the labels on the X axis, which are dates in my application, are encroaching upon each other like this : ). This doesn't happen with a multiBar or a linePlusBar chart, where the labels are automatically adapted :
How can I prevent the lablels on the discreteBar chart to impinge on the others?
Thanks for your answers!
Little late to answer, but to get similar results but using multi-barchart as mentioned by Lars , you can use following command to get a similar graph (i.e hide "stacked" and "grouped", as well as legend buttons).
n1$chart(showControls = FALSE, showLegend = FALSE)