I am trying to make a few interactive graph visualisations in my Django web application using Python. I found Graphviz and was able to output a static graph (as a .png image) on my application using Pydot (Python interface to Graphviz's dot language).
However, I am looking to make my graphs more interactive, like being able to highlight nodes when passing my mouse over it, making the nodes click-able, dragging the nodes to a different location and zooming on the graph.
Is there a way I could do this in Graphviz? Or in general is there way to make an interactive graph for my Django application without having to use Flash? I don't want to use flash since I'm not that familiar with it and also since I want to visualise a fairly large dataset.
Try The Javascript Infovis Toolkit. It is all implemented in a browser canvas, so no Flash is needed, only a decent browser with support for the <canvas> tag. Graph visualization examples are here, here and here, other demos are here.
There is Canviz (source). However, nodes are not yet clickable (they were in an older version that used image maps. The code base has changed and now the rendering is happenning client side using javascript, which is why clickable links is not yet re enabled.
This is the best I found, however they are plenty of others.
mxGraph (Not free)
You can use D3.js for graph visualization (see here for examples of graph visualizations in D3js, and look at How to Make an Interactive Network Visualization).
For back-end (if it is necessary to have something more than just a json file to represent the graph - i.e. if it is large), then you can use a Python module for graphs, NetworkX.
Side note, here is my simple interactive graph visualization example:
You can do something like this very simply just with DOT and HTML.
Generate client-side maps and overlay them over your PNG images. (Insert the map code into the HTML page.)
dot test.dot -Tpng -o test.png -Tcmapx -o test.map
SVG exports are directly clickable.
It seems like an approach that fits what you are trying to do might be to use svg in the browser an/or javascript. I think most of the modern browsers support SVG and would allow you to do some pretty cool interactive graphs. The server could provide a json feed of the datapoints needed to render the graph. I don't know off hand the tools that are available, but I've seen some pretty cool graph demos constructed without flash through client-side approaches.
As an alternative, you could pre-render a bunch of graph images that the user would likely view and then just fetch those as the user interacts with the graph. This might work if the graphs don't change that frequently and if the number of alterations that the user would make is small, but you'd have to re-render every time the graph changes.
I've did what you are trying to do not too long ago. The context was visualizing a gnarly SalesForce schema.
First thing, graphviz is only good for plotting, not really for drawing. You can generate SVG, but I could not get it to work with I.E. after a considerable of (what turned out to be fruitless) effort.
I DID find this Java Applet ZGRViewer to suffice, and while applets feel a bit dated for my taste, it worked very well cross browser.
I basically hand coded a process invoking service that generated the dot files and ran them thought (dotty, is think?) - the visulazation applet reads the native dot file format.
I also came accross something that I thought about for a V2 (which never happened) - it is part of the AJAX control toolkit - Seadragon.
If you want to see the code in ASP.NET, I can post it.
Related
I have what seems like a simple task. I wrote a Windows application using C++. Now I need to add to it a capability to print forms -- nothing fancy, just plain text, with lines, tables, and simple graphics. Besides printing, a user needs to be able to preview on the screen all forms being printed.
Previously I was able to get away with this task by using an embedded Internet Explorer control and design all forms in HTML (which I like -- the HTML part.) But the problem comes with IE... hmm... I wish I had a nickel every time I heard that phrase :) Anyway, IE can print an HTML page but it does not provide any easy way for users of my software to customize page size, page margins, etc.
I spent a good deal of the last week trying to make IE Print Templates work with what I need ... but eventually failed. That stuff is very poorly documented and what I was able to do seems to randomly crash on me. So at this point I gave up on IE...
So my question to you -- is there a way to incorporate printing into my C++ program for the purposes like I described above?
If I remember correctly, printers have their own HDC, and you can draw on it. That'll work if have something simple. If you want to render HTML page using pure WinAPI, you're in big trouble.
I'd advise to abandon winapi and try GUI framework instead.
Qt 4(and 5, most likely) has text editor that can display rich text, layout engine for rich text, component that can display web pages. Read documentation a bit, and you will most likely find a way to render web page onto printer instead of screen. So far it looks like exactly what you would need.
Using Qt will add dependencies (20+ MB of DLLs for your project), but, IMO< it is a better idea than trying to use IE COM interfaces.
If you don't want to use Qt, you could try something like WebKIT, but I had some bad experiences with it, plus Qt might be just easier to use.
Additional info on printing: Printing with Qt.
Try searching for GDI, if you want to use win32 builtins.
Or use another toolkit like wxWidgets. Or consider writing to PDF with some library. Or let LaTeX do the heavy lifting - writing text files is easy. The LaTeX-way works as long as you don't want to modify your output depending on the layout (one Use-Case that doesn't work with LaTeX is the "balance" at the top/bottom of each page.)
Consider having your program generate XML files and using XSLT to render them into HTML.
By attaching stylesheets you will make it much easier to customize the presentation.
What possible web technology Google might have used for this Gideon Sundback doodle (see video)
http://www.youtube.com/watch?v=utijBRRmAJo&feature=relmfu
I am really curious. in a web browser, can we really do this much? I guess it is not flash, else i would not wonder. Any source code or similar samples available?
Guess it shows off how much we can extend in web technologies now.
A Canvas element <canvas> is used. All modern browsers supports HTML5 now - Firefox, chrome and Opera. Yes it is possible to do these with the browsers of today!
The zipper teeth are drawn onto the canvas from a png sprite file. The zipper slider also resides in that png image. The whole interactive animation is coded in the Javascript. The zipper peel effect is done using the arc() method of the context object, context being 2d in this case.
As soon as you click on the slider, it hides all the Dom elements - buttons and text input and all what you see is the canvas drawing. Since using the javascript code that is used, can't alone recreate the effect on the local html file. I think some external libraries are used. I am not sure how the google.listen() method works as its not defined. Check out the javascript here, in this thread, which is beautified javascript code, using the jsbeautifier.org
I have a django app and I would like to display some graphical data visualization to my users. I am looking for an easy-to-use package that would allow me to add graphs and widgets.
The kind of widget I want to build is a kind of speedometer dial that is red at one end and green at the other. As a user completes their job over the day, the graphic/widget adjusts itself. The dial moves from red to green.
I also want an S-curve graphic that shows the cumulative amount of work accomplished against planned. That is kind of an x/y line plot.
My question are: How easy is this to implement? Are there any add-ins libraries or packages that do this already? I am trying to keep my entire application open-source. I've seen a couple subscription services that do this type of thing, but I can't stomach the cost.
I don't mind using ajax or jquery to implement such a thing, but I would like the most elegant and maintainable solution.
Any advice or examples on how to tackle this project?
There are lots of good javascript libraries these days, but all require some effort to learn how to use. I have not found one that really is easy to use, I guess because everyone wants something different. My general experience has been the more effort you put into learning them, the more you get out.
Google has gauges: http://code.google.com/apis/chart/interactive/docs/gallery/gauge.html
Also
http://www.flotcharts.org/
http://philogb.github.com/jit/
http://www.highcharts.com/
http://www.jqplot.com/
Or really take control:
http://mbostock.github.com/protovis/
As first, see the following grid (https://www.djangopackages.com/grids/g/dashboard-applications/) on djangopackages.
Not sure if that's exactly what's asked for, but you might take a look at django-dash (https://pypi.python.org/pypi/django-dash).
It allows each user to make his own dashboard (from plugins available). Those dashboards can be made public.
Some screenshots (http://pythonhosted.org/django-dash/#screenshots).
It's modular and plugin based, so you need to make a plugin and widgets for every specific feature (in this particular case - the speedometer plugin and widgets for it). Each plugin/widget can include own JS/CSS when being rendered.
See the following chart usage examples:
D3.js integration examples (https://github.com/barseghyanartur/django-dash/tree/master/example/example/d3_samples).
Polychart2.js integration example (https://github.com/barseghyanartur/django-dash/blob/master/example/example/bar/).
protovis is no longer under active development, but they started a new poject: http://d3js.org/
You may choose from these packages:
https://www.djangopackages.com/search/?q=dash
I am doing some web data classification task and was thinking if I could get the co-ordinates of html elements as they would appear on a web-browser without taking into consideration any css or javascript being referred in the web page.
My language of programming is c++ and the need results for a couple million of pages, so it has to be fast. I know there is a Microsoft COM component which renders the page in a web browser control and then can be queried for position of different html tags. But this is not suitable in my case as it first renders the whole page which takes up a lot of time.
So as I found out, there are open-source layout engines WebKit, Gecko that can probably be used for this. But that's a huge piece of code and I need someone to direct me to the right classes or right modules to look into or any previous/similar work someone has done previously. Also, please let me know what you guys think is a good choice if I want to customize the existing code for use with multiple threads to make it faster.
Thanks
Generally, you would find that different page rendering engines do render the html in their own way and the results will differ.
The thing is that if you stick to any concrete browser engine, what you are to do is somehow bringing this engine into your project and using engine's interface to retrieve these coordinates. Kind of a tough task though, simply because you'll have to read a lot of documentation and crawl through thousands of files.
I think that right approach would be posting this task in some place, that is specific for the page rendering engine you've chosen. (gecko/webkit/...)
If you prefer sticking to something MS-specific, guess it's gonna be easier, but can't help you with something like class names or code chunks that you want to see. Probably somebody else could guide you in this case.
I want to display a map in a MFC application (Visual Studo 2008 with MFC Feature Pack).
Off the top of my head I have the following requirements:
I have to be able to add my own markers (plain lat/lon positions), preferrably with different colors/icons so one can distinguish between different types of markers.
If the map data is fetched from an online source, it has to be cache-able, i.e. I can pre-load maps for an area at a certain (or several) zoom-level(s) and then switch to "offline mode". Alternatively all map data is installed together with the application.
The standard operations like zoom in/out and pan should be possible for the user.
The user has to be able to select my markers, preferably by dragging a rectangle around them.
Since the whole app is written in C++/MFC I don't want to have to use the .NET runtime for this plugin.
It shouldn't cost a fortune.
I am currently using an ActiveX plugin called "ESRI MapObjects LT2" which can do all that in some way but it's very tedious to implement, the development seems to have stopped around the time when Visual Studio 6 was available and map material is either very basic or very expensive.
I thought about using Google Maps or Google Earth but I think they don't really support being used by non-web based applications.
I found ArcView to be some sort of successor of the plugin I use currently but I don't think I belong to the target audience since the functionality it offers is way more than what I need. Also I didn't find any information on pricing.
I have written an open-source Geocaching app ( it's in c++ ) that renders maps, the source is at:
http://code.google.com/p/gpsturbo/
It uses my own custom rendering but you could rip out the map parsing if you want. It renders map using google tiles ( and caches the tiles for offline use), as well as Garmin format GPS maps, there is also an Openstreetmap format renderer as well.
Reconsider google if you have internet access. You can make an instance of the IE browser appear in a frame within your application. I believe you can use an ActiveX control. Also Google Earth has a way to embed itself into a web page, and possibly an application as well.
Another option is Global Mapper which is not anywhere near as nice as Google Maps or Google Earth.
We used ESRI for a long time before abandoning it due to a lack of performance and lack of support. It was such a big pain to pay $10k for a license, and then be told they need $2k more so that we can actually use the thing. Oh, and then $2k more to add some extra functionality. Even when it didn't work, their support was dismal to lack-luster.
If you are not bound to Google Maps, you could choose OpenStreetMap.
There are couple of known applications for rendering OSM maps:
http://wiki.openstreetmap.org/wiki/Cobra
Kosmos
osmclient (on SourceForge)
First two render map directly, last one uses OpenStreetMap.org tiles.
You can cache as many tiles or data as you want, you are not restricted to do so.