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";
Related
I'm working with x-range type of highcharts for a timeline, is there any way to get the axis value where the cross hair / mouse is hovered.
in this pic the cross hair is between a particular time duration but the tooltip is showing the points, is there any way to show the current hovered axis point on the tooltip ?
i have added code link is on the comment, thanks in advance
Highcharts tooltip is based on series points and changing the way it works would require a lot of customization. To workaround, you can add transparent dummy line series and dispable enableMouseTracking option in xrange series. Please look at the example below:
events: {
load: function() {
var newSeries = this.series[1],
min = this.xAxis[0].min,
max = this.xAxis[0].max,
data = [],
i,
time = 60 * 1000;
for (i = min; i < max; i += time) {
data.push({
x: i,
y: 0
})
}
newSeries.setData(data);
}
}
Live demo: http://jsfiddle.net/BlackLabel/aekvnf4d/
Finally found how to find the exact position , need to use highstock for that , thanks for #ppotaczek because of his answer which helped me to find some exact solution for this is in comment ,( sorry dunno how to link the jsfiddle link, shows error for indent spacing when submitting the answer)
I have a created simple snapjs sample here https://plnkr.co/edit/CyeVHuuuWrTAy1yKsp4d?p=preview
This is my Script - I am loading an svg and I would like to paint it in green.
Surprisingly not the svg is colored, but the "bigCircle", which I draw as well.
$(document).ready(function() {
var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
Snap.load("world.svg", function (f) {
var world = s.append(f);
world.attr({
fill: "#bada55",
});
bigCircle.drag();
world.drag();
});
})
Thanks for your help!
You need to select the world after you place it. You are trying to do this with:
var world = s.append(f)
But that doesn't return the paths that make up the world. It returns the entire svg. I would add the world first and then select it. I fixed it by adding this line:
world=s.select('[id="layer1"]')
I saw that the world is all grouped under that id in your svg. Once it's selected, you can apply color/drag like you wanted. Here's the plunker: https://plnkr.co/edit/t4JmZMz4JPJ0dDb95aQc?p=preview
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
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?
I need help to snap to fit the draggable elements in High charts.
The "draggable-point.js" is used drag my line type object, but I need to snap fit draggable object to the near by y-axis.
Here I attached the fiddle linek. Here they done dragging without snap to fit to y-axis. link : http://jsfiddle.net/highcharts/AyUbx/1914/
Thanks in advance.
Highcharts.Chart.prototype.callbacks.push(function (chart) {
interval = parseInt($("#scaleY").val());
snapFit = parseInt($("#snapsPerLine").val());
snapInterval = interval/snapFit;
var container = chart.container,
dragPoint,
dragX,
dragY,
dragPlotX,
dragPlotY;
chart.redraw();
});