I'm trying to find if amcharts has a facility to have legends as checkboxes just like highcharts does. Some examples in here -
http://stackoverflow.com/questions/19174158/in-highchart-legend-want-to-bring-checkbox-at-start
http://jsfiddle.net/lukelarsen/yHGS9/9/
http://flexdevtips.blogspot.co.nz/2009/10/linechart-with-checkbox-legend.html
I tried to put checkboxes outside the chart & add listeners & so forth. it gets complicated. So wondering if anyone has had this requirement & has managed to implement it?
Any help would be highly helpful.
There you go:
First we have to add eventlisteners to create the boxes everytime the chart redraws. (this is necessary because the checkboxes are child elements of the legend and the legend is recreated everytime sth happens with the chart)
chart.addListener("init", function() {
chart.addListener("drawn", createCheckboxes);
chart.legend.addListener("showItem", createCheckboxes);
chart.legend.addListener("hideItem", createCheckboxes);
}
Then we're creating the one checkbox for each legend entry.
function createCheckboxes() {
var legend = chart.legend.legendData;
var div = $("<div style='position:absolute; top: 10px'></div>");
for(var i = 0; i < legend.length; i++) {
div.append("<input style='float: left; "
+ "position: absolute; top:" + legend[i].legendEntry.y + "px' "
+ "type='checkbox'" + (legend[i].hidden ? " " : " checked ")
+ "onclick=toggleItem(" + i + ")></input>");
}
div.appendTo($(chart.legend.div));
}
The last step is to handle the click event on the checkboxes.
var toggleItem = function(i) {
chart.legend.clickLabel(chart.legend.legendData[i], event);
}
That's it. Demo
Related
I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.
The js code block I wrote for solution but it does not work properly:
// The code inside the databound function of master grid
$("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
if ($(this).hasClass("k-i-expand")) { // if the grid is expand
// uid of tr element
var tr_UID = $(this).parents("tr").data("uid");
// master grid
var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");
$(ustGrid.dataSource.data()).each(function (i, item) {
if (item.uid == tr_UID) {
var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
var rowCount = altGrid.dataSource.view().length;
$("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
}
});
}
});
// This code block only works on second clicking the expan button.
// Does not recognize the second grid when clicked for the firs time
// Should I use databound for second grid? However I do not know how can I do that.
firstclick
secondclick
This code block let me give databound to child grid. It is worked for me.
Solution
I'm trying to do a tooltip similar to this:
https://codepen.io/team/amcharts/pen/dyyaxLr
But when a series is disabled via the legend (i.e. "cars"), I also want to remove the value in the tooltip.
I guess there should be a way to format the series.tooltipText with an adapter like this:
series.adapter.add("tooltipText", function (text, target) {
// generate text dynamically
// ...
return text;
});
But I can't figure out how to get only the data for the visible series and format the string accordingly.
Is something like this possible?
I found the following solution:
series.adapter.add("tooltipText", function (ev) {
var text = "[bold]{dateX}[/]\n";
x.series.each(function (item) {
if (!item.isHidden)
text +=
"[" +
item.stroke.hex +
"]●[/] " +
item.name +
": {" +
item.dataFields.valueY +
"}\n";
});
return text;
});
How we can get all features properties in D3 with clicking on a feature?
For example, how we can get 'AREA' and 'PERIMETER' of all provinces of this map: GeoJson map of Colombia, when clicking on a province?
The code below not work. I see 'properties' undefined.
function clicked(d) {
var polys= effectLayer.selectAll("path");
var x;
var txt;
for (x in polys) {
//show this:
txt += polys[x].properties.AREA + " ";
}
alert(txt );
}
You're mistaking a selection for a datum. You cannot access a selection like this:
polys[x].properties.AREA
So, since what you want is the datum, use an each:
var txt = "";
var polys= mapLayer.selectAll("path").each(function(e){
txt += e.properties.AREA + " "
});
Here is the updated bl.ocks, check the console: https://bl.ocks.org/GerardoFurtado/bb29d8d5b984da7fc8079c94cce9423c/e9963b96e01b2ecab5215ecf31c7d821c6b54daf
I am making a webpage with a "time line" style, it's navigated horizontally but has a fixed menu with an element that slides along a bar when you click on every element.
Now I was using a blueprint of vertical timeline that also moved the element across the bar when you got to the element by scrolling normally
http://www.webdesigncrowd.com/demo/slider-timeline-menu-12.2.13/
Now, I am using a page-wrap div to keep the elements within a certain boundary along with a css style for the body to stack elements horizontally.
When I click on ever it takes me to the correct page like normal, and the bar element works as intended, but the feature for it to work when the linked element moves into view doesn't seem to work anymore
This is the original JS code
// Scroll Spy
$(window).scroll(function() {
var top = $(window).scrollTop() + 100; // Take into account height of fixed menu
$(".container").each(function() {
var c_top = $(this).offset().top;
var c_bot = c_top + $(this).height();
var hash = $(this).attr("id");
var li_tag = $('a[href$="' + hash + '"]').parent();
if ((top > c_top) && (top < c_bot)) {
if (li_tag.hasClass("active")) {
return false;
} else {
li_tag.siblings().andSelf().removeClass("active");
li_tag.addClass("active");
$(".menu ul li.active a").slideToPos();
}
}
});
});
And this is what I edited to try to make it work on a Horizontal display.
// Scroll Spy
$(window).scroll(function() {
var left = $(window).scrollLeft() + 1300; // Take into account height of fixed menu
$(".container").each(function() {
var c_Left = $(this).offset().left;
var c_bot = c_left + $(this).width();
var hash = $(this).attr("id");
var li_tag = $('a[href$="' + hash + '"]').parent();
if ((left > c_Left) && (left < c_bot)) {
if (li_tag.hasClass("active")) {
return false;
} else {
li_tag.siblings().andSelf().removeClass("active");
li_tag.addClass("active");
$(".menu ul li.active a .navut").slideToPos();
}
}
});
});
Now I have tried using the original one without change too, but that feature is still not working.
I thank you guys in advance.
I have a stackPane, filled with a Circle and a couple of lines.
I want to display a tooltip while hovering over the StackPane and the tooltip should contain the X/Y coords of the mouse.
I know how to get the Coords of the mouse, but I'm unable to find a way of showing the tool tip.
Can any of ou guys help me with that?..
Anshul Parashar's answer probably works, but ToolTip also has a 'installation' static helper method to handle display on hover.
Assuming n is a Node:
Tooltip tp = new Tooltip("at stack tool");
Tooltip.install(n, tp);
try this...
Tooltip tp = new Tooltip("at stack tool");
stackpane.setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
Node node =(Node)t.getSource();
tp.show(node, FxApp.stage.getX()+t.getSceneX(), FxApp.stage.getY()+t.getSceneY());
}
});
I solved it like this:
Tooltip mousePositionToolTip = new Tooltip("");
gridPane.setOnMouseMoved(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
String msg = "(x: " + event.getX() + ", y: " + event.getY() + ")\n(sceneX: "
+ event.getSceneX() + ", sceneY: " + event.getSceneY() + ")\n(screenX: "
+ event.getScreenX() + ", screenY: " + event.getScreenY() + ")";
mousePositionToolTip.setText(msg);
Node node = (Node) event.getSource();
mousePositionToolTip.show(node, event.getScreenX() + 50, event.getScreenY());
}
});
It will show a ToolTip in right of your mouse-pointer. You can replace your StackPane with gridPane in my code and it should work. But i didn't test it.
The prior solution is OK, but it gets called for every mouse movement.
Instead, here's a solution that just gets called once when it's about to display the tooltip:
The JavaFx 8 Tooltip provides event callbacks just before and after the tooltip displays (and just before and after it's taken down). So, install an event handler for the "just before" call like this below. The window event doesn't give you the current mouse coordinates, unfortunately, but you can still get them at any time with java.awt.MouseInfo.getPointerInfo().getLocation() as below.
Tooltip t = new Tooltip();
Tooltip.install(yournode, t);
t.setOnShowing(ev -> {// called just prior to being shown
Point mouse = java.awt.MouseInfo.getPointerInfo().getLocation();
Point2D local = yournode.screenToLocal(mouse.x, mouse.y);
// my app-specific code to get the chart's yaxis value
// then set the text as I want
double pitch = yaxis.getValueForDisplay(local.getY()).doubleValue();
double freq = AudioUtil.pitch2frequency(pitch);
t.setText(String.format("Pitch %.1f: %.1f Hz %.1f samples", pitch, freq, audio.rate / freq));
});
Works for me.