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 <[email protected]> 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
> [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.
>
--
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.
