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.
Related
I want to implement a chart with jquery with the features as in yahoo finance . Please help me in finding a good plugin without any performance issues.
use this one it good performed charts
it has mobile support and it is well known chart plugin
it uses jquery
http://chartjs.devexpress.com/Demo
Enjoy :)
I have to integrate a Gantt Chart like tool in a room booking solution using jQuery. The Gantt should be very interactive one rather than simply displaying data. It should respond to drag & drop, it should have a tree view on the left side to group the tasks, and it should have the zoom feature to zoom in and out of the timeline. I did a lot of research but all those available currently on the web is lacking atleast any one of the mentioned features.
Could anyone tell me if there is anything like this using jQuery?
I know this may sound crazy to have these many features in a single thing. So a subset of the mentioned features would also be very helpful.
Thank you
I developed this one: http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/
is a complete editor based on jQuery.
New release available: http://roberto.open-lab.com/2014/05/15/jquery-gantt-editor-collapsible-branches
I have been using this one on http://taitems.github.com/jQuery.Gantt/ - its not 100% perfect yet but for my needs which are basic presentation of time tracking - it works very well.
Take a look at dhtmlxGantt, it supports all mentioned features:
interactive Gantt chart - respond to drag-and-drop
a tree view at the left
zoom feature (customizable timescale)
easy integration with jQuery
It's free under GPL.
(Disclaimer: I work for DHTMLX)
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 have to make some charts on a "mobile" website, what is the best framework to do this?
I see Google Charts API, JQuery Visualize, Raphael and JS Charts... but i don't know who is the best one in Safari Mobile.
Thanks in advance to your response.
Google Charts, being rendered as images, are light-weight, require no special libraries or plug-ins and can be viewed on almost anything. They aren't dynamic in the sense that you can't animate them, but for most applications they do a fine job.
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).