I don't really know why but my xPosition in the stacked bar chart that I am working on is not really working. Can someone tell what I am doing wrong?
No matter what bar I hover over it always comes out on the side:
Here's a JS Bin code that I am working on: https://jsbin.com/qudoyewiba/edit?js,output
All help is appreciated. Thanks!
Inspect the console, the console is your friend. You have a lot of NaNs. The reason is simple: your rect elements don't have a "x" attribute. So, this doesn't work:
var xPos = parseFloat(d3.select(this).attr("x"));
Instead, you have to get the "x" translation of the group that is the parent of that respective rectangle:
var group = d3.select(d3.select(this).node().parentNode);
var xPos = d3.transform(group.attr("transform")).translate[0];
Here is your working code: https://jsbin.com/dutetokoti/1/edit
Related
I'm follow this example to build a Gauge Graph with AmCharts: https://www.amcharts.com/demos/gauge-with-bands/
After some modifications, I added a new ClockHand element as can be seen in the image below:
In the gauge graph, I adde a second ClockHand (blue color) and try to add a ToolTip..
But when I tryed to use this ToolTip, It' not showing in the correct position. I'm using this code:
var hand2 = chartdivGauge.hands.push(new am4charts.ClockHand());
hand2.innerRadius = am4core.percent(95);
hand2.radius = am4core.percent(100);
hand2.startWidth = 20;
hand2.pin.disabled = true;
hand2.value = 50;
hand2.fill = am4core.color('blue');
hand2.stroke = am4core.color('blue');
hand2.tooltipText = "AAA";
So, how can I fix that? How can I put this Tooltip in the right position, close to clockhand.
Thanks!
Thanks to #martynasma, I've got the answer in GitHub amcharts forum, take a look:
https://github.com/amcharts/amcharts4/issues/2778
A ClockHand is a big element, consisting of many sub-elements.
I suggest you put tooltip on its hand sub-element:
hand2.hand.tooltipText = "My Tool Tip";
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 have simple tooltip question but I couldn't find the solution.
The codes below draw a doughnut chart. When user mouseovers a segment of pie, the tooltip should pop up in the middle of doughnut. But I don't know why it does not work here. Can anyone help to point out the problem? Here is JSbins
If I change the line 36 to d3.select(#pieChart), the tooltip works. However, for some reasons, I want the tooltip to append on svg.
Thanks a lot!
Not used JSBin a lot so I used JSFiddle : https://jsfiddle.net/thatoneguy/0qgzLk2L/
You can't append a div to svg so you have to create a container like so :
var svgContainer = d3.select('#pieChart');
And then append the svg to this :
var svg = svgContainer.append('svg')
And now use the container for the tooltips :
var tooltip = svgContainer
.append('div')
I was hoping to get some help on Highcharts/Highstock. I created a jsFiddle with my chart so far.
https://jsfiddle.net/Wolfs_Brain/qhgxd813/1/
Here is what I am trying to do:
I would like the Tooltip to show up initially without ruining responsiveness.
I have commented out the last two functions to point out the ones that seem to be causing the issue. If you uncomment these two:
function(chart){
// Last point in graph...
showLastPointTooltip(chart);
chart.series[0].data[i].setState('select');
}
function showLastPointTooltip(objHighStockchart){
//show tooltip for last point
var points=[];
if(objHighStockchart)
{
for(var i=0;i<objHighStockchart.series.length;i++)
points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length-1]);
objHighStockchart.tooltip.refresh(points);
}
};
the graph will function how i'd like but it is no longer responsive.
If you need any other information from my part please let me know.
Thanks in advance.
I have a number of dc bar charts that get added to a page. For some reason, when I brush a selection on the chart, the selected area starts a good bit to the left of the cursor.
For example in this case the cursor was around 12 on the x axis, but the brush selection started around 4.
In most cases the cursor starts before the x axis with no data selected.
This is pretty much the code used for the chart. I can't really see anything that would be causing this issue.
I'm working with version dc 2.0.0-beta.19, but I don't think it's an issue related to this version as it seems to be happening on the stable release too.
var width = 300;
var height = 100;
var ndx = crossfilter(data);
dim = ndx.dimension(function(d) {return +d[feature];});
grp = dim.group().reduceCount();
chart = dc.barChart("#chart-relative-var4252");
chart.width(width)
.height(height)
.dimension(dim)
.group(grp)
.x(d3.scale.linear().domain([0,21]))
.elasticY(true)
.gap(1)
.brushOn(true);
Would anyone have suggestions on where to start looking to troubleshoot this?