jquery creating stacked bar chart with flot?

3
votes

I'm using jquery flot and I'm trying to create a stacked bar chart, but I'm having some syntax issues... I'll post my code at the end of this, but I'm quite certain it's wrong. I do get a stacked bar chart, but there's only three columns...

Basically, here is the data that I'm working with and what I want to accomplish... The first group (Focus Group 1) on each line is the bottom bar of the stacked bar, the second group (Focus Group 2) is the second, and the third group (Focus Group 3) is the top group. The "Responses" are what I want to use on the x-axis, the first number in each set is x, and the second number is y.

Response1, [0, 0], [0,0], [0,9]
Response2, [1, 5], [1,5], [1,11]
Response3, [2, 2], [2,0], [2,8]
Response4, [3, 1], [3,2], [3,6]
Response5, [4, 0], [4,0], [4,7]

I should also mention, that I'm not sure if a stacked chart is the best way to go... Admittedly, I'm not a very visual person, and generally find charts annoying... If there's a better way to present this data, then I am so totally open to suggestions...

Essentially...

I have a series of questions. Each of these questions were presented to three focus groups. Members of the focus groups selected a response. I'm trying to present the count per response, per focus group, for each question. I thought that a stacked chart would be the best way to go, but again, I'm open to other ways of doing this. The only thing is, I definitely need a visual representation of the data....

Code in use:

$(function () {
    var cssid = "#placeholder";
    var data = [ [ [1, 0], [2,0], [3, 2] ], [ [1, 0], [2,0], [3, 6] ], [ [1, 0], [2,0], [3, 8] ], [ [1, 0], [2,0], [3, 5] ], [ [1, 0], [2,0], [3, 5] ], ];
    var options = { series: { stack: 0, lines: { show: false, steps: false }, bars: { show: true, barWidth: 0.5 },},};
    $.plot($(cssid), data, options);
});
3
jquerychartsflot

3 Answers

1
votes

You did not enter your data correctly. It should be as follows:

$(function () {
    var css_id = "#placeholder";
    var data = [[[0,0], [1,5], [2,2], [3,1], [4,0]],
                [[0,0], [1,5], [2,0], [3,2], [4,0]],
                [[0,9], [1,11], [2,8], [3,6], [4,7]],];
    var options = {series: {stack: 0,
                            bars: { show: true, barWidth: 0.5 },},
                   xaxis: {ticks: [[0, 'Resp1'], [1, 'Resp2'], [2, 'Resp3'], [3, 'Resp4'], [4, 'Resp5']]},
                  };

    $.plot($(css_id), data, options);
});
0
votes

http://www.saltycrane.com/blog/2010/03/jquery-flot-stacked-bar-chart-example/ contains example code for a stacked bar chart:

$(function () {
var css_id = "#placeholder";
var data = [[[1,10], [2,20], [3,30], [4,40],],
            [[1,30], [2,30], [3,30], [4,30],],
            [[1,40], [2,30], [3,20], [4,10],],];
var options = {series: {stack: 0,
                        lines: { show: false, steps: false },
                        bars: { show: true, barWidth: 0.9 },},};

$.plot($(css_id), data, options);
});

Is this example not working for you?

0
votes

You just have to attach labels to the data ... about like this:

graph = $.plot($('div#some_graph'),
[
   {label: 'Work', data: rsp.work},
   {label: 'Travel', data: rsp.travel}
],
{
series: {
 ...