Hi,
I am able to display the chart with user control but i have to display the
total of all slices at the top of the legend.
how can i achive this,below is my code snippet
<script type="text/javascript" src="googlejs/jsapi.js"></script>
<script src="googlejs/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
// Prepare the data
function drawVisualization() {
var json = $.ajax({
url: 'St_bk_chartdata.php', // make this url point to the data file
dataType: 'json',
async: false
}).responseText;
//var array = jQuery.parseJSON(json);
//var array = JSON.parse(json);
//var data = google.visualization.arrayToDataTable(array);
var data = new google.visualization.DataTable(json);
var defaultRow = 1;
var defaultCol = 1;
// Define category pickers for 'Country', 'Region/St' and 'City'
var monthPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control0',
'options': {
'filterColumnLabel': 'Month',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'sortValues':false
}
},
St: {
selectedValues: [data.getValue(defaultRow, 0)]
}
});
var StPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'St',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
St: {
selectedValues: [data.getValue(defaultRow, 1)]
}
});
var cityPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'District',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
St: {
selectedValues: [data.getValue(defaultRow, 2)]
}
});
var bkPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'bk',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
St: {
selectedValues: [data.getValue(defaultRow, 3)]
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': {
'width': 900,
'height': 700,
is3D: 'true',
'chartArea': {top: 0, right: 0, bottom: 0}
},
// Configure the barchart to use columns 2 (City) and 3
(Population)
'view': {'columns': [2, 3]}
});
// Create the dashboard.
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the controls so that:
// - the 'Country' selection drives the 'Region' one,
// - the 'Region' selection drives the 'City' one,
// - and finally the 'City' output drives the chart
bind(monthPicker, StPicker).
bind(StPicker, barChart).
//bind(cityPicker, barChart).
//bind(cityPicker, bkPicker).
//bind(bkPicker, barChart).
// Draw the dashboard
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<center>
<div id="parentDiv" >
<div id="headerDiv">
<div id="logoDiv" style="float:left;position:relative;">
<img align="left" height="100px" alt="St bk of tv logo"
src="images/main.jpg" />
<img align="left" height="100px" alt="St bk of tv logo" src="images/fr.png"
style="margin-left:44px;" />
</div>
</div>
<div id='barDiv'>
<div id='cssmenu'>
<ul>
<li ><a href='index.php'><span style="color:white">Home</span></a></li>
<li ><a href='index.php'><span style="color:white">Back</span></a></li>
</ul>
</div>
</div>
<div id="dashboard" style="padding-top:20px;">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control0"></div>
<div id="control1"></div>
<div id="control2"></div>
<!--<div id="control3"></div> -->
</td>
<td style='width: 600px,height: 900px'>
<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 unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
