I'm trying to figure out how to highlight a line (series) in Highcharts from an element that's not related to the Chart object in any way.
I went through the documentation, and don't really see a way of achieving this. I can get into the series elements using the series.get(id).
Seems like there are no methods that can be helpful - http://www.highcharts.com/ref/#series-object
Any ideas if that's even possible?
After a lot of digging and testing, I've managed to get this working - still not sure if this is the best way (probably not).
Chart.series.get(someId).graph.attr('stroke-width', '5')
Unfortunately, this is just getting into the actual DOM element and changing the value of the property of a single element, so if you need to change the stroke width, and the styles of the markers on this line, you'd have to loop through all elements, and apply changes manually.
UPDATE: Ok, there's a better way
But this is using the private API, so if the library changes thins, your code will not work:
Chart.series.get(someId).onMouseOver() and Chart.series.get(someId).onMouseOut().
This actually fires the defined hover-state.
Related
I'm fairly new at D3 and recently saw this piece of code while someone was creating a transition: d3.select({}) in d3.select({}).transition() etc. This seems to be doing the same thing as d3.select([]). In the console, it showed up as an array, but I'm still unsure what it does. Any help would be appreciated, thank you!
The only place I've seen this is here. Now usually you would d3.select the object you want to run the transition on. But in the linked example, Bostock is not operating on svg composed of different DOM objects to manipulate but instead on a canvas that has to be wiped and redrawn for each step in the transition. So, d3.select({}).transition(), simply becomes an easy way to fire up a generic transition he can work with. You should note that something has to be selected to create a transition, just doing d3.select().transition() won't work and an empty object (or an empty array) allows it to work.
I want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this
is a syntax tree, and this is the general way I want it to be displayed.
How do I build something like this with HTML and CSS?
edit: Solution
Just in case somebody who finds this question later is trying the same, here's what I did:
I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.
The result can be seen here.
Try d3, it has a really good tree visualization
Another option is ArborJs, you can find an introduction here
I have a D3.js chart similar to this. As the user drills down into the chart I utilize the bootstrap tooltip to display the nodes name. I am currently tracking the node by call the tooltip show method over and over which cause the tooltip to re-render at the new location.
setInterval(function(){
$(node).tooltip('show');
}, 100)
My concern is that calling this function like this will cause performance issues. Can anyone suggest a better way to accomplish this or give me some insights on to performance issues when using the setInterval function this way?
From your description it sounds like what you are trying to do would be better accomplished by listening for discrete changes in state rather than time. I haven't worked with D3.js, but even something as simple as listening for clicks on <circle> elements would be a ton more efficient.
JS
$('svg').on('click', 'circle', function () {
$(node).tooltip('show')
})
It looks like D3.js has it's own event framework, but I'm not sure if it supports delegation. Someone more familiar could probably provide a better suggestion to that end.
Finally, depending on how many nodes you show at once, calling tooltip show on all of them could itself generate a performance hit. Tracking which ones open and close each time by storing references could be more efficient. Again, there might be something already in D3.js to handle this, but it's not something I know.
I´m working with Raphael, and I think that I´m using it in a way that does not take advantage of some features that seems to be useful.
For example, I´m trying to add a listener on a Set (a group of elements), in a way that on mouse over on any of those elements, the script triggers an animation on the whole set.
When you add a listener to a set, Raphael adds the listener to each of the elements and animates them separately.
Like you see in this example http://jsfiddle.net/4VYHe/3/ in wich I want that all the rectangles in the same set (set = horizontal groups of 10 rectangles), change the color attribute on mouse over on any of them.
I have found a few methods in the raphael documentation that i think must help to achive this. But I´m having a hard time understanding how these methods work.
For example:
the eve object(http://raphaeljs.com/reference.html#eve)
the Element.animateWith() method (http://raphaeljs.com/reference.html#Element.animateWith)
the Raphael.animation() method (http://raphaeljs.com/reference.html#Raphael.animation)
The Raphael Library seems to be really powerful and I really want to get it work properly, I don´t want to write all kinds of diferent javascript hacks, because I think that these tools have to get the work done in a more elegant way.
If you think that I´m using the wrong library I´m still open to all kinds of advices.
Thank you in advance.
---EDIT---
This is a working example (http://jsfiddle.net/4VYHe/6/). But this is a hack with lack of efficiency and elegancy. I want something that uses the correct tools on the correct way.
There is some information on this page. http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#PAGETOP . A couple of examples, but nothing that explain how things work in Raphael.
Take a look at this fiddle, I think it is doing what you are looking for. The fundamental difference is that you want to call animate on the set, rather than this. It appears that when you add a handler to a set, this refers to the individual elements in the set (which are iterated over to assign the handler), and not the set itself.
Note that I pulled the handler functions out into the getHoverHandler function:
function getHoverHandler(fillColor) {
var cSet = set;
return function(){
cSet.animate({fill: fillColor}, 300);
};
}
set.hover(getHoverHandler('#000'),
getHoverHandler('#FFF'));
in order to break the closure. If you try to do it like this:
set.hover(function(){
set.animate({fill: '#000'}, 300)
}, function(){
set.animate({fill: '#FFF'}, 300)
});
as you loop through, set will keep changing, and the closures will maintain awareness of this. As a result, all handlers will be acting on the last row of boxes.
If you don't understand javascript closures, you might want to look at this article. It is old, but in pretty simple language, and it helped me as I have tried to get my head around them.
Kreek is absolutely correct in this comment above. Sets are a workaround for the inconsistencies between SVG and VML.
In your example above, you're running into the same issue that you were facing in your previous question. Using this in an anonymous function will almost always not work in the way you expect, as this won't be referring to what you think it is. Have a look at this discussion, particularly the first two comments in the comments section. (As an aside, the commenter uses "self" as the reference to "this", which is much better than my "that", which goes to show there's always someone doing it better than yourself)
Anyway, with that in mind, I've cloned your fiddle, wrapped your set in an object, and put the events into the object constructor. By doing this, the event can then refer to that.set and animate all objects in the set at the same time.
It's a small but fundamental concept that will aid you throughout any Raphael (or javascript) development you do.
This doesn't answer your question directly, but hopefully clarifies some of the issues you seem to be discovering. I can't really comment on the animation calls you've mentioned, but I do think that Raphael as a library is definitely worth persevering with.
N.
Does anyone know if I can hack google's visualization ColumnChart api chart somehow, to make a single column stand out with a different color, like so:
I know you can do it with ImageChart, so I don't need that (it fires no events and has no x/y labels).
Can I traverse the result with javascript somehow and change the CSS style, if it is truly rendered in SVG?
A really cheap hack (that works quite well) is the following:
In the Options for your Chart, do: isStacked(true);
Now pass data in two separate series: one that's zero everywhere except at your off-colored bar, and one that's zero only at the off-colored bar. The "stacked" bars yield just the effect your posted in your screenshot.
Well using jQuery I was able to get to my iframe for the graph. It's not pretty, but it works. It's also shorter than using prototype:
$('#google-chart iframe').contents().find("#chartArea g>g>rect")[2].attributes['5'].value = "#eea746";
In the code above attributes['5'] refers to the "fill" attribute of the rect object.
You can traverse the result if you want sure (it's generating inline svg fragments by the looks of it), just open your fave web debugging tool (opera dragonfly, firebug or webkit web inspector) to see what it looks like.
I'm guessing it might be simpler to just use the API to make one bar have a different color, but if you want to traverse the tree and assign some style to it that should work just fine. You can use standard DOM core methods for traversing the tree, just like in HTML, e.g firstChild, nextSibling, parentNode.