Summary
I wonder if anyone else has had this requirement and could steer me in the right direction. I am currently working on getting a chart library implemented for a crosstab BI that allows multiple groupings on the X axis.
Example
The functionality I'm trying to achieve works¹ in Spotfire as shown here (dev data, not live!):
With the colours representing the columns from the crosstab:
¹ - the rendering of the labels is a bit funky, but the grouping works
Requirement
I am looking to replicate this in (at minimum) JavaScript, preferably with a premade React library if possible. I'm currently looking at d3 and in particular Nivo, as this has a nice aesthetic that has appealed to the team, but this appears to be limited to grouping only on 2 levels (for the example above, I could group by Country, but I am then unable to group by gender as a sub-group).
What I've tried
My solution so far is to merge the remaining layers, so for example in the France group we'd have Male - Not Tested, Male - Mutant, Male - Wild Type, etc. The problem this presents is that I need to allow up to 6 levels of grouping - the example shows 3 levels. (6 levels is rare, but I need to allow it as a requirement)
Plan
My next steps if I can't find a library to do it, is to branch off Nivo and try to modify it to implement it myself, but of course as we all know, this conflicts with the time we have to implement this. I would really appreciate hearing from someone that has had to deal with this before, and what solutions you came up with.
I think you need to checkout AmCharts, it offers one of the best charts libraries with a very rich API that allows you to perform several combination
here's an example for nested Value Axis but you can also generate similar thing for XAxis
https://www.amcharts.com/demos/multiple-value-axes/
Related
I have to implement some graphs in a project I am building. I am currently studying what graph solutions I have, as I do not plan to code the graphs from scratch.
I ran into GraphJS and it seems to have everything I need. I should mention that the graphs are not complex in data they hadnel, but in the way they looks. Therefore we reach the question: can the tooltips of the axis be customised? I have to implement something like this
Better said, I need every second day in a 30 days span to not be displayed, but in its place to be shown a grey line. It is possible to achieve something like this with ChartJS?
I have read the documentation, I have not wrote any code as I am looking to find the proper library to use. On the same note, I do not seek an answer from someone providing me code, merely a "yes" or a "no".
I'm building a modeling tool that contains 2 sets of sliders -- one set that changes the amount per month payment (at top), and one set that shows user the date their debt is paid off (bottom), effectively so that changes to one can be seen in the other:
modeling tool http://doufeel.com/model.png
I was able to use jQuery UI slider to generate the payment data that creates the line graph at the bottom (using D3) but now I realize that I will probably need to create both sets of sliders in svg using either D3 or Raphael to make this work smoothly. I'm hoping to find someone who has addressed this, perhaps created something similar and might be able to advise on the best approach. Thanks in advance!
Need to support older browsers? Use Raphael. If not then D3.
I've got some homework tasks in topic surveys and diagrams. The first task is to normalize the input of a survey, because the structure of the data is changing from time-to-time.
So there are three types of surveys:
static fields, where text is stored
dynamic ones, where the user can select one option
and multiselect fields, where the user can select multiple options
So I'm not really a statistics guy, so I have really no idea what I can do with that incomming data.
So the data I have is stored in an huge XML file from there I can easily get how man times a survey was filled, and how many times a field was filled, so I can (for eg on a pie chart show the relation of filled or not filled).
The second idea is to show the relation between the content of a multi option element using a bar chart or so.
In case of the multi option elements I've got the idea to show data in implication of one option.
But the question is, what could be shown?
The other problem are the static elements (text fields and so). What data could be represented from a single field?
The data in the XML field is collected from 2001 to 2005 So maybe I can work with the dates of the surveys, but as I said, I don't really know how to process the data, to collect as much as possible, to create a really great amount of diagrams.
After normalizing your data (which could be more difficult than the visualizing part of your job), you might do the followings:
To show your static fields, which contains texts, you could recode theese text to new variables containing fewer categories, which could fit on a graph/plot. Another way is to make word clouds of the texts - like on wordle.net.
The dynamic fields, each containing only one answere, could be the easiest to display. You could make a pie chart to show the percentages of the attributes, or rather a bar chart which could also display percentages/densities or frequencies (e.g. see the ggplot2 package in R).
To display the multiselect fields, you should restructure the date to the appropriate format (I do not know how it looks like now). This could be done by different tables, that show the counts (frequencies) for every categories in all variables. E.g.: 187 people ate choclate, 160 ate bread and 50 people ate pizza yesterday. You could then show the values by a barchart easily. Look out for: the sum of theese vaules will not equal to the sample size, as anyone could select multiple values, so a pie chart would be a really bad choice.
I hope I could help.
I would not recommend pie charts. Use bar charts or dot plots instead. It is much easier to distinguish similar frequencies for different categories in them. Ordering the categories by frequencies in them is almost always a good idea, too. Here you can find a short article about why Pie Charts Are Bad.
3D diagrams might look nice and are a neat way of impressing people with little knowledge about data visialization (which might be what you need ;-) ). But they are considered bad practice by most experts, because using extra dimensions, which are not absolutely needed, distracts the reader from the actual data.
Personally I think that crosstables and scatter plots are pretty self-explanatory ways of displaying relationships between two dimensions of data.
It is often a good idea to report some basic statistics along with diagrams, but make sure you only do this when it's appropriate. See this Wikipedia article if you want to learn, which univariate statistics (like a mean for example) are appropriate for which data.
If you seriously want to learn about data visualization, I can highly recommend the books by Edward Tufte about the topic. They are really a pleasure to read. While they stand on a solid scientific base, they are easy to understand, even with little or no background in the field.
Good luck,
Alex
Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?
The array is multidimensional, with three elements in each part - and the elements are determined by a HTML form.
So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i'd appreciate some help!
Thanks
Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I've used Flot (haven't tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you'll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.
You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that's not as easy or consistent across browsers as drawing charts with the canvas.
If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.
My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.
EDIT:
Another library I forgot to mention is PlotKit which extends MochiKit. I haven't used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I'm not sure how crossbrowser an SVG based solution would be (particularly in IE).
EDIT:
Here is a jQuery plugin which charts using div elements. I personally don't like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.
According to the documentation, both Flot and MilkChart only work in IE if the excanvas extension is installed.
For greater portability, I suggest checking out the Google Visualization API which is incredibly simple to use and has many different display possibilities. Visualizations are rendered as either flash elements (interactive) or as plain images (static).
As a keen windsurfer, I'm interested in how windy the next few weeks are going to be. To that end, I've been writing a little app to scrape a popular weather site (personal use only - not relaying the information or anything) and collate the data into a single graph so that I can easily see when's going to be worth heading out.
I have the back end working but need a way to display the data. My scraper currently gives me two series of data which tell me how strong the general wind is and how strong it's likely to gust to. What I'd like to do next is display those two data sets as a pair of lines in a graph and shade the region between them.
I was considering using something like the flot library to display the data. The only problem is that I can't see a way to shade an area between two lines?
If anyone has suggestions of how to do this in flot or other libraries or graphing techniques (I have DJango on my server so anything pythonic or javascripty should be fine), I'd be interested to hear them. Ideally this will be a javascript solution to avoid having to serve up images.
Take a look at the Google chart API's. They make this sort of thing pretty easy. Without some example code, I would have a hard time giving you an example, but Google has nice one on the docs.
You should check out Dojo. It looks like it'd be pretty easy for you to do, just plot the bottom line with the same fill color as the background. That should get you the effect you're going for.
http://dojocampus.org/explorer/#Dojox_Charting_2D
I'd use open flash chart, you just have to create a JSON with the data and then you've to all the flashy coolness in your page....
http://teethgrinder.co.uk/open-flash-chart-2/