I'm searching for a Javascript library to create line charts like the ones of Google Analytics. When the mouse is over a point, a box shows you the data.
An example is at http://wikirank.com/en
No Flash or Air, only JS and client-side Canvas...
Better if Free...
Edit: If you want a free library, try Flot.
Emprise Charts is a commercial library that I've seen featured on news sites.
Another option is to use Google's visualization APIs.It's pretty easy to use, and they have a several options for displaying data. One thing to keep in mind is some of the visualizations require you to send your data to their server, though none of the canvas/svg ones have this requirement.
There's JS-Charts which looks pretty awesome.
Or, if you fancy rolling your own you can create your own charting component using this library...
As an alternative to Flot, if you are using Prototype.js as JS framework, you can use Flotr.
Dojo also has something similar, though the example shown doesn't have similar functionalities but can be implemented to behave like the one you want,
http://dojocampus.org/explorer/#Dojox_Charting_2D_Lines,%20Markers,%20No%20Axes,%20Purple%20Theme,%20Custom%20Min%20Max
Raphael.js is pretty good at making graphs with svg/vml, you have to write some custom code though, but you can make some really nice animation with it, next to that it's compatible with ie6+ (only not with android 2 browsers).
Related
Let's say that we have the following image:
I'm thinking of drawing this image with all the possible connections and then position some labels on their correspondent arrow... but this may not be the best approach, because the position of each label would be different depending on screen resolution. What do you think about this approach?
My question is: anyone knows any JavaScript library, jQuery plugin capable of drawing something like the image above? I mean, capable of doing multiple connections and that could be implemented with AngularJS ?
Here are some new details:
After I make some tests with JointJS, I think it is what I need, but...
the following link is an example of JointJS with a demo of connections/links between sources and targets that I would have on this project... The thing is: as you can see on this demo has alot of links and it's hard to interpret. Can anyone help me on how to make this look better? There's a better way of representing this? (on this example the link's are static but they would be done on a dynamically way).
You can check out below urls:
JSPlumb provides a means for a developer to visually connect elements on their web page
http://jsplumbtoolkit.com/demo/flowchart/jquery.html
http://jsplumbtoolkit.com/demo/home/jquery.html
Wirekit looks good for creating custom wired flows:
http://neyric.github.com/wireit/
JointJS is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
http://www.jointjs.com/
Here is a nice angular library
https://github.com/codecapers/AngularJS-FlowChart
and an example of it in action
https://dl.dropboxusercontent.com/u/16408368/WebUI_FlowChart/index.html
I am developing a backend that requires to have graphs with information associated in a javascript why. The idea is to reproduce something similar to Google Analytics/Webmaster Tools:
I also like to reproduce the "hover" caption when someone moves throw the days.
Does anybody knows if this is possible to do it with JavaScript? It's not allowed to use jQuery, so no "use jQuery" replies please.
Thank you in advance
There are loads of svg-based javascript libraries for drawing charts that support custom tooltips among other features.
My personal favourite is Highcharts which is a full-feautured stand-alone library.
The charting libraries of Dojo, ExtJS and YUI3 are also very good and support custom tooltips if you don't mind them being not standalone.
All of these libraries support at least IE7+, mobile devices and all other major browsers.
I suggest using them instead of making your own javascript code for charts. They are all amazingly customizable and unless you need a very special kind of charts these will work great for you.
Google Analytic's graphs are Flash, not JavaScript.
To draw graphs using JavaScript you can use SVG (Scalable Vector Graphics) and I suggest Raphael. Take a look at it.
I am looking for a Javascript chart component that can embed news headlines directly on the chart, similar to what is available with Google Finance
I know that this is possible in Flash with e.g. Google Chart Tools (http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html) or amCharts (http://amcharts.com/stock/events/), but I'd prefer to avoid using Flash, because of use with iPad and iPhone.
I have also been looking at Flot (http://code.google.com/p/flot/) and Humble (http://www.humblesoftware.com/finance/index), but since these are made using the canvas element, I don't think they work well enough in IE. I know they both use excanvas to make it possible to use them in IE, but they just don't perform well enough. I have been testing them in IE 6-9 on several computers and the results simply aren't good enough for me to confident in using them.
I have been quite impressed with Highcharts (http://www.highcharts.com/demo/?example=line-time-series&theme=default) and Raphael (http://g.raphaeljs.com/), but neither of those have implemented annotated news headlines by default, so it would require a lot of work to get it done. Do you have any other suggestions on how to do this without flash and without using canvas?
Also I would be happy to see demos, if anyone has implemented a similar solution.
Thank you for your time.
One of the examples for Raphael (the original graphics library, not the graphs extension linked to in the question) looks like it may be close to what you are looking for: http://raphaeljs.com/analytics.html
It's an old question, but if somebody still finds it - you can have this with JavaScript version of amCharts: http://www.amcharts.com/stock-chart/stock-events/
Disclaimer: I am the author of amCharts.
I'm looking for a JavaScript plugin which would help me to create charts. I would need stacked bar, bar, pie and line charts with drilldown and highlighting features.
Everything I found with these features are just flash and I would prefer using JavaScript.
Does someone have an idea or a suggestion?
Thank you by advance
-Yoann
You may want to look into the google charts api. It's not javascript per se, but it might be exactly what you need.
I have personally used the flot jQuery charting library and can recommend it. Very easy to use. You'll recognize flot from the reputation chart in your profile.
I've also used varioius pieces of Dojo's dojox charting stuff. These take a bit more effort to get going (especially if you're not already familar with dojo) but offer more options/flexibility.
You've probably seen amCharts when you found Flash charts with these features. Now there's amCharts JavaScript library with matching functionality.
I know there has been several discussions on JavaScript chart/graphics libraries, and there is many out there. What I need is one that can:
Zooming and panning
Data point manipulation (like when click on a data point, highlight other data points within the data series with the same certain parameter of the clicked one)
Dynamically change data point values (e.g.: dragging a data point dynamically updating the line shape)
Error bar support, horizontally and vertically
Select data points on the chart
Seems like Flot may have most of the features, if not all(not sure about 3, and 4), but would like to see if I don't miss out on there nice libraries.
Check out the awesome Visualization API on Google's AJAX APIs Playground
Take a look at http://raphaeljs.com/ library.
It has a plugin called gRaphaël which is charting plugin.
Look good but personally didn't use it.
Good luck and share you expirience if you try it.
The Dojo Charting Engine has a pretty astonishing featureset. Sadly dojo seems to suffer from a general lack of evangelism.
I dont know if there are good introductory tuts, maybe the best way is to learn from examples.