% stacked bar is possible?

[asromero]

Hi, i´m trying to draw a column stacked chart with a particularity and
i can´t find the way to do that. I need for example that the chart
shows 4 stacked columns, every column has 2 values, for example total
tickets sold (830) and the other value tickes sold by internet (245)
what i need is that the column shows what is the % of tickets sold by
internet considering the total tickets sold value as 100%. Because the
satacked column chart makes an add of values, it shows me 830 + 245
and it´s not what i need. The other thing is that i need to put 4
columns with this particularity, is it possible to do?

I aprettiate any help

[asgallant]

You'll have to do the math to make it happen.  Set the value of the "total" column to the difference between the two and the formatted value of the "total" column to the total value (eg, if the total is X and internet sales are Y, then the value of the total column is (X-Y) and the formatted value of the total column is "X").  Ex (paste into viz playground to see it in action):

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'foobar');
  data.addColumn('number', 'Subtotal');
  data.addColumn('number', 'Total');
  data.addRows([
    ['foo', 3, {v: 7, f: "10"}],
    ['bar', 4, {v: 5, f: "9"}]
  ]);
  
  // Create and draw the visualization.
  var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  chart.draw(data, {
    width:600,
    height:400,
    isStacked: true
  });
}

[asromero]

Man..... you rock!! thank you very much, as far as i can see it works,
going to try with my values, i really apreciate it =)

thax a lot buddy

[asgallant]

You're welcome.

[asromero]

mmm, i have another question here, i was trying with the example you
helped me but now i want to do this:

function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'foobar');
data.addColumn('number', 'Subtotal');
data.addColumn('number', 'Total');
data.addRows([

['foo', {v: 15, f: "225"}, {v: 85, f: "1500"}],
['bar', {v: 30, f: "600"}, {v: 70, f: "2000"}]

]);

// Create and draw the visualization.
var chart = new
google.visualization.ColumnChart(document.getElementById(
'visualization'));
chart.draw(data, {
width:600,
height:400,
isStacked: true
});

The chart shows a 100% value (total value ie: 1500) and the diference
is 15% (225) it draws ok but when i see the tooltip the total value is
ok 1500 but the subtotal shows me 15, how can i do to shows me the
real value (225) and not the % diference? i need to show as it is now
based on a 100% chart but with values & %

txs

[asgallant]

The code you posted works fine on the visualization playground; tooltips show "1500" and "225" for the first bar and "2000" and "600" for the second.

[asromero]

You´re right, sorry i was using a number formater and it´s getting me
some errors, but is it possible to add in the tooltip the % values
(subtotal 225, 15%) & (600 - 30%) or it isn´t supported

[asgallant]

Set up your data like this:

{v: 15, f: "225 - 15%"}

The "f" parameter takes any string that you want.

[asromero]

Oooohhh!! wow, i learned a lot with your help, you really know how
this thing work, it opens the window for me. Again.. THANK YOU VERY
MUCH!!

=)

[asgallant]

You're welcome.