Read a csv from a server and turn it into a stacked flot chart
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

This is my start http://jsfiddle.net/9MT59/ , I'm not locked to the way I've started it, so don't feel you have to build upon this, but it gives an idea of what I'm after.

CSV format

name A, status1, string1, status2, string2, status3, string3, status4, string4,…

name B, status10, string10, status12, string12, status13, string13, status14, string14,…

eg

fred,0,fail,0,not attend,1,pass

john,1,attend,1,passed second attempt,0, fail due to no show, 0, failed due to snow

(note: I have control of the csv format generation, so that can be changed if your solution requires it, or you suggest a better format)

There can be up to 8760 status string pairs

Status will be either 0 or 1.

0 should be displayed as red, 1 as green (there should only be the 2 status labels, )

string can contain any number of characters

mouse over a bar chart will display a tooltip containing the 'string' (as seen on the flot charts here http://www.jqueryflottutorial.com/how-to-make-jquery-flot-stacked-chart.html)

At the end of each name on the chart, there should be a text display of status ratios. i.e. Fifteen 0's and two 1's, 15/2

Update: I would also consider other solutions such as html/css to make the graph if it is not possible with flot.

awarded to AjiTae

Crowdsource coding tasks.

1 Solution

Winning solution
Can you make the chart-row-result div not wrap (so it goes across the screen) so it is closer to the look of a "flot" produced graph?
elwood over 5 years ago
css: white-space:nowrap :)
http://plnkr.co/edit/wOiRzCOLPN4LxvwK03tR?p=preview
AjiTae over 5 years ago