Javascript charting API that support multiple grouped data - javascript

Can anyone recommend an API that will support multiple groupings in the data? What I mean by that is along the X axis I need to have a group, which contains a number of groups, which each contain a further number of groups which then contain 3 data items.
I have spent hours looking but at the moment I cant seem to find anything that can show this sort of data.
To try and further explain what it is I need to show in case it isnt very clear imagine I wanted to show County, for each County I want to show a number of schools and for each school two tests (Math, English) and then for each test at each school the male and female average test score.
So far I have only been able to find api's that support standard column charts with a single X axis label.
Thanks

My recommendation: keep it simple. The exact chart you're looking for probably doesn't exist because it's so specific. Pick something that comes close.
You can always do the grouping visually, by colour. I've found Google Charts API to be quite usable. If you use the dynamic JavaScript variant you can make charts with as many data points as you like, of any dimension.

Related

Minus and plus value for Pie Chart

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/

How can I visualize data based on number ranges?

I'm attempting to create a visualization of a .CSV file with 1.2 million lines, similar to the following:
source , destination
12.251.512 , 12.623.743
51.734.312 , 23.233.991
6334.6231.123 , 42.532.54453
(using 40-100k lines for testing purposes)
After much research, I've decided to try out Gephi and probably sigma.JS to implement the visual data into a website. (exporting .GEXF graphs from gephi into sigma.JS to use with web)
Since 1.2 million lines is very hard to visualize, my thought was to create an input box where a user can enter a single address or a range of numbers. Then take those numbers and create a mini-visualization based on that range.
So here is my problem, I have searched sigma.js for an example similar to what I need, with a box to enter ranges or individual values to create miniature graphs based on the larger dataset. But it seems like this may not be possible.
Ideally, I'd like to have a box that can search a range, and display the whole data-set graph if need be.
Is this possible using Gephi and sigmajs? If not, does anyone have any recommendations for tackling this type of project?
I highly recommend D3 library. I'd look at it https://d3js.org/
The biggest part of the job is to group your data in a way that makes sense and make sure that you feed it in JSON format. 1.2 million rows is not much of data as long as your growing makes sense. Also, I highly recommend adding filters in order for your audience to be able to slice and dice the data the way they want.

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

Phasor Diagrams (vector plots) in Javascript

I have phasor information (polar vector data pairs, each with magnitude and angle, representing voltage and current measurements) that I would like to display using Javascript. They should look something like the image linked below (my rep isn't high enough to directly post it) which I stole from Jesse's question about MatPlotLib. I would also like to easily change which phasors are displayed by a simple mechanic like clicking on the legend entry.
See a phasor diagram example here.
While I have inspected several code sets, I have yet to find a chart package that is built to handle polar vectors like this. Is my Google-fu lacking or do I need to create everything from scratch?
I feel like this is a cheap workaround, but here's what I ended up doing:
I used the polar chart from jqWidgets and with the series type set to "column" and the flip property switched to "true." I put the data in an array with 0 entries for each possible angle except for where I wanted the phasor displayed. Each phasor gets a dedicated series so the legend lists them all. It's not perfect and the array is much larger than it really should need to be, but it's passable.
While it's not surprising that no power system display package is publicly available for Javascript, I'm sure one has to be out there for educational sites if nothing else.

Shield UI Pie chart hierarchical functionality

I have a question regarding ShieldUI pie chart. What I need is to provide following functionality on a web page. Initially a pie chart will represent some data. When user clicks on a slice
I need that slice’s compound data to be broken down taking up the whole chart. Let’s give an example with sales volumes. Initially we have the sales volumes for all the four quarters of the year. Than the user clicks on the first quarter slice. And it divides into let’s say months, or weeks. All that data I need to take up the whole chart. In other words in need some sort of multi dimensional data zooming.
I searched for some sort of hierarchical pie charts, but what they do is to show all the data a once, which is not quite I really need.
Looking at what you need it might be not the chart itself, but the relation of multiple charts that provide the functionality you want.
You may take a look at this answer:
Linking graphs of two Shield UI Charts
The number of related and subordinate charts will be equal to the data depth you have. For instance if you have 3 levels- quarters, weeks and days, you will have 3 related chart. The users will first click on the quarter slice, than on the week.
You could even more fully match the functional behavior needed by using one container for rendering all the charts to. There is however one disadvantage that you will need a button or a link to provide users the possibility to return to the top level.

Categories

Resources