Stacked bar with values in middle

[Sherlock Holmes]

Hello,

I am a PHP developer and have a requirement to draw a chart (stacked
bar chart). I need to draw something like what you can find here :

http://www.swiftchart.com/stackedmix_ex4.png

Is this possible using Google API ? Can you guide me to some code
content ?

Thanks

[Roni Biran]

Sure thing. It is called ComboCharts and you can find some info and sample under the link http://code.google.com/apis/chart/interactive/docs/gallery/combochart.html

You can also use the Playground to play some with it yourself.

Good luck and welcome to the community

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Sherlock Holmes]

Hello Roni Biran,

Thanx for this quick response.

Your example is a multi-bar (multi-color) but I need a stacked bar.
Apart from this, I need the number values inside the stack of each
stacked bar (each color box of a bar).

Hope I get something as per my requirement.

Thanx...

On Oct 29, 12:11 am, Roni Biran <roni.bi...@gmail.com> wrote:
> Sure thing. It is called ComboCharts and you can find some info and sample

> under the linkhttp://code.google.com/apis/chart/interactive/docs/gallery/combochart...

> You can also use the Playground to play some with it yourself.
> Good luck and welcome to the community
>

[asgallant]

You can make the chart a stacked bar chart by setting the 'isStacked' option to true.  The API does not support including the value in the bar as in your example, but there are tooltips that have the value in them.

[Sherlock Holmes]

Hi,

:( such a facility not available in Google Chart.

The following is the code I had obtained from examples. Here there is
a reference to a spreadsheet. I wanted to remove it and use my
hardcoded values. But the code below (whatever I have commented) does
not work when I un-comment. Can you pls help me on this.. Where am I
wrong ??

<script type="text/javascript">
google.load('visualization', '1',
{'packages': ['table', 'map', 'corechart']});
google.setOnLoadCallback(initialize);

function initialize() {
var query = new google.visualization.Query(
'https://spreadsheets.google.com/pub?key=pCQbetd-
CptF0r8qmCOlZGg');
query.send(draw);
}

function draw(response) {
if (response.isError()) {
alert('Error in query');
}

var ticketsData = response.getDataTable();

//create data table object
//var ticketsData = new google.visualization.DataTable();

//define columns
// dataTable.addColumn('string','Place / Movie');
// dataTable.addColumn('number', 'London');
// dataTable.addColumn('number', 'Paris');
// dataTable.addColumn('number', 'Moscow');

//define rows of data
// dataTable.addRows([['Pi',5,25,7], ['Requiem',9,20,30],['Fountain',
1,3,6]]);

var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(ticketsData, {'isStacked': true, 'legend':
'bottom',
'vAxis': {'title': 'Number of tickets'}});
}
</script>


Regards,

[asgallant]

Since you're not using the query, I pulled out all of that code.  You then need to use the same variable name for the DataTable object (you create one called ticketsData and then try to populate one called dataTable - I assumed that ticketsData is the one you wanted, but you can change it easily enough).  Here is the modified code:

google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart () {
    // create data table object
    var ticketsData = new google.visualization.DataTable();
    
    // define columns
    ticketsData.addColumn('string','Place / Movie');
    ticketsData.addColumn('number', 'London');
    ticketsData.addColumn('number', 'Paris');
    ticketsData.addColumn('number', 'Moscow');
    
    // define rows of data
    ticketsData.addRows([

        ['Pi',5,25,7],
        ['Requiem',9,20,30],
        ['Fountain', 1,3,6]
    ]);
    

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));