Goal:
Visualize data that Y is amount of quantity and for the X is the date.
Problem:
Do you have a recommended data visualization tool for jquery?
The request is to enable to click on the colored block and you will retrieve a tooltip or something about amount of .....
and a list that should be displayed below the graph.
Do you know any data visualization that you can recommend me?
A concrete example that fit to the criteria is the Stackoverflow's graph.
Thanks!
Try Highcharts. If you are looking for simple to use, this is probably your best bet. If you are looking for more customization, I recommend you take a look at d3.
Related
I have some metrics to display, I need a simple barchart to show values for every day in month, and it doesn't need to have any labels or legend, when you hover the day, the data is displayed. I found this http://codepen.io/deegill/pen/macik which is something that I need but it cost 90$ smallest package. Does anyone have chart like this which I can use in my project?
A set of reusable charts using D3
http://nvd3.org/examples/line.html
If you want to make any chart I'd look at using D3. It's a pretty smart js framework that allows you to display data in a lot of different ways. Here is an example of it displaying a bar chart. And here is another example that uses time as the x value.
Google Charts API
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart
g.Raphael.js
http://g.raphaeljs.com/
Highcharts.js (Free for non-commercial use)
http://www.highcharts.com/
I've been using Flot for a few years now, and I have no complaints. Might take a little effort to get started, but we use it commercially, and it's great (and free).
I'm currently working on building a charting web application, and I've chosen dygraphs for my time series data (Two weeks of data at an hourly level, if anyone finds this information relevant). On the same page, I also have a couple of customized d3.js charts that pull metrics from the same database as the trendline.
I want to know if I will be able to link the selection on my dygraph line (Supposing I zoom in on 3 hours worth of data, i.e., 3 rows) - to my d3 charts, so that the data in the d3 charts also get filtered down to the date range chosen by zooming in?
I'm quite the amateur here, and apologize if my question seems vague, but any sense of direction would be helpful.
I'm guessing I should be able to do this by modifying some class in the dygraphs source code, or reference the same from my d3 chart.
Thanks.
You shouldn't have any trouble doing this. There's no need to modify the dygraphs source. You can implement handlers on the dygraph object (zoomHandler or drawCallback, most likely) which update the D3 chart.
See this demo for an example of synchronization between multiple dygraphs.
I have some code which generates an array; at each index there is an array with an x and y coordinate. I wanted to plot the points as a graph using d3.js, but am not sure how to go about that.
I have looked at the site and the examples but have found nothing that would help me with this task. This link here is an example of the type of graph I am trying to create, except I want to be able to create multiple graphs on one grid.
I basically need some guidance on how to get started, because I am completely lost. Any help would be appreciated.
This might better be a comment but I don't have comment access. First of all what is the name of the type of graph you link to in your question? It's not your basic pie or bar graph.
If you want multiple sets of data on one graph, what type of graph do you want? I can't visualize what you are trying to do so I don't know how best to help. Here is a good list of tutorials that link out to examples of how to use D3.
I am evaluating to change the graphics I generated so far using highcharts.js to d3.js
just for fun and I want to learn how d3.js works.
I wonder if there is something similar to the url below (see if you click on a pie it gives you new data), something dynamic and ready to use (or not to implement from zero).
What I wanna achieve, more or less...
http://lully.snv.jussieu.fr/gbif/mapping/graphs/examples/pie-legend.htm
thanks in advance
Pere
If you want to replace Highcharts, I think the only good open-source alternative available at the moment is Bob Monteverde's Novus charts library: http://novus.github.com/nvd3/. NVD3 has a nice pie chart and also has good legends. Take a look at all the charts from this library and you will see what I mean. You can also find a good pie chart in Stephen Boak's tutorial: http://blog.stephenboak.com/2011/08/07/easy-as-a-pie.html. Another interesting option is to look for Frank Guerino's questions on the D3 js google group. I would use NVD3 if I were you. It might need some adjustments, but it seems to be the best option currently. Good luck!
Simple function to generate Pie Charts utilisiing d3.js. This function is part of the http://xhprof.io/ project. It is able to handle datasets of arbitrary size. It has several options that allow for customisation, such as the label margin, circle radius and visibility of the percentage data (refer to the source code).
The demo is available at https://dev.anuary.com/858b33b7-bd66-507b-a9f1-533e4de79ba3/. The source code is available at https://github.com/gajus/pie-chart.
I need a library or a framework plugin that can draw charts that can be modified real-time by resizing part of the chart itself. Is there such thing?
I plan to use it for adjusting the chart values. Mostly for controlling amount allocation.
For example. You have 4 hours and you have 5 distinct types of tasks. I want the user to be able to allocate time for each task and see visually what's the impact on the available time.
I think Visually Editable Charts of Fusion Charts is what you are looking for.
We use various charts from http://code.google.com/apis/chart/ for our web app, and it works great.
The chart are loaded once, and refreshed, each time the user change a value, with new data through their Javascript API in real-time.
gRaphael should be the most popular:
http://g.raphaeljs.com/
I can recommend HighCharts:
http://www.highcharts.com/
Found a few options: http://jamesalvarez.co.uk/uncategorized/draggable-piechart-js-class and http://www.shodor.org/interactivate/activities/PieChart/.
The first one looks the most promising.