[visualization-api] Re: Google visualization dashboard Pie display
First, you need to remove the view parameter from the PieChart's
ChartWrapper - it is not needed since you are constructing a new DataTable
for the PieChart to draw from.
var pie = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart1',
options: options
});
Second, I see that you are using a document ready event handler to set up
your AJAX request, which then calls the drawChart function. The problem
with this approach is that it is possible for document ready to fire, the
user to trigger the AJAX request, and the AJAX request to return all before
the Visualization API finishes loading; if this happens, your code will
throw errors trying to render the charts, or the chart will render
improperly. It seems unlikely, but I've dealt with other users who have
run into this exact problem before. If you change from a document ready
event handler to a callback from the google loader, you can avoid this
problem:
google.load('visualization', '1', { 'packages': ['corechart', 'controls'],
callback: function () {
// code from your document ready handler
}});
--
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.
[visualization-api] Re: Google visualization dashboard Pie display
Hi Andrew,
Thank you so much. I changed my code and it worked perfectly. But still I
am seeing another problem.
I have code to calculate total kbUsage for perticular MDN. That was working
before. But now it just gives total no of rows returned from the DB,
instead of total of all kbUsage.
var group = google.visualization.data.group(newData , [{
// we need a key column to group on, but since we want all rows
grouped into 1,
// then it needs a constant value
column: 2,
aggregation: google.visualization.data.sum,
type: 'number',
modifier: function () {
return 1;
}
}],
[{
// get the total of all KBUsage
column: 2, //instead of column 2, if i pass 0 (MDN) or (1) category, i
get the actual values of that column in my next alert.
label: 'Total Byte',
type: 'number',
aggregation: function (values) {
var product = 0;
var n = values.length;
for (i = 0; i n; i++) {
//alert(values[i]); //This alert returns 1 everytime for column: 2,
instead of actual value
product = product + values[i];
}
return product;
}
}]);
document.getElementById('avg').innerHTML = group.getValue(0, 1);
Thanks
On Wednesday, August 6, 2014 8:41:58 AM UTC-4, Andrew Gallant wrote:
First, you need to remove the view parameter from the PieChart's
ChartWrapper - it is not needed since you are constructing a new DataTable
for the PieChart to draw from.
var pie = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart1',
options: options
});
Second, I see that you are using a document ready event handler to set up
your AJAX request, which then calls the drawChart function. The problem
with this approach is that it is possible for document ready to fire, the
user to trigger the AJAX request, and the AJAX request to return all before
the Visualization API finishes loading; if this happens, your code will
throw errors trying to render the charts, or the chart will render
improperly. It seems unlikely, but I've dealt with other users who have
run into this exact problem before. If you change from a document ready
event handler to a callback from the google loader, you can avoid this
problem:
google.load('visualization', '1', { 'packages': ['corechart', 'controls'],
callback: function () {
// code from your document ready handler
}});
--
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.
[visualization-api] Re: Google visualization dashboard Pie display
That is a strange effect; I wonder if it is using the modified value from
the grouping column? Try changing the column index of the grouping column
(since it doesn't really matter which one you use, in this case):
var group = google.visualization.data.group(newData , [{
// we need a key column to group on, but since we want all rows grouped
into 1,
// then it needs a constant value
column: 0,
aggregation: google.visualization.data.sum,
type: 'number',
modifier: function () {
return 1;
}
}], [{
// get the total of all KBUsage
column: 2, //instead of column 2, if i pass 0 (MDN) or (1) category, i
get the actual values of that column in my next alert.
label: 'Total Byte',
type: 'number',
aggregation: function (values) {
var product = 0;
var n = values.length;
for (i = 0; i n; i++) {
//alert(values[i]); //This alert returns 1 everytime for
column: 2, instead of actual value
product = product + values[i];
}
return product;
}
}]);
On Wednesday, August 6, 2014 2:06:16 PM UTC-4, saKw wrote:
Hi Andrew,
Thank you so much. I changed my code and it worked perfectly. But still I
am seeing another problem.
I have code to calculate total kbUsage for perticular MDN. That was
working before. But now it just gives total no of rows returned from the
DB, instead of total of all kbUsage.
var group = google.visualization.data.group(newData , [{
// we need a key column to group on, but since we want all rows
grouped into 1,
// then it needs a constant value
column: 2,
aggregation: google.visualization.data.sum,
type: 'number',
modifier: function () {
return 1;
}
}],
[{
// get the total of all KBUsage
column: 2, //instead of column 2, if i pass 0 (MDN) or (1) category,
i get the actual values of that column in my next alert.
label: 'Total Byte',
type: 'number',
aggregation: function (values) {
var product = 0;
var n = values.length;
for (i = 0; i n; i++) {
//alert(values[i]); //This alert returns 1 everytime for column:
2, instead of actual value
product = product + values[i];
}
return product;
}
}]);
document.getElementById('avg').innerHTML = group.getValue(0, 1);
Thanks
On Wednesday, August 6, 2014 8:41:58 AM UTC-4, Andrew Gallant wrote:
First, you need to remove the view parameter from the PieChart's
ChartWrapper - it is not needed since you are constructing a new DataTable
for the PieChart to draw from.
var pie = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart1',
options: options
});
Second, I see that you are using a document ready event handler to set up
your AJAX request, which then calls the drawChart function. The problem
with this approach is that it is possible for document ready to fire, the
user to trigger the AJAX request, and the AJAX request to return all before
the Visualization API finishes loading; if this happens, your code will
throw errors trying to render the charts, or the chart will render
improperly. It seems unlikely, but I've dealt with other users who have
run into this exact problem before. If you change from a document ready
event handler to a callback from the google loader, you can avoid this
problem:
google.load('visualization', '1', { 'packages': ['corechart',
'controls'], callback: function () {
// code from your document ready handler
}});
--
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.
[visualization-api] Re: Google visualization dashboard Pie display
Hi Andrew,
When I remove the PieChart from the Dashboard.bind call, i dont see pie
chart image in my page. and also i get an error that says
Invalid column index 2. Should be an integer in the range [0-1].
Thanks
On Friday, August 1, 2014 8:38:08 PM UTC-4, Andrew Gallant wrote:
You need to calculate the data for your PieChart in the ready event
handler for your Table:
google.visualization.events.addListener(table, 'ready', function () {
var newData = table.getDataTable();
var group = google.visualization.data.group(newData, [1] [{
// we need a key column to group on, but since we want all rows
grouped into 1,
// then it needs a constant value
column: 2,
aggregation: google.visualization.data.sum,
type: 'number',
modifier: function () {
return 1;
}
}]);
document.getElementById('avg').innerHTML = group.getValue(0, 1);
var pieData = google.visualization.data.group(newData, [1], [{
column:2,
aggregation: google.visualization.data.sum,
type:'number'
}]);
pie.setDataTable(pieData);
pie.draw();
});
and you need to remove the PieChart from the Dashboard.bind call:
var chart = new
google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker], [table]);
On Friday, August 1, 2014 2:00:19 PM UTC-4, saKw wrote:
https://lh3.googleusercontent.com/-zXeubBSjnX8/U9vVm9YA9TI/IgU/RTFR1mbrvh4/s1600/Capture.PNG
Hi Andrew,
Thanks for your reply.
I tried doing as per your suggestion but not getting the expected result.
I am still getting TYPES repeated for default category picker (in my code
it is All MDNs). I want it to be sum of MINUse group by TYPES.
I am posting my javascript, can you pls take a look and let me know where
I am doing wrong?
In my table *PIN *-mdn, TYPES-category and *MINUse-kbUsage.*
I have attached my pie chart pic. As you can see in the legend the 'Email
messaging' coming multiple times so is the 'Unknown'.
https://lh3.googleusercontent.com/-zXeubBSjnX8/U9vVm9YA9TI/IgU/RTFR1mbrvh4/s1600/Capture.PNG
function drawChart() {
var data = new
google.visualization.DataTable();
data.addColumn('string', 'mdn');
data.addColumn('string', 'category');
data.addColumn('number', 'kbUsage');
//alert(inside drawChart);
for(var i=0;iqueryObjectLen;i++)
{
var category = queryObject.empdetails[i].category;
//alert(category);
var kbUsage = queryObject.empdetails[i].kbUsage;
//alert(kbUsage);
var mdn = queryObject.empdetails[i].mdn;
//alert(mdn);
data.addRows([
[mdn,category,parseInt(kbUsage)]
]);
}
var options = {
title: 'Category Information',
legend: {position: 'right', textStyle:
{color: 'black', fontSize: 9}},
is3D: true,
pieSliceText: 'percentage',
sliceVisibilityThreshold:0,
vAxis: {maxValue: 70},
chartArea: {height: '85%', top: '13%'},
tooltip: { text: 'percentage'},
left:30,top:20,width:100%,height:
100%
/*backgroundColor: {
stroke: 'gray',
strokeWidth: 1
}*/
};
var total = 0;
for (var i = 0; i data.getNumberOfRows();
i++) {
total += data.getValue(i, 2);
}
//alert(total);
var legend = document.getElementById(legend
);
var legItem = [];
var colors = ['#e0440e', '#e6693e', '#ec8f6e',
'#f3b49f', '#f6c7b6', '#f3', '#f6'];
for (var i = 0; i data.getNumberOfRows();
i++) {
var label = data.getValue(i, 1);
var value = data.getValue(i, 2);
//alert(value);
[visualization-api] Re: Google visualization dashboard Pie display
Can you post the current version of the code you are using, along with a
sample queryObject I can use to test this?
On Tuesday, August 5, 2014 1:46:15 PM UTC-4, saKw wrote:
Hi Andrew,
When I remove the PieChart from the Dashboard.bind call, i dont see pie
chart image in my page. and also i get an error that says
Invalid column index 2. Should be an integer in the range [0-1].
Thanks
On Friday, August 1, 2014 8:38:08 PM UTC-4, Andrew Gallant wrote:
You need to calculate the data for your PieChart in the ready event
handler for your Table:
google.visualization.events.addListener(table, 'ready', function () {
var newData = table.getDataTable();
var group = google.visualization.data.group(newData, [1] [{
// we need a key column to group on, but since we want all rows
grouped into 1,
// then it needs a constant value
column: 2,
aggregation: google.visualization.data.sum,
type: 'number',
modifier: function () {
return 1;
}
}]);
document.getElementById('avg').innerHTML = group.getValue(0, 1);
var pieData = google.visualization.data.group(newData, [1], [{
column:2,
aggregation: google.visualization.data.sum,
type:'number'
}]);
pie.setDataTable(pieData);
pie.draw();
});
and you need to remove the PieChart from the Dashboard.bind call:
var chart = new
google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker], [table]);
On Friday, August 1, 2014 2:00:19 PM UTC-4, saKw wrote:
https://lh3.googleusercontent.com/-zXeubBSjnX8/U9vVm9YA9TI/IgU/RTFR1mbrvh4/s1600/Capture.PNG
Hi Andrew,
Thanks for your reply.
I tried doing as per your suggestion but not getting the expected result.
I am still getting TYPES repeated for default category picker (in my code
it is All MDNs). I want it to be sum of MINUse group by TYPES.
I am posting my javascript, can you pls take a look and let me know where
I am doing wrong?
In my table *PIN *-mdn, TYPES-category and *MINUse-kbUsage.*
I have attached my pie chart pic. As you can see in the legend the 'Email
messaging' coming multiple times so is the 'Unknown'.
https://lh3.googleusercontent.com/-zXeubBSjnX8/U9vVm9YA9TI/IgU/RTFR1mbrvh4/s1600/Capture.PNG
function drawChart() {
var data = new
google.visualization.DataTable();
data.addColumn('string', 'mdn');
data.addColumn('string', 'category');
data.addColumn('number', 'kbUsage');
//alert(inside drawChart);
for(var i=0;iqueryObjectLen;i++)
{
var category = queryObject.empdetails[i].category;
//alert(category);
var kbUsage = queryObject.empdetails[i].kbUsage;
//alert(kbUsage);
var mdn = queryObject.empdetails[i].mdn;
//alert(mdn);
data.addRows([
[mdn,category,parseInt(kbUsage)]
]);
}
var options = {
title: 'Category Information',
legend: {position: 'right', textStyle:
{color: 'black', fontSize: 9}},
is3D: true,
pieSliceText: 'percentage',
sliceVisibilityThreshold:0,
vAxis: {maxValue: 70},
chartArea: {height: '85%', top: '13%'},
tooltip: { text: 'percentage'},
left:30,top:20,width:100%,height:
100%
/*backgroundColor: {
stroke: 'gray',
strokeWidth: 1
}*/
};
var total = 0;
for (var i = 0; i data.getNumberOfRows();
i++) {
total += data.getValue(i, 2);
}
//alert(total);
var legend = document.getElementById(legend
);
var legItem = [];
var colors = ['#e0440e', '#e6693e', '#ec8f6e',
'#f3b49f', '#f6c7b6', '#f3', '#f6'];
for (var i = 0; i data.getNumberOfRows();
i++) {
var
[visualization-api] Re: Google visualization dashboard Pie display
Code--
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'mdn');
data.addColumn('string', 'category');
data.addColumn('number', 'kbUsage');
//alert(inside drawChart);
for(var i=0;iqueryObjectLen;i++)
{
var category = queryObject.empdetails[i].category;
//alert(category);
var kbUsage = queryObject.empdetails[i].kbUsage;
//alert(kbUsage);
var mdn = queryObject.empdetails[i].mdn;
//alert(mdn);
data.addRows([
[mdn,category,parseInt(kbUsage)]
]);
}
var options = {
title: 'Category Information',
legend: {position: 'right', textStyle: {color: 'black', fontSize: 9}},
is3D: true,
pieSliceText: 'percentage',
sliceVisibilityThreshold:0,
vAxis: {maxValue: 70},
chartArea: {height: '85%', top: '13%'},
tooltip: { text: 'percentage'},
left:30,top:20,width:100%,height:100%
/*backgroundColor: {
stroke: 'gray',
strokeWidth: 1
}*/
};
var total = 0;
for (var i = 0; i data.getNumberOfRows(); i++) {
total += data.getValue(i, 2);
}
//alert(total);
var legend = document.getElementById(legend);
var legItem = [];
var colors = ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6',
'#f3', '#f6'];
for (var i = 0; i data.getNumberOfRows(); i++) {
var label = data.getValue(i, 1);
var value = data.getValue(i, 2);
//alert(value);
var percent = Number(100 * value / total).toFixed(2);
data.setFormattedValue(i, 1, label + ' (' + percent + '%)');
}
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control3',
options: {
filterColumnLabel: 'mdn',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false,
caption : 'All MDNs'
}
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart2',
options: {
width: '500px'
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart1',
options: options,
// Instruct the piechart to use colums 1 (Category) and 2 (KB)
// from the 'data' DataTable.
view: {
columns: [1, 2]
}
});
// get average values
google.visualization.events.addListener( table, 'ready', function () {
var newData = table.getDataTable();
var group = google.visualization.data.group(newData , [1],[{
// we need a key column to group on, but since we want all rows
grouped into 1,
// then it needs a constant value
column: 2,
aggregation: google.visualization.data.sum,
type: 'number',
modifier: function () {
return 1;
}
}]);
//document.getElementById('avg').innerHTML = group.getValue(0, 1);
var pieData = google.visualization.data.group(newData, [1], [{
column:2,
aggregation: google.visualization.data.sum,
type:'number'
}]);
pie.setDataTable(pieData);
pie.draw();
//document.getElementById('geomean').innerHTML = group.getValue(0, 2);
});
//var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
var chart = new
google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker], [table]);
google.visualization.events.addListener(chart, 'error', function (err) {
google.visualization.errors.removeError(err.id);
});
chart.draw(data);
}
var queryObject=;
var queryObjectLen=;
// google.load(visualization, 1, {packages:[corechart]});
google.load('visualization', '1', { 'packages': ['corechart',
'controls']});
$(document).ready(function(){
$(#ajaxform).on('submit', function(e)
{
spinner.spin(target);
$(#contact-submit).prop('disabled', true);
$(#reset).prop('disabled', true);
$(#print).prop('disabled', true);
$(#saveAs).prop('disabled', true);
e.preventDefault();
// getting the values of both firstname and lastname
var beginDate = $('input[name=txtBeginDate]').val();
var endDate = $('input[name=txtEndDate]').val();
// var mdnVal = $('input[name=txtMsid]').val();
var val3gOr4g = $('input:radio[name=3gOr4g]:checked').val();
var midVal= jQuery(textarea#txtMIDID).val();
var DataMid = JSON.stringify({midVal: midVal});
// posting the values
var dataString = 'beginDate=' + beginDate + 'endDate=' + endDate+
'val3gOr4g=' +
