gauge with max as table column
8 views
Skip to first unread message
chi-fai wu
May 31, 2016, 5:21:24 AM5/31/16
to Google Visualization API
Hello,
I'm trying to set max from a selected row but the value is always from the first row of the table:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
selectionTest
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//google.charts.load('current', {'packages':['corechart','table','controls']});
google.load('visualization', '1.1', {packages:['table']});
google.load('visualization', '1.1', {packages:['corechart']});
google.load('visualization', '1.1', {packages:['controls']});
// --------------------------------------------------------------------------------------- drawSelectedValues() [
function drawSelectedValues() {
var data = google.visualization.arrayToDataTable([
['product', 'count', 'count_max']
,['Product 1', 30, 60]
,['Product 2', 45, 50]
]);
//------------------------------------------------------------------------------Graphiques : drawSelectedValues [
// listBox for product
var productListBox=new google.visualization.ControlWrapper({
'controlType':'CategoryFilter'
, 'containerId': 'productListBox'
, 'options':{'filterColumnLabel': 'product'
,'ui':{'labelStacking':'horizontal'
,'allowTyping':true
,'allowMultiple':false}}
, state:{
selectedValues: [data.getValue(0,0)] // first value selected
}
});
var table = new google.visualization.Table(document.getElementById('tableDatas_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
var tableSelect=new google.visualization.ChartWrapper({
'chartType': 'Table'
, 'containerId': 'tableSelect_div'
});
var patients_gauge = new google.visualization.ChartWrapper({
'chartType':'Gauge'
, 'containerId':'patients_gauge_div'
, 'options': {
'max':data.getValue(0,2) // always first Line of raw data
// 'max':{'columns':[2]} // use 100 as max
}
, 'view': {'columns':[1]}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
bind( productListBox, [tableSelect,patients_gauge]);
dashboard.draw(data);
}
google.setOnLoadCallback(drawSelectedValues);
// --------------------------------------------------------------------------------------- drawSelectedValues() ]
</script>
</head>
<body>
<div id="dashboard_div">
<table border=0>
<td><b>select a product</b></td>
<tr style='vertical-align: top'>
<td> <div id="productListBox"></div> </td>
<th>patients<div id="patients_gauge_div" style="width:250; height:250"></div></th>
<td colspan="2"><div id="hospitalRepartition_Barchart"
</tr>
</table>
<table border=0>
<td><b>selected values</b></td>
<tr><td> <div id="tableSelect_div"></div> </td> </tr>
<td><b>raw data</b></td>
<tr><td> <div id="tableDatas_div"></div> </td></tr>
</table>
</div>
</body>
</html>
I'll be very happy if someone have a solution.
Reply all
Reply to author
Forward
0 new messages