How to categoryFilter for a column that can't be displayed within Google Charts datatable - google-visualization

I am using Google Charts with a datatable build up like this:
'Created', 'Passed', 'Passed with Bugs','In
Process','Failed','Untested','Retest','Blocked','Functionality']
"August 31, 2020",1,10,3,5,23,0,0,"Functionality1"
"August 31, 2020",5,4,23,1,39,0,0,"Functionality2"
"August 31, 2020",1,10,3,5,23,0,0,"Functionality3"
"September 6, 2020",1,10,3,5,23,0,0,"Functionality1"
"September 6, 2020",5,4,23,1,39,0,0,"Functionality2"
I am grouping values by column 0 (date) and the visualization is done in a stacked Columnchart like this:
ColumnChart Example
Since I am mixing up numbers (columns 1-7) with a string (column 8) I create a DataView without column 8. If I don't do this I get the error "All series on a given axis must be of the same data type".
Still I would like to have column 8 to use it within a ControlWrapper as a "CategoryFilter".
E.g. draw the columnChar only showing "Functionality1" data.
Below my code. It is a mix of Jinja (running a Flask webserver) and javascript:
<body>
<script type="text/javascript">
var dataArrayTests = new Array();
</script>
{% for item in test_details %}
<script type="text/javascript">
dataArrayTests.push([
'{{ item["created"] }}',
parseInt('{{ item["Passed"] }}'),
parseInt('{{ item["Passed with bugs found"] }}'),
parseInt('{{ item["In Process"] }}'),
parseInt('{{ item["Failed"] }}'),
parseInt('{{ item["Untested"] }}'),
parseInt('{{ item["Retest"] }}'),
parseInt('{{ item["Blocked"] }}'),
'{{ functionality }}'
]);
</script>
{% endfor %}
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawDashboard);
dataArrayTests.reverse()
dataArrayTests.unshift(['Created', 'Passed', 'Passed with Bugs','In Process','Failed','Untested','Retest','Blocked','Functionality'])
// Load the Visualization API and the controls package.
// Packages for all the other charts you need will be loaded
// automatically by the system.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
// Everything is loaded. Assemble your dashboard...
var data = google.visualization.arrayToDataTable(dataArrayTests);
var result = google.visualization.data.group(
data,
[0],
[{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 5, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'}
]
)
var options = {
height: 600,
legend: { position: 'top' },
bar: { groupWidth: '75%' },
isStacked: true,
};
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Create a Category Filter, passing some options
var functionalityFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
//This gives an error right now since there is no column 8 in the view I create below. Index from 0-7 works without errors ... but these are not the columns I want to filter by
'filterColumnIndex' : 8
}
});
// Create a ColumnChart, passing some options
var columnStack = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
"height": 600,
"legend": { position: 'top' },
"bar": { groupWidth: '75%' },
"isStacked": true,
}
});
// Create a view to filter out column 8 to avoid the error "All series on a given axis must be of the same data type"
var view = new google.visualization.DataView(result)
view.setColumns([0,1,2,3,4,5,6,7]);
dashboard.bind(functionalityFilter, columnStack)
dashboard.draw(view);
}
</script>


