3

I've built a google chart stacked column chart. I am able to annotate each stacked item. When it comes to styling each column item, only the last stacked item is effected.

working code for the last stacked item:

// Create the data table.
var data = google.visualization.arrayToDataTable([
    ['Genre', '', "Label", { role: 'annotation', role:'style' } ],
    ['column1', 5, 11, 31,  'opacity: 0.2'],
    ['column2', 5, 12, 32,  'opacity: 0.2'],
    ['column3', 5, 13, 33,  'opacity: 0.2'],
    ['column4', 5, 14, 34,  'opacity: 0.2'],
    ['column5', 5, 15, 35,  'opacity: 0.2'],
    ['column6', 5, 26, 36,  'opacity: 0.2']
]);

I've played around with the code a lot but always receive an error. I would like to apply styles for each of the series of data in each data row(stacked columns).

R3tep
  • 12,512
  • 10
  • 48
  • 75
Jin
  • 55
  • 7

1 Answers1

4

Sets the style for all charts, like the last chart. 

var data = google.visualization.arrayToDataTable([
    ['Genre', 'Label1', { role: 'annotation', role:'style' }, 'Label2', { role: 'annotation', role:'style' }, 'Label3', { role: 'annotation', role:'style' } ],
    ['column1', 5,  'opacity: 0.2', 11,  'opacity: 0.2', 31,  'opacity: 0.2'],
    ['column2', 5,  'opacity: 0.2', 12,  'opacity: 0.2', 32,  'opacity: 0.2'],
    ['column3', 5,  'opacity: 0.2', 13,  'opacity: 0.2', 33,  'opacity: 0.2'],
    ['column4', 5,  'opacity: 0.2', 14,  'opacity: 0.2', 34,  'opacity: 0.2'],
    ['column5', 5,  'opacity: 0.2', 15,  'opacity: 0.2', 35,  'opacity: 0.2'],
    ['column6', 5,  'opacity: 0.2', 26,  'opacity: 0.2', 36,  'opacity: 0.2']
]);

jsfiddle

PS : You forgot one index in the label array

R3tep
  • 12,512
  • 10
  • 48
  • 75
  • Amazing, Thank you soo much!! Also thanks for the quick response :) – Jin Apr 01 '15 at 14:38
  • Thanks again R3tep, Not sure what the protocol is as this is my first time posting, but I have another question. I want the first stack of columns to be completely invisible so the second and third stack seem to be floating. The reason I need to do this is because I want to make a waterfall chart which google hasn't developed yet. Putting opacity to 0 makes it invisible but when you hover the mouse over these transparent columns, it can see it highlight with the numbers and annotations showing. How can you completely hide it so it looks like there is no first row of stacked columns. Thanks! – Jin Apr 01 '15 at 16:10
  • 2
    I recommend you to post a new question. This is clearly a new question ;) – R3tep Apr 01 '15 at 16:16
  • Thanks R3tep :) here is the link to the question if your interested. Thanks again http://stackoverflow.com/questions/29409613/turn-a-stacked-column-google-chart-into-a-waterfall-chart – Jin Apr 02 '15 at 10:35