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.
Related
I am new to the world of SVG and D3, learning as I implement. Facing an issue with one of the websites that I am currently working on.
Requirement:
We want to create a custom graph (similar to bar graph) that has a set of bars that represent my data points and certain icons are embedded into these bars based on the type of bar graph data. The graph is representing a person's achievements throughout their career. On hover of the bar we show a custom popup that has a brief description of the bar (see below for an example). Some bars have an additional arrow that represents whether the bar is representing an experience that the user is currently pursuing.
Progress so far:
As you can see my profile under TIMELINE section.
So, whats wrong?
Everything works fine (as you can see from the screenshots) on Chrome. All other browsers render the graph without the icons. You can view my profile on Chrome and Firefox.
I copied d3 generated SVG HTML code and pasted it in jsfiddle to test it out on all browsers and found that all browsers are rendering it: (ignore the colors, I have not applied CSS to it, but the icons show up) http://jsfiddle.net/EbpPG/1/
See JS fiddle link
Check my profile to see the graph. The logic to generate the graph can be found in chart.js file, createTimelineChart() function.
Can someone have a look at it and let me know what's the mistake I am making?
The problem is obviously how you dynamically generate the SVG. The path element is generated in the wrong namespace. This typically happens when you're using something like jQuery's append with a string:
$('svg').append('<path d="m0,0 h100"/>')
This will generate an HTML-namespaced path element, which does not exist. (Interestingly, Chromium is not even showing it in the developer tools.)
Firebug is good at showing you problems of this kind. In the HTML panel, the wrongly namespaced elements are shown in a lighter color. Right-clicking on them in the HTML panel gives you the option to examine in the DOM panel, and there you can see what the namespaceURI property is.
So, use either plain DOM manipulation methods or, if you're already using d3 anyway,
d3.select('svg').append('svg:path').attr('d','m0,0 h100')
Check out with Firefox DOM Inspector and you'll see that the path element that forms the icon is in the HTML namespace rather than the SVG namespace which would be required for it to appear.
Are you passing this data though decodeHTMLEntities, that might be recreating the element in the wrong namespace, you'll need to step though with a debugger to see when it goes wrong.
If you save the d3 generated page then when it's reread by any UA it will pick the right namespace which is why the jsfiddle works.
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
Here is my requirement:
I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.
Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.
What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.
Here are the ones I've looked at:
Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.
jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.
D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.
I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.
I ended up using Arbor with Raphael as my rendering library and it's worked out very well.
Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.
I was wondering if there is a way of defining custom images as data-point.
For a LineGraph there is a pointSize property which sets the size of data points. (Not surprisingly).
This property can also be overridden with the series property in which you can also define a custom color.
Nonetheless, I can't see anything that would allow custom markers.
To make my question absolutely clear:
This is what I am going for: Image with an example
Two ideal solutions
Setting a property to a datapoint with class name and defining a picture for this class name in css. (to me it seems impossible since these are SVG graphics)
Adding an extra column with data-marker image source.
Although these seem perfect in theory I have no idea how to go about implementing them.
A less perfect solution could be extracting point position from SVG and using JavaScript to dynamically position divs with images (this seems very unelegant and prone to bugs)
Alternatively please recommend a js charting library that would be free and had support for such functionality.
Edit:
In the meantime I found a very good and quite inexpensive (60$ per website license) library that covers this functionality : Highcharts library But the original question is still open.
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.