Re: Flip the source of column chart (make the legend to be x-axis)

121 views
Skip to first unread message

asgallant

unread,
Jul 23, 2012, 3:58:09 PM7/23/12
to google-visua...@googlegroups.com
Ok, so you want to pivot the data so that "Micheal", "Elisa", "Robert", etc become the data series and "[0:1]", "[1:2]", etc are the x-axis labels, correct?

You can do that manually, but it takes a bit of hackery to make it work.  You have to build a new data table and draw the chart separately from the rest of the Dashboard, from within a "ready" event handler attached to another chart or table.  See an example here: http://jsfiddle.net/asgallant/8FavC/ 

On Monday, July 23, 2012 11:35:11 AM UTC-4, Mattan wrote:

I've been digging on this for quite a while.

I have a dashboard with a column chart,data table, and two filters - all are binded together. The code for creating the dashboard:

 function drawMainDashboard(objectID,categoryPickerID,chartID,tableID,dataArray,CatagoryObj,GroupPickerID) {
var dashboard = new google.visualization.Dashboard(
    document.getElementById(objectID));


var table = new google.visualization.ChartWrapper({
  'chartType': 'Table',
  'containerId': tableID,
  'options': {'allowHtml': true,
  }
});


var stacked = new google.visualization.ChartWrapper({
  'chartType': 'ColumnChart',
  'containerId': chartID,
  'reverseCategories':true,
  'options': {
    'width': 700,
    'height': 700,
    'isStacked': true
  },
  'view': {'columns': [0,2,3,4,5,6,7,8]}
});
dashboard.bind([CatagoryObj,GroupPickerID], [stacked, table]);
dashboard.draw(dataArray);

}

The table is given to the function as a Parameter. Here is the declaration of the table:

var myArray =[
  ['hier','Group', '[0:1]', '[1:2]', '[2:3]','[3:4]','[4:5]','[5:6]','[6:7]'],
  ['Michael','aaa', 1,2,3,4,5,6,7],
  ['Elisa','bbb', 1,2,3,4,5,6,7],
  ['Robert','ccc',1,2,3,4,5,6,7],
  ['John','ddd', 1,2,3,4,5,6,7],
  ['Jessica','aaa', 1,2,3,4,5,6,7],
  ['Aaron','aaa', 1,2,3,4,5,6,7],
  ['Margareth','aaa',1,2,3,4,5,6,7],
  ['Miranda','aaa', 1,2,3,4,5,6,7]];
   var data = google.visualization.arrayToDataTable(myArray);

The thing is that I want to display the table as I declared it. However, I also want the column chart's x-axis to be taken as the first row of the table (except the first two columns), such that the series would be the first column (again, without the first cell, which is the title).

When I run the code, I get the opposite of what I want.

Yes, I know that I can rotate the 2d array to get what I want, but I lose functionality (for example, the group column will have to be eliminated, which is no good, since I have a categoryFilter based on that).

Is there a way to do so? I read the API in google Visualization, found nothing.

Thanks!


Mattan

unread,
Jul 23, 2012, 7:16:13 PM7/23/12
to google-visua...@googlegroups.com
Wow. Thanks for the help. This is exactly what I was looking for!
Reply all
Reply to author
Forward
0 new messages