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;i<queryObjectLen;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',
'#f3aaaa', '#f6cccc'];
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=' + val3gOr4g+'&DataMid=' + DataMid;
//alert(dataString)
var formURL = $(this).attr("action");
//alert(formURL);
$.ajax(
{
url : formURL,
dataType:'json',
data: dataString,
success:function(data){
queryObject = eval('(' + JSON.stringify(data) + ')');
queryObjectLen = queryObject.empdetails.length;
//alert("here");
drawChart();
//ajaxindicatorstop();
spinner.stop();
document.getElementById("label").style.display = "inline";
$("#contact-submit").prop('disabled', false);
$("#reset").prop('disabled', false);
$("#print").prop('disabled', false);
$("#saveAs").prop('disabled', false);
},
error : function(data, xhr, type) {
var msg = data.responseText;
//alert($.trim(msg))
//ajaxindicatorstop();
spinner.stop();
$("#contact-submit").prop('disabled', false);
$("#reset").prop('disabled', false);
$("#print").prop('disabled', false);
$("#saveAs").prop('disabled', false);
}
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
});
});
---------------------------------------------------------------------------------------------------
HTML:
<div id="dashboard">
<table>
<tbody>
<tr style="vertical-align: top;">
<td style="width: 300px; font-size: 0.9em;">
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
<td style="width: 600px;">
<div style="float: left;display: none;"
id="chart2"></div>
<div style="float: left;" id="chart1"></div>
</td>
</tr>
</tbody>
</table>
<span id="label">Total KB: </span><span id="avg"></span><br/>
</div>
-----------------------------------
I am using Json, i guess queryObject maens the json output. Please let me
know if I am wrong.
{"empdetails":[{"category":"Unknown","kbUsage":22639,"mdn":"7705005996"},{"category":"Email
&
messaging","kbUsage":19371,"mdn":"7705005996"},{"category":"Social","kbUsage":8196,"mdn":"7705005996"},{"category":"Cloud/file
sharing","kbUsage":3961,"mdn":"7705005996"},{"category":"Uncategorized","kbUsage":2705,"mdn":"7705005996"},{"category":"Downloads
& Marketplaces","kbUsage":2525,"mdn":"7705005996"},{"category":"Web &
Apps","kbUsage":512,"mdn":"7705005996"},{"category":"Maps &
Navigation","kbUsage":64,"mdn":"7705005996"},{"category":"Communication and
Device Services","kbUsage":10,"mdn":"7705005996"}]}
Thanks
On Tuesday, August 5, 2014 7:18:00 PM UTC-4, Andrew Gallant wrote:
> 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/AAAAAAAAIgU/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/AAAAAAAAIgU/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;i<queryObjectLen;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', '#f3aaaa', '#f6cccc'];
>>
>> 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',
>>
>> &nbs
>>
>> ...
>
>
--
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.
