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
Related
I have some date each has plus or minus value (for example assets or
liabilities)
So at first I integrated nested piechart by amchart
However it has some weak points, you can't get the defference of assets and liabilities at a glance
So next idea is to use like this,discussed here
However I cant find the good sample for amchart4.
Is there any good sample or close sample???
you can do something like this with d3pie chart(see attached image). This is the site: http://d3pie.org/website/examples/donut.html
Just set the stroke to 1 and the fill to white for example. The rest of the stuff I guess is some Math, and you should manipulate the DOM to change those.
The pie chart you want to do, beside looking cool, doesn't apply to this scenario/calculation, especially the percentages are misleading (total being the sum of absolute values of all numbers).
Pie chart is suitable for visualization of all items from the same category. For example, your spending for the month:
which includes Utilities, Transportation, Groceries, etc.
Would a ColumnSeries make more sense in this case?
demo: http://jsfiddle.net/davidliang2008/tna84zer/
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.
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.
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.