Found the mistake(s).
When pushing to "dataArrayTests" I had a typo in the last column. {{ functionality }} should have been {{ item['functionality']}} . So the column I wanted to filter on was never filled with data and could not function.
Within the dataArray I now define the "functionality" (column 8) with the role "tooltip". That way it does not get considered for the x-axis, but I can still use to to filter.
Adjusted code below:
<script type="text/javascript">
var dataArrayTests = new Array();
</script>
{% for item in test_details %}
<script type="text/javascript">
dataArrayTests.push([
'{{ item["created"] }}',
parseInt('{{ item["Passed"] }}'),
parseInt('{{ item["Passed with bugs found"] }}'),
parseInt('{{ item["In Process"] }}'),
parseInt('{{ item["Failed"] }}'),
parseInt('{{ item["Untested"] }}'),
parseInt('{{ item["Retest"] }}'),
parseInt('{{ item["Blocked"] }}'),
'{{ item["functionality"] }}'
]);
</script>
{% endfor %}
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawDashboard);
dataArrayTests.reverse()
dataArrayTests.unshift(['Created', 'Passed', 'Passed with Bugs','In Process','Failed','Untested','Retest','Blocked',{type: 'string', role: 'tooltip'}])
// Load the Visualization API and the controls package.
// Packages for all the other charts you need will be loaded
// automatically by the system.
google.charts.load('current', {'packages':['corechart', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
// Everything is loaded. Assemble your dashboard...
console.log(dataArrayTests)
var data = google.visualization.arrayToDataTable(dataArrayTests);
var result = google.visualization.data.group(
data,
[0],
[{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 4, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 5, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'},
])
result.sort([{column: 0}])
var options = {
height: 600,
legend: { position: 'top' },
bar: { groupWidth: '75%' },
isStacked: true,
};
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Create a Category Filter, passing some options
var functionalityFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter_div',
'options': {
'filterColumnIndex' : 8
}
});
// Create a ColumnChart, passing some options
var columnStack = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
"height": 600,
"legend": { position: 'top' },
"bar": { groupWidth: '75%' },
"isStacked": true
}
});
dashboard.bind(functionalityFilter, columnStack)
dashboard.draw(data);
}
</script>

Related

Hide text from Google GeoChart tooltip

I have a Google Geochart that is connected to a Google Spreadsheet. The aim of the chart is to show different categories of universities in our state and their locations. I have assigned values in the spreadsheet in order to have the appropriate marker color for the map to denote the categories.
My problem is that the text denoting the type (a number) is showing in the tooltip. (Example: tooltip shows "ABC University Type 3." I need to either hide this text, or create a string based on conditional logic so that, for example, Type 3 translates to "XYZ System" in the tooltip. Which do you think is the better way to do it, and can you provide guidance as to how to do this?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.charts.load('current', { 'packages': ['geochart'] });
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet3");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {var data = response.getDataTable();
var options = {
//showTip: true,
mapType: 'styledMap',
useMapTypeControl: true,
resolution: 'provinces',
//displayMode: 'text',
//magnifyingGlass: {'enable': true, 'zoomFactor': '7'},
region: 'US-KY',
keepAspectRatio: true,
legend: 'none',
sizeAxis: { minValue: 1, maxValue: 3, minSize: 10, maxSize: 10 },
colorAxis: {colors: ['green', 'blue', 'purple'], values: [1, 2, 3]},
markerOpacity: 0.75,
tooltip: {showColorCode: false, isHTML: true, textStyle:{fontSize: 21}},
dataMode: 'markers'
};
var map = new google.visualization.GeoChart(document.getElementById('chart_div'));
map.draw(data, options);
};
</script>
<style type="text/css">
html, body {height: 100%;}
#chart_div {width: 100%; height: 100%;}
</style>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

