I am planning on making an analytics dashboard and would like to implement circular charts like the image attached to this question:
and I would like to do it using jQuery. Do you guys have any usefull links to resources or to other SO questions? Would be awesome!
Thanks!
You can also take a look at :
http://bernii.github.com/gauge.js/
http://www.justgage.com/
Both of them look really good and seems pretty easy to use.
The easiest way would probably be to create an SVG that mimics the appearance you want, and then use JavaScript/jQuery to modify the source of the SVG. The design you're requesting could probably be acheived by simply placing two arcs on top of one another.
Deriving from this excellent answer on calculating arcs, creating two overlapping ones could look something like this, which also demonstrates updating the arc dynamically.
lethargicpanda's suggestions are cool. Check out jQuery Knob too. It also allows user input.
Related
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
How would you do to create a chart like this, interactive (i.e. with links and tooltips), in an HTML page?
From what I know about SVG I think it's the right direction to take (no Flash anyway), but I'd like to know what would be the path you'd take first in order to have an interactive chart looking like this on a web page.
I'm not asking for the details but just where to begin to look. I know JavaScript quite well, but I have never dealt with any SVG libraries.
checkout d3.js examples, this example looks very close to your pic.
I offer to use Raphael library (http://raphaeljs.com/) and if you like to make more complex or using 3d objects you can use webgl with treejs library (http://threejs.org/) .. you can find example and demo for charts or other documents in websites..
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 currently have this set up: http://sandbox.brightboxstudios.com/orgmap/
They are draggable and I am trying to find a way to have lines connect them, even when they are dragged. Having an easy way to show how each is related and which should be connected is ideal!
Thanks!!!
You should consider using the D3.js library. In particular this example is what I think you are looking for: http://mbostock.github.com/d3/ex/force.html
Take a look at this: jQuery - use canvas to draw lines between divs
I'd start with that code, and just re-draw the lines every time the divs change location.
You may try KineticJS too. I think that it will provide what you want easily. http://www.kineticjs.com/
Here you can find lots of tutorials: http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/
You can also try jsPlumb, a JavaScript library that can connects divs together. It's really simple to use and there are plenty of demos on that page.
I'm trying to create line graphs like the one in the image below.
It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don't need pie charts or anything like that, just line graphs like above.
I'm just not sure how to go about it best, I don't know canvas, and i'm assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.
I'm wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?
All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i'm just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.
Thanks so much.
ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i'm not going to have so many of them that I need a huge jquery plugin, just something small.
Also: I'm trying to make it so it's responsive, and shrinks to fit a phones screen.
SVG sounds just like what you are looking for. You can use a library such as JQuery SVG or Raphael (based on Prototype.js) to make it easier.
Google Chart API is very solid and easy to use. Here is an example of a simple Line Chart
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
You can also Interact with the charts you create:
https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity
https://google-developers.appspot.com/chart/interactive/docs/events
I don't know how lightweight you could possibly get to do what you want, for that kind of thing I would normally use flot.
If you are not planning any manipulation on the graphs. Use a PHP library called pChart
Check out Google Charts. It looks like the perfect thing. It doesn't use flash, so it's smaller than some, and it has tooltips. As a bonus, you can use live data on the web.