The charts do not support adding a total anywhere, but you can calculate it
yourself, add it to your DOM, and use CSS to position the total over the
chart wherever you need it. You can calculate it like this:
google.visualization.events.addListener(barChart, 'ready', function () {
var dt = barChart.getDataTable();
var group = google.visualization.data.group(dt, [{
type: 'number',
column: 0,
modifier: function () {
return 0;
}
}], [{
type: 'number',
column: 3,
aggregation: google.visualization.data.sum
}]);
var total = group.getValue(0, 1);
// add total to your DOM
});
On Monday, August 18, 2014 1:53:18 AM UTC-4, mani wrote:
>
> 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.
