How do you get Legends on a single row Colum Chart that is using visualization

[philatr...@gmail.com]

Hello, below is my chart "example 1" that I would like use Legends
directly below each bar just like the words "Excelent, Good, Average,
Poor" in "example 2".

I have noticed a few post for people asking this but they find it hard
to explain...The problem is that my code uses "Google Chart Tools"
rather than the standard graph format, that can do such a thing,
simply by using the comand &chdl=Excelen|Good|Average|Poor.

So what I need is a way to do the same with chart tools.

Example 1

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data5 = new google.visualization.DataTable();
data5.addColumn('number', 'Your Data');
data5.addColumn('number', 'Your Industry');
data5.addColumn('number', 'All Organisation');
data5.addRows(1);
data5.setValue(0, 0,22);
data5.setValue(0, 1, 33);
data5.setValue(0, 2, 55);

var chart5 = new
google.visualization.ColumnChart(document.getElementById('chart5'));
chart5.draw(data5, {
width: 500,
height: 350,
titlePosition: 'none',
legend: 'bottom',
colors:['c7dcf2','0082c8','377aba'],
vAxis: {title: 'Percentage (%)',
titleTextStyle: {color: 'black',fontName:'Arial',fontSize:18},
maxValue: 100,
minValue: 0
}
});

}
</script>


Example 2:

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = new google.visualization.DataTable();
data1.addColumn('string', '');
data1.addColumn('number', 'Your Data');
data1.addColumn('number', 'Your Industry');
data1.addColumn('number', 'All Organisation');
data1.addRows(4);
data1.setValue(0, 0, 'Excelent');
data1.setValue(0, 1, 33);
data1.setValue(0, 2, 22);
data1.setValue(0, 3, 11);
data1.setValue(1, 0, 'Good');
data1.setValue(1, 1, 44);
data1.setValue(1, 2, 88>);
data1.setValue(1, 3, 43);
data1.setValue(2, 0, 'Average');
data1.setValue(2, 1, 76);
data1.setValue(2, 2, 21);
data1.setValue(2, 3, 64);
data1.setValue(3, 0, 'Poor');
data1.setValue(3, 1, 98);
data1.setValue(3, 2, 35);
data1.setValue(3, 3, 24>);

var chart1 = new
google.visualization.ColumnChart(document.getElementById('chart1'));
chart1.draw(data1, {
width: 500,
height: 350,
titlePosition: 'none',
legend: 'none',
colors:['c7dcf2','0082c8','377aba'],
colors:['green','F60','377aba'],
vAxis: {title: 'Percentage (%)',
titleTextStyle: {color: 'black',fontName:'Arial',fontSize:18},
maxValue: 100,
minValue: 0
}
})

}
</script>
http://code.google.com/apis/chart/interactive/docs/gallery/columnchart.html

[philatr...@gmail.com]

Bump... Anyone?

On Jun 13, 2:52 pm, "philatruntim...@googlemail.com"

> </script>http://code.google.com/apis/chart/interactive/docs/gallery/columnchar...

[asgallant]

Let me see if I got this straight: you want a column chart with three bars, where each one is a different color, and each has it's own axis label?  Unfortunately, this is not explicitly supported by the API.  You can either give each bar its own color (like your example 1) or give each its own axis label.  This is because colors are assigned by series, and axis labels are assigned by row, so you can either have 3 series (each a different color) or 3 rows (each the same color, but with different axis labels).

Fortunately, depending on how you want to use your chart and the underlying dataTable, you can cheat around the problem:

function drawChart() {

     var data = new google.visualization.dataTable();

     // create 4 columns

     data.addColumn('string', 'Label');

     data.addColumn('number', 'Your Data');

     data.addColumn('number', 'Your Industry');

     data.addColumn('number', 'All Organization');

     // add 3 rows

     data.addRows(3);

     // populate row 0 with "Your Data"

     data.setValue(0, 0, 'Your Data');

     data.setValue(0, 1, 22);

     // fill the rest of the row with zero's

     data.setValue(0, 2, 0);

     data.setValue(0, 3, 0);

     // repeat in row 1 with "Your Industry"

     data.setValue(1, 0, 'Your Industry');

     data.setValue(1, 1, 0);

     data.setValue(1, 2, 33);

     data.setValue(1, 3, 0);

     // repeat in row 2 with "All Organization"

     data.setValue(2, 0, 'All Organization');

     data.setValue(2, 1, 0);

     data.setValue(2, 2, 0);

     data.setValue(2, 3, 55);

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

     chart.draw(data, {

          width: 500, 

          height: 350, 

          titlePosition: 'none', 

          legend: 'bottom', 

          colors:['c7dcf2','0082c8','377aba'], 

          vAxis: {

               title: 'Percentage (%)', 

               titleTextStyle: {color: 'black',fontName:'Arial',fontSize:18}, 

               maxValue: 100, 

               minValue: 0 

          },

          // make it a stacked chart, so the empty bars don't take up space

          isStacked: true

     });

}

[d d]

hi

2011/6/14 asgallant <drew_g...@abtassoc.com>

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/Tr1sbWZ7a8EJ.

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.

[d d]

how are you

2011/6/14 d d <aux0...@gmail.com>