You need to add that code right after the code block where you create the
barChart ChartWrapper object:
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]}
});
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
});
Also, where I have the comment "add total to your DOM", you need to write
code to add the total to your DOM.
On Tuesday, August 19, 2014 9:02:55 AM UTC-4, mani wrote:
>
> Hi Andrew,
>
> I added the piece of code but i am getting ReferenceError: barChart is not
> defined.
> attaching the full code.
> it would be great if you could tell me where am i going wrong.
>
>
> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
> <title>ce</title>
> <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_b_chartdata.php', // make this url point to the data file
> dataType: 'json',
> async: false
> }).responseText;
> 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 bPicker = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'control3',
> 'options': {
> 'filterColumnLabel': 'b',
> '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')).
>
> bind(monthPicker, stPicker).
> bind(stPicker, barChart).
>
> draw(data);
> }
>
>
> google.setOnLoadCallback(drawVisualization);
> /////////////////////////////////////////////////////////your
> code////////////////////////////////////
> 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
> });
> </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=" logo" src="images/sbt_main.jpg" />
> <img align="left" height="100px" alt=" 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>
>
> </td>
> <td style='width: 600px,height: 900px'>
> <div style="float: left;" id="chart1"></div>
>
> </td>
> </tr>
> </table>
> </div>
> <div> </div>
> </body>
> </html>
>
> Thanks,
> Manish
>
>
> On Tue, Aug 19, 2014 at 5:21 AM, Andrew Gallant <agal...@google.com
> <javascript:>> wrote:
>
>> 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 a topic in the
>> Google Groups "Google Visualization API" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/google-visualization-api/FZPJFU5GW4k/unsubscribe
>> .
>> To unsubscribe from this group and all its topics, send an email to
>> google-visualization-api+unsubscr...@googlegroups.com <javascript:>.
>> To post to this group, send email to google-visua...@googlegroups.com
>> <javascript:>.
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
