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.
Related
I'm trying to find a way to dynamically scale a chart's y-axis so the values are shown in single digits, with a exponential denotation at the top, effectively changing this:
To this:
Note, this works automatically in e.g. Matlab/Matplotlib/etc., but I'm struggling to find a solution with the web plotting frameworks (maybe my search language is wrong)... I know D3.js is not a charting library, but I'd be open to a solution that works with the frontend DC.js or the backend D3.js
Edit based on #Gordon's answer below, I get the following graph using this
chart.yAxis().tickFormat(d3.format('.1e'));
Is it somehow possible to move all of the e+6 to the top? Or do I need to write a custom scaling function and insert a separate text box myself?
In dc.js, the axes are straight from d3-axis.
Access them using chart.xAxis() and chart.yAxis(), and to reduce confusion, do this in a separate statement from the rest of your chart initialization.
You can use axis.tickFormat to control how the tick text is formatted.
You can use d3.format to do automatic formatting. It seems like exponent or SI notation might suit what you're doing, although it's not exactly the same as having the exponent in a separate text element like in your screenshot.
Putting it together, this is pretty close
chart.yAxis().tickFormat(d3.format('.1e'))
The tick formatting question comes up a lot. I wonder where we could put this information so that people don't have to ask.
I would like to plot price data and include a size attribute to each point so each data point would be (time, price, size=100) for instance. The canvas should plot the price data as a line but when hovering the mouse over the plot, I would like to be able to see the size at that point. I've accomplished this using jfreecharts in Java but I'm looking for something in the javascript space like d3.js or similar that might be able to achieve this. Any recommendations on charting libraries to try?
d3 is great, and probably the most flexible out there, but can be complicated, depending on your level of javascript. I think the most popular and easy to use libraries are:
Chartjs,
Google charts and
ECharts
If you're a beginner, checkout something like Anychart playground
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 need to be able to visualize a special sort of diagram. In the past I always used Highcharts or Google charts for my data visualizations, but this time I cannot find any suitable chart in the mentioned libraries.
Actually the desired result should look like this:
So what I have is a cartesian coordinate system (with date axis), which contains several rectangles. Iam really looking forward to any recommendations on this.
If you want to stick with Highcharts, your best is probably going to be the renderer:
http://api.highcharts.com/highcharts#Renderer
You could also work this out using area series, but that could get a little messy after a while...
{{edit:
example using the area method:
http://jsfiddle.net/jlbriggs/8Xwuq/
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.