You can use the DataView Class to change the formatted value of the Type column.
For instance, the value of the Type column in the DataTable looks like this...
{"v":3.0,"f":"3"}
With the DataView, change it to this...
{"v":3.0,"f":"XYZ System"}
We can also remove the column Label, to avoid seeing it in the tooltip.
See following example...
google.charts.load('current', {
callback: drawMap,
packages: ['geochart']
});
function drawMap() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet3");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
// setup school type array
var schoolTypes = [
'ABC System',
'LMO System',
'XYZ System'
];
// create DataView from DataTable
var view = new google.visualization.DataView(data);
// set view columns, keep first three columns
// use calculated column for Type
view.setColumns([0, 1, 2, {
type: 'number',
label: '',
calc: function (dataTable, rowIndex) {
return {
v: dataTable.getValue(rowIndex, 3),
// get school type from array
f: schoolTypes[dataTable.getValue(rowIndex, 3) - 1]
}
}
}]);
var options = {
//showTip: true,
mapType: 'styledMap',
useMapTypeControl: true,
resolution: 'provinces',
//displayMode: 'text',
//magnifyingGlass: {'enable': true, 'zoomFactor': '7'},
region: 'US-KY',
keepAspectRatio: true,
legend: 'none',
sizeAxis: { minValue: 1, maxValue: 3, minSize: 10, maxSize: 10 },
colorAxis: {colors: ['green', 'blue', 'purple'], values: [1, 2, 3]},
markerOpacity: 0.75,
tooltip: {showColorCode: false, isHTML: true, textStyle:{fontSize: 21}},
dataMode: 'markers'
};
var map = new google.visualization.GeoChart(document.getElementById('chart_div'));
map.draw(view, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
ALSO -- Recommend including loader.js and jsapi only once per page

Column Chart: All series on a given axis must be of the same data type

What am i doing wrong with the following code to get an error All series on a given axis must be of the same data type
function drawVisualization(){
var performanceJson = $.ajax({
url : "{% url json_data %}",
type:"GET",
dataType: "json",
cache: false,
async: false}).responseJSON;
var performanceData = new google.visualization.DataTable();
performanceData.addColumn('string', 'Question');
performanceData.addColumn('string', 'Headings');
performanceData.addColumn('number', 'TotalScore');
performanceData.addColumn('number', 'Score');
performanceData.addRows(performanceJson);
var performanceOptions = {
title : 'Performance Report',
subtitle: 'Based on a scale of 1 to 7',
hAxis : {title:'Question', titleTextStyle:{color:'red'}},
vAxis : {title:'Scores'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(performanceData, performanceOptions);
}
The performanceJson variable has the value:
[["No. of people", "Area", 6, 1], ["Scholars", "Standard", 12, 2], ["Co-ordination", "Standard", 18, 14]]

For a ColumnChart all columns(except the first) have to be of type number.
Column #2 is of type string, column#3 and column #4 are of type number, so the error-message should be clear.
I'm not sure for what column #2 is good for, but you may not use this column as data-column
You may e.g. use this column as annotation:
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization(){
var performanceJson = [["No. of people", "Area", 6, 1],
["Scholars", "Standard", 12, 2],
["Co-ordination", "Standard", 18, 14]];
var performanceData = new google.visualization.DataTable();
performanceData.addColumn('string', 'Question');
performanceData.addColumn({type:'string',role:'annotation'});
performanceData.addColumn('number', 'TotalScore');
performanceData.addColumn('number', 'Score');
performanceData.addRows(performanceJson);
var performanceOptions = {
title : 'Performance Report',
subtitle: 'Based on a scale of 1 to 7',
hAxis : {title:'Question', titleTextStyle:{color:'red'}},
vAxis : {title:'Scores'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(performanceData, performanceOptions);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

Column Chart in Google Charts is displaying bars 10 times proper height

I can't figure out why, I've triple checked that I'm passing in the right values. When I hover over any of the bars it displays the right data, but every single one of them displays at 10x scale on the graph and I can't figure out why. Here's my code if it helps:
var dashboard2 = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control2 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control2',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '80%'},
'hAxis': {'baselineColor': 'none'}
},
// Display a single series that shows the closing value of the stock.
// Thus, this view has two columns: the date (axis) and the stock value (line series).
'chartView': {
'columns': [0, 1, 14]
},
// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
'minRangeSize': 259200000
}
},
// Initial range: 2012-02-09 to 2012-03-20.
'state': {'range': {'start': new Date(2012, 11, 7), 'end': new Date()}}
});
var chart2 = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chart2',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '80%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 400}},
'title': 'Sales Made by Affiliate Name',
'seriesType': "bars",
'series': {0: {type: "line"}, 13: {type: "line"}},
'isStacked': true
},
// Convert the first column from 'date' to 'string'.
'view': {
'columns': [
{
'calc': function(dataTable, rowIndex) {
return dataTable.getFormattedValue(rowIndex, 0);
},
'type': 'string'
}, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
}
});
var jsonData2 = $.ajax({
url: "getData.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server
var data2 = new google.visualization.DataTable(jsonData2);
dashboard2.bind(control2, chart2);
dashboard2.draw(data2);
Edit: Here's a small bit of the data at the very beginning, because I don't want to give out our data, but I suppose it might be necessary to get an idea for what is being passed in. I cut out the starting bracket for readability:
"cols":[ {"id":"","label":"Date","pattern":"","type":"date"}, {"id":"","label":"Total","pattern":"","type":"number"}, {"id":"","label":"andersce99","pattern":"","type":"number"}, {"id":"","label":"sojourn","pattern":"","type":"number"}, {"id":"","label":"warriorplus","pattern":"","type":"number"}, {"id":"","label":"potpie queen","pattern":"","type":"number"}, {"id":"","label":"60minuteaffiliate","pattern":"","type":"number"}, {"id":"","label":"bob voges","pattern":"","type":"number"}, {"id":"","label":"Grayth","pattern":"","type":"number"}, {"id":"","label":"TiffanyDow","pattern":"","type":"number"}, {"id":"","label":"AmandaT","pattern":"","type":"number"}, {"id":"","label":"Gaz Cooper","pattern":"","type":"number"}, {"id":"","label":"Sam England","pattern":"","type":"number"}, {"id":"","label":"Matthew Olson","pattern":"","type":"number"}, {"id":"","label":"Average Per Day Over Time","pattern":"","type":"number"} ],
"rows": [ {"c":[{"v":"Date(2012,11,7)","f":null},{"v":"387","f":null},{"v":"19","f":null},{"v":"275","f":null},{"v":"8","f":null},{"v":"0","f":null},{"v":"35","f":null},{"v":"3","f":null},{"v":"21","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"11","f":null},{"v":"6","f":null},{"v":"387","f":null}]},
{"c":[{"v":"Date(2012,11,8)","f":null},{"v":"98","f":null},{"v":"11","f":null},{"v":"39","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"15","f":null},{"v":"0","f":null},{"v":"7","f":null},{"v":"9","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"3","f":null},{"v":"6","f":null},{"v":"242.5","f":null}]},
{"c":[{"v":"Date(2012,11,9)","f":null},{"v":"58","f":null},{"v":"7","f":null},{"v":"16","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"4","f":null},{"v":"0","f":null},{"v":"3","f":null},{"v":"10","f":null},{"v":"2","f":null},{"v":"9","f":null},{"v":"0","f":null},{"v":"2","f":null},{"v":"181","f":null}]},
{"c":[{"v":"Date(2012,11,10)","f":null},{"v":"196","f":null},{"v":"5","f":null},{"v":"8","f":null},{"v":"126","f":null},{"v":"0","f":null},{"v":"2","f":null},{"v":"35","f":null},{"v":"0","f":null},{"v":"7","f":null},{"v":"4","f":null},{"v":"3","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"184.75","f":null}]},
{"c":[{"v":"Date(2012,11,11)","f":null},{"v":"76","f":null},{"v":"7","f":null},{"v":"5","f":null},{"v":"17","f":null},{"v":"30","f":null},{"v":"7","f":null},{"v":"1","f":null},{"v":"1","f":null},{"v":"2","f":null},{"v":"1","f":null},{"v":"4","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"163","f":null}]},
{"c":[{"v":"Date(2012,11,12)","f":null},{"v":"48","f":null},{"v":"4","f":null},{"v":"5","f":null},{"v":"9","f":null},{"v":"20","f":null},{"v":"7","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"143.833333333","f":null}]},
{"c":[{"v":"Date(2012,11,13)","f":null},{"v":"21","f":null},{"v":"3","f":null},{"v":"2","f":null},{"v":"5","f":null},{"v":"4","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"2","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"126.285714286","f":null}]},
{"c":[{"v":"Date(2012,11,14)","f":null},{"v":"12","f":null},{"v":"1","f":null},{"v":"1","f":null},{"v":"2","f":null},{"v":"4","f":null},{"v":"2","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"112","f":null}]},
{"c":[{"v":"Date(2012,11,15)","f":null},{"v":"8","f":null},{"v":"3","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"2","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"1","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"0","f":null},{"v":"100.444444444","f":null}]}

Your data is formatted incorrectly: numbers need to be stored as numbers in the JSON, not as strings. As an example, this:
{"v":"387","f":null}
should be like this:
{"v":387,"f":null}
If you are using PHP's json_encode function to build the JSON, you can add JSON_NUMERIC_CHECK as an argument to the function call to output the numbers properly:
json_encode($myData, JSON_NUMERIC_CHECK);

google visualization change label on all values on x-axis

I have a bunch of products which I use ColumnChart to show the product name on the x-axis and then two different values that the products have on my y-axis. Since there are a bunch of products it gets pretty messy if I show all of them at once on the ColumnChart therefore I use the ChartRangeFilter Control to be able to have a window of products.
Now my problem is that ChartRangeFilter can't use strings on the axises. But I don't want to display the product id on the x-axis, so is it possible to change the lable when it is displayd?
Hope you can understand what I mean. Below is some code to test in the google code playground
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart', 'controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0, 1, 2]
},
'minRangeSize': 1
}
},
// Initial range: 1 to 4.
'state': {'range': {'start': 1, 'end': 4}}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
'legend': {'position': 'none'}
}
});
var data = new google.visualization.DataTable();
data.addColumn('number', 'Product ID');
data.addColumn('number', 'value1');
data.addColumn('number', 'valu2');
data.addRow([1, 11, 12]);
data.addRow([2, 15, 12]);
data.addRow([3, 10, 11]);
data.addRow([4, 11, 9]);
data.addRow([5, 8, 12]);
data.addRow([6, 4, 9]);
data.addRow([7, 8, 15]);
data.addRow([8, 8, 11]);
data.addRow([9, 8, 9]);
dashboard.bind(control, chart);
dashboard.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="dashboard">
<div id="chart" style='width: 915px; height: 300px;'></div>
<div id="control" style='width: 915px; height: 50px;'></div>
</div>
</body>
</html>
Thanks in advance!

You can use a DataView to get around this problem. In the ControlWrapper, set the view.columns parameter like this:
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'baselineColor': 'none'}
},
'chartView': {
'columns': [0, 1, 2]
},
'minRangeSize': 1
}
},
// Initial range: 1 to 4.
'state': {'range': {'start': 1, 'end': 4}},
view: {
columns: [{
type: 'number',
calc: function (dt, row) {
return {v: row, f: dt.getFormattedValue(row, 0)};
}
}, 1, 2]
}
});
then reverse the process in the ChartWrapper's view.columns:
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
'legend': {'position': 'none'}
},
view: {
columns: [{
type: 'string',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return dt.getFormattedValue(row, 0);
}
}, 1, 2]
}
});
That should get you what you want.
This code assumes you have a DataTable with 3 columns: a string (product name) and two number columns (value1 and value2). Here is a demo: http://jsfiddle.net/asgallant/55agF/

change the color of the text as of background
hAxis: {textStyle: {color: 'white'}},

is it possible to give space between bars using Google ColumnChart

I am using the Following show the Column Chart for my records, i want to give spaces between the bars that are generating, please help.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', '11-02-2013', '11-02-2013','11-02-2013','11-02-2013'],
['Weeks', 10,20,30,5],
]);
var options = {
title: 'Weekly Average Weight Loss Performance Chart For All Users',
is3D: true,
//isStacked: true,
isHtml: false,
// colors: ['d2ac2c', 'ff0000', '029748'],
bar: { groupWidth: '10%' },
legend:{position: 'bottom'},
//chbh:'0,10,0',
//hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

var options = {
bar: { groupWidth: '100%' },

The usual format for a column chart is that each series has its own column, grouped by rows. Since you have all 4 data points in the same row, you will end up having them all clumped together in the same group. If you change your data, you will get separation as each will be in a separate group:
var data = google.visualization.arrayToDataTable([
['Date', 'Data'],
['11-02-2013', 10],
['11-02-2013', 20],
['11-02-2013', 30],
['11-02-2013', 5]
]);
If you want to show multiple people, grouped by weeks, then you would do something like this:
var data = google.visualization.arrayToDataTable([
['Date', 'Alan', 'Beatrice', 'Charlie', 'Diana'],
['11-02-2013', 10, 5, 15, 20],
['11-02-2013', 20, 1, 2, 3],
['11-02-2013', 30, 25, 20, 15],
['11-02-2013', 5, 7, 9, 11]
]);
This will group your data by week (so all 4 people would be shown in the same week as a single group) with gaps between the weeks (between each 'group' of data).