This is what I'm trying to accomplish:
In this example, I have a starting date (1º Jun 2011), an ending date (1º Jul 2012) and multiple events between this range.
Each event is related to one day of the calendar (although it is possible to have many events on a single day).
This data is fetched from a MySQL DB.
Any help or suggestion will be highly appreciated.
I recently had to do something similar. I ended up writing a d3 plugin that could handle this case among a few others. https://github.com/jiahuang/d3-timeline
I'm pretty new to D3 as well, but I hope it's useful.
You should be able to accomplish this with a time scale and an axis
Scott Murray has a really good set of tutorials that culminates in one for axes
Just think of your time line as a 1-dimensional scatterplot with a time scale.
I am going to develop similar visualization and found on Github timeknots component based on d3.js.
Related
I am new to D3 and am hoping to show a range of prices (lowest price, median price, highest price) for different services using a graph similar to what Glassdoor uses (see this example: http://bit.ly/1koKeLL).
It's a horizontal bar chart that has a variable margin on the right and left so that it graphically shows the low, median, and high data points. Does anyone know the best way to implement this, especially for someone just learning D3?
I think this guy implemented very well a chart that is more complex than your chart:
Bullet Chart in D3
However, if you want to get to know D3, and to use it in an intelligent and productive way, my strong advice is:
Don't take shortcuts.
This means that before you start implementing anything, you go through at least one good tutorial, and take at least brief look at D3 documentation.
A good tutorial is here. Go through ALL 20 lessons. Implement ALL examples on your local machine. You can do it in several days. And only then you come back to your example.
Don't be seduced by stories that you can find on the net like "I started with D3 yesterday, and now I create craziest visualizations". They are either lies or profound ignorance.
I see lots of JS examples of timelines, but I want to represent data that are continuous/cyclical. What I'd like to do is display 4 "seasons" on a circle, highlighting the part of the circle that the current date applies to, and likely having some interaction/mouseover capability to display more information.
I've attached a simple diagram. I'm a novice coder but have dealt with JS long enough where if I had a general template I could make it work for my purposes.
Does anyone know about a JS script that can support this or what the best way to implement this is? I'm guessing the circle would have to have the dates "mapped" on it, so the dynamic data would be dates, but the script would know what part of the circle corresponds to what date.
I've seen gauges that could do similar things like google gauge from their charts API, but that doesn't have enough flexibility.
Thanks very much!
You can start with a Javascript pie chart and work from there. d3js is probably your best option.
You can structure your data as follow:
Activity,Start,End
Basketball,Jan 1, Mar 31
Tennis, April 1, Aug 24
...
Then in the code, convert them to days and feed to Pie chart data to do percentage. Finally, create the label on arc and around pie chart.
Here's an example to start with:
http://vida.io/documents/gSvr8dAH23eirKQDp
I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.
I've been using the chart API to draw a cross sectional profile of a landmass, using a slightly modified version of the chart example shown here.
however, I now need to draw a line of sight between the two end points, as well as a Fresnel(1) zone between the two. can this be done through the interactive chart API? or is there a better way to get this done?
also, I would like to 'select' the first and last entries to display their elevation, however my code doesn't appear to do anything:
Chart.setSelection([{row:0,column:null},{row:Results.length - 1, column:null}]);
After finding some other problems with the visualization API, I just gave up and did the whole thing using Raphael instead, works way better :D
EDIT: didn't know you couldn't answer your own posts within two days :| kinda of annoying since I've spent like a week straight trying to fandangle the bleeding chart -.-
Does anybody know of a Javascript chart API that will handle scaling and labeling for date values on both axes? It looks like I'll have to do manual client-side calculations for labels if I want to use Google Chart API.
My data set is potentially sparse in the dates on either axis, so intelligent labeling calculations would save me a bunch of hassle. Thanks in advance!
You may wish to look into flot for a JavaScript chart API. (I do not know if it will handle your specific labeling issue.)
Take a look at Google Chart API. I've never used it but I've seen people use it. According to the examples in the docs, you can put date labels on the axes.