JavaScript / JSF2 data (rectangle) visualization in a cartesian coordinate system - javascript

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/

Related

Scale y-tick labels in DC.js chart (D3.js underneath)

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.

Javascript chart library where you can attach extra data to each point

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

Population pyramid in dc.js

I'd like to implement a population pyramid in dc.js.
The goal is to benefit from all advantages of dc.js in terms of integration of d3 & crossfilter (i.e. my population pyramid would interact with all the other dimensions of my viz. I have already seen pretty good examples in d3 (for instance here: Creating Population Pyramid with D3.js ) put I am looking for a solution within dc.js.
My dataset has columns for each age & sex group.
I was initially thinking of using a "one bar rowchart" for each of those groups, use exactly the same axis scale and bring them together in what could look like a population pyramid.
Though this approach seems like not the right one as I will not be able to have a "one bar row chart" (i.e. I will always get at least 2 bars in my rowchart.
Any hints, ideas, suggestions or examples would be really appreciated.
Thanks!
It might be easier to "simply" write a new graph type to dc. If you install dc.js from git and install grunt, you will be able to add a new pyramid graph in the src source file and get it into your dc.js
It's less scary that it sounds, have a look at existing graphs (rowchart or barchart are probably the closest to start for your own need).
Good luck and probably a good idea to join the dc mailing list, you might want to discuss the idea and get help if you get stuck somewhere

Javascript library or framework for drawing charts on client side

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.

Is there a Javascript chart API with date object (labeling) support?

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.

Categories

Resources