I'm using ChartWrapper and I've changed from chartType ColumnChart to
ImageChart in order to get a bvo type bar graph where I can see two
data types overlapping. Now I can't figure out how to display my own
axis labels. It displays a number under each column on the x axis,
but when I use the controls to filter the data displayed on the chart,
the program seems to reshuffle them to start at 0 again. The columns
don't retain their original labels. Is there any way I can use my
data (column F) to label each of these data sets?
With ColumnChart it was just a matter of typing:
'view' : {'columns': [5,20]}
within:
var column = new google.visualization.ChartWrapper({
and it would know that the label was 5 (column F) and the data was 20
(column U). ImageChart seems to just want data values, and I don't
know where to put the label values. Please help!
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Etrilum Product Savings
</title>
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls',
'imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var query1 = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?
key=0AoymtpoTf61HdG4tLVJhaXlxcndVdlMtNkdoSzlvcVE&gid=2');
// Send the query with a callback function.
query1.send(handleQueryResponse1);
}
function handleQueryResponse1(response1) {
if (response1.isError()) {
alert('Error in query: ' + response1.getMessage() + ' ' +
response1.getDetailedMessage());
return;
}
var data = response1.getDataTable();
var column = new google.visualization.ChartWrapper({
'chartType': 'ImageChart',
'containerId': 'chart1',
'options': {
cht: 'bvo',
chtt: 'Etrilum Products | Energy Savings',
chts: '000000,25',
chds: '0,300',
chxt: 'x,y',
chm: "index: '5'",
<%--'chxl': '0:' + {'columns': [5]},--%>
<%--%> chxl: '{"columns" : [5]}'
--%> chxr: '1,0,300,50',
chs : '600x500'
<%-- 'legend': 'none',
'title': 'Etrilum Products Energy Savings',
'titleTextStyle': {fontSize: 25},
hAxis: {title: 'Unique Letter', titleTextStyle: {fontSize:
20}},
vAxis: {title: 'Savings (MWhours)', titleTextStyle:
{fontSize: 20}},
'chartArea': {'left': 300, 'top': 300, 'right': 0,
'bottom': 400},
chxl : '{10,20,30,40,50}' --%>
},
// Instruct the chart to use colums 5 (Name) and 20 (Savings
(MWhr))
// from the 'data' DataTable.
'view': {'columns': [20, 21]}
});
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Etrilum Product',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Country',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
var slider2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Distributor',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
var slider3 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control4',
'options': {
'filterColumnLabel': 'Customers',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'view': {'columns': [5, 0,4,1,2,20,21]},
'options': {
'width': '700px'
}
});
// Create a dashboard
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and
the category
// picker will drive both charts.
bind([slider, categoryPicker, slider2, slider3], [column,
table]).
// Draw the entire dashboard.
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
<div id="control4"></div>
</td>
<td style='width: 1200px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
