stacked column chart multiple series

1,095 views
Skip to first unread message

Brian Quirion

unread,
May 24, 2013, 2:44:41 PM5/24/13
to google-visua...@googlegroups.com
Trying to describe this if ... interesting.
But basically i want to compare say 4 teams.
I want to compare them by total and by say 3 other criteria. And do this over time. To me this is visualized by stacked column chart with multiple series.

But it requires two layers of labeling on the x axis.

For example say i want to comparse teams w, x, y, z.
Their total number of jobs done as well as by the types of jobs.
Lets say we have types of jobs a, b, c

During week 1 team w completed 3 a jobs, 2 b jobs and 4 c jobs
team x completedl 1 a job. 0 b jobs and 4 c jobs

etc.

team w completed 9 jobs
team x completed 5 jobs

That by itself is a multiple series column chart with fake dates
But i also want to break that 9 and 5 down into the types of jobs
a stacked column. So that you can see that of the 9 for team w at time 1 3 were a jobs 2 were b and 4 were c while
for team x at time  1 there was 1 a job, 0 b jobs and 4 c jobs.

x axis is time AND also the different teams.
y axis is # of jobs

There any way to do this? Or perhaps im simply going about it the wrong way.
The idea is to compare, weekly, the total jobs completed by different teams as well as the different types of jobs.

Brian Quirion

unread,
May 24, 2013, 3:25:11 PM5/24/13
to google-visua...@googlegroups.com
So im trying the following:

function drawVisualization({
    var data new google.visualization.DataTable();
    data.addColumn('string''Group');
    data.addColumn('number''Checkin');
    data.addColumn('number''NoCheckin');
    data.addColumn('number''Scrub');
    data.addRow(["NB"3, 3, 5]);
    data.addRow(["RTP", 1, 43]);
    data.addRow(["SVL", 2, 6, 7]);
    data.addRow([nullnullnullnull]);
    data.addRow(["NB"43null]);
    data.addRow(["RTP"nullnull, 3]);
     data.addRow(["SVL", 3, 2, 4]);
  data.addRow([nullnullnullnull]);
    data.addRow(["NB"44null]);
    data.addRow(["RTP"nullnull4]);
    data.addRow(["SVL", 2, 2, 1]);
  data.addRow([nullnullnullnull]);
    data.addRow(["NB"27null]);
    data.addRow(["RTP"nullnull4]);
    data.addRow(["SVL", 4, 2, 8]);
  data.addRow([nullnullnullnull]);
    data.addRow(["NB"52null]);
    data.addRow(["RTP"nullnull3]);
    data.addRow(["SVL", 2, 3, 4]);
    var chart new google.visualization.ColumnChart(document.getElementById('visualization'));
    chart.draw(data{
        title:"Total completed, grouped by gender"
        width:600height:400,
        isStackedtrue,
        vAxis{
            title"Number of Jobs"
        }
    });

This works but i need one more set of labels on the hAxis to indice what the cluster is.
(im using dates)

asgallant

unread,
May 24, 2013, 3:35:55 PM5/24/13
to google-visua...@googlegroups.com
You can do this to an extent, and it would look something like this: http://jsfiddle.net/asgallant/Sgsuc/.  I think there is probably a better way to display this type of data that is less visually cramped - I'll ponder this and see what I can come up with.

Brian Quirion

unread,
May 24, 2013, 3:46:48 PM5/24/13
to google-visua...@googlegroups.com
        width:800height:600,
        isStackedtrue,
      bar: {
        groupWidth: "90%",
      },
      hAxis: {
        title: "Location",

      },
        vAxis{
            title"Number of Jobs"
        }
    });
}


gets me just about everytyhing I think except being able to label the cluster(accidentally replied to author rather than group)
Each set of 3 (the cluster) in this case represents a week(or a month) and being able to label that cluster would help.

On Friday, May 24, 2013 11:44:41 AM UTC-7, Brian Quirion wrote:

asgallant

unread,
May 24, 2013, 5:22:30 PM5/24/13
to google-visua...@googlegroups.com
You have to do something like what I did in my example - include the week in the labels.  You can't cluster the labels together and give the cluster itself a label, if that's what you are looking for.

Brian Quirion

unread,
May 24, 2013, 5:24:33 PM5/24/13
to google-visua...@googlegroups.com
Is there any way to put html in a label? some way to format the label in any way?



--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/EtbTbGA4EIk/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

asgallant

unread,
May 24, 2013, 5:29:47 PM5/24/13
to google-visua...@googlegroups.com
You can't use HTML in the labels.  Label formatting is accomplished via the hAxis.textStyle option.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages