Help with Dashboard.

Sandeep Ambekar

unread,

Nov 18, 2013, 1:36:50 PM11/18/13

to google-visua...@googlegroups.com

I am trying to create a dashboard with Columncharts. Out put is attached.

I am want to add additional controller that control the no of bars I see... for example.. I want to see Columncharts for just month of Jan, Feb, Mar.

below is the data table format I have.

var data = google.visualization.arrayToDataTable([

['Manager', 'JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],

[ABC',97,88,85,49,80,34,45,42,29,0,0,0],

['EFG',439,295,262,194,216,315,289,259,183,0,0,0],

['IJK',18,6,16,7,11,9,11,9,6,0,0,0],

['lmn',23,7,8,7,6,11,11,6,3,0,0,0],

['OPQ',13,9,6,7,6,8,12,7,13,0,0,0],

['RST,16,7,16,7,12,9,3,7,4,0,0,0],

['UVW',0,0,50,60,49,24,33,0,0,0,0,0],

['XYZ',189,121,20,33,50,32,30,59,54,0,0,0],

['ACD',388,377,343,421,415,405,478,355,422,0,0,0],

['WER',60,46,27,19,30,25,21,18,28,0,0,0]

]);

I really dont find any dashboard options suitable in here... please suggest.

11-18-2013 11-59-12 PM.png

asgallant

unread,

Nov 18, 2013, 1:39:44 PM11/18/13

to google-visua...@googlegroups.com

I wrote a hack that turns the CategoryFilter control into a column selector: http://jsfiddle.net/asgallant/WaUu2/

Sandeep Ambekar

unread,

Nov 18, 2013, 2:30:03 PM11/18/13

to google-visua...@googlegroups.com

Hi,

That solves half my work. But how do i use Bind. Here I am looking to add additional controlwrapper (StringFilter). how to do that?

asgallant

unread,

Nov 18, 2013, 3:04:37 PM11/18/13

to google-visua...@googlegroups.com

You can add a StringFilter control as normal. Just remember to leave the CategoryFilter for selecting the columns out of your Dashboard object's bind statements. I made up an example that is similar to what you are doing: http://jsfiddle.net/asgallant/WaUu2/173/

Sandeep Ambekar

unread,

Nov 19, 2013, 2:20:05 AM11/19/13

to google-visua...@googlegroups.com

asgallant,

Your example really helped. However,, it does not work for IE browser.

I get following error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MS-RTC LM 8; .NET4.0C; .NET4.0E; InfoPath.3)

Timestamp: Tue, 19 Nov 2013 07:15:49 UTC

Message: Object doesn't support this property or method

Line: 73

Char: 5

Code: 0

URI: file:///C:/My%20Stuff/GoogleCharts/DB/IMDashBoardV6.html

It errors at following line

var dashboard = new google.visualization.Dashboard(document.querySelector('#IMdashboardMgr'));

Any tweak for it???

Sandy

unread,

Nov 19, 2013, 4:14:46 AM11/19/13

to google-visua...@googlegroups.com

Hey.. I just figured it out.. thanks for your help..

--
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/1GS5fb3HxwY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

asgallant

unread,

Nov 19, 2013, 11:00:49 AM11/19/13

to google-visua...@googlegroups.com

That should work in IE8, as long as you are in IE8 standards mode. If you are in compatibility mode, it won't work (as IE7 does not support the querySelector method).

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

SAP

unread,

Dec 8, 2013, 3:25:23 AM12/8/13

to google-visua...@googlegroups.com

I guess IE is still haunting me... the below code worked for a while on IE 8, but now it isnt. I checked datatable and found no issues too. Any suggstions?

Error:

SR count v/s Manager

(Last Updated on December 07 2013 08:37:50.)

One or more participants failed to draw()×

Manager

Object doesn't support this property or method×

SR count v/s SMS Group

(Last Updated on December 07 2013 08:37:51.)

One or more participants failed to draw()×

SMS GROUP

Object doesn't support this property or method×

<html>

<head>

<body>

//alert("SR_MANAGER.txt");

//alert("SR");

// Load the Visualization API and the controls package.

google.load('visualization', '1.0', {'packages':['controls']});

// Set a callback to run when the Google Visualization API is loaded.

google.setOnLoadCallback(drawDashboard);

// Callback that creates and populates a data table,

// instantiates a dashboard, a range slider and a pie chart,

// passes in the data and draws it.

function drawDashboard() {

// Create our data table.

var data = google.visualization.arrayToDataTable([

]);

data.setColumnProperty(2, 'role', 'tooltip');

data.setColumnProperty(4, 'role', 'tooltip');

data.setColumnProperty(6, 'role', 'tooltip');

data.setColumnProperty(8, 'role', 'tooltip');

data.setColumnProperty(10, 'role', 'tooltip');

var dashboard = new google.visualization.Dashboard(

document.getElementById('dashboard_div'));

// Create a range slider, passing some options

var donutRangeSlider = new google.visualization.ControlWrapper({

'controlType': 'StringFilter',

'containerId': 'filter_div',

'options': {

'filterColumnLabel': 'Manager'

}

});

// Create a pie chart, passing some options

var pieChart = new google.visualization.ChartWrapper({

'chartType': 'ColumnChart',

'containerId': 'chart_div',

'options': {

'width': 1300,

'height': 400,

'title': 'SR counts per Manager',

'hAxis': {title: 'Managers', titleTextStyle: {color: 'Black'}},

'vAxis': {

'title': 'SR counts',

'titleTextStyle': {color: 'Black'}

}

});

dashboard.bind(donutRangeSlider, pieChart);

dashboard.draw(data);

var grpoupData = google.visualization.arrayToDataTable([

["SMS GROUP","Q4-2012","tool5","Q1-2013","tool4","Q2-2013","tool3","Q3-2013","tool2","Q4-2013","tool1"],["appaceps",0,"N/A",0,"N/A",0,"N/A",0,"N/A",6,"P3 - 6"],["appaprps",0,"N/A",0,"N/A",13,"P3 - 13",69,"P3 - 69",40,"P3 - 40"],["appaprsa",37,"P3 - 37",55,"P3 - 55",19,"P3 - 19",20,"P3 - 20",3,"P3 - 3"],["appcbsps",87,"P3 - 87",112,"P3 - 112",92,"P3 - 92",163,"P3 - 163",76,"P3 - 76"],["appccmscrdbps",42,"P3 - 42",46,"P3 - 46",45,"P3 - 45",63,"P3 - 63",31,"P3 - 31"],["appcleops",18,"P3 - 18",15,"P3 - 15",11,"P3 - 11",4,"P3 - 4",3,"P3 - 3"],["appcollectionsps",172,"P3 - 172",154,"P3 - 154",183,"P3 - 183",112,"P3 - 112",153,"P3 - 153"],["appcrdbps",113,"P3 - 113",128,"P3 - 128",111,"P3 - 111",111,"P3 - 111",72,"P3 - 72"],["appcmpymsexchangeps",699,"P3 - 699",971,"P3 - 971",1030,"P3 - 1030",802,"P3 - 802",431,"P3 - 431"],["appcmpyportalps",2,"P3 - 2",3,"P3 - 3",0,"N/A",1,"P3 - 1",1,"P3 - 1"],["appdsps",26,"P3 - 26",21,"P3 - 21",18,"P3 - 18",19,"P3 - 19",30,"P3 - 30"],["appedwps",52,"P3 - 52",50,"P3 - 50",39,"P3 - 39",1,"P3 - 1",0,"N/A"],["appestartps",284,"P3 - 284",349,"P3 - 349",304,"P3 - 304",356,"P3 - 356",275,"P3 - 275"],["appextensityps",81,"P3 - 81",81,"P3 - 81",66,"P3 - 66",49,"P3 - 49",19,"P3 - 19"],["appiexps",108,"P3 - 108",189,"P3 - 189",237,"P3 - 237",246,"P3 - 246",199,"P3 - 199"],["appiexsa",0,"N/A",0,"N/A",0,"N/A",1,"P3 - 1",1,"P3 - 1"],["appimdsps",0,"N/A",0,"N/A",39,"P3 - 39",60,"P3 - 60",40,"P3 - 40"],["appknowlagentps",57,"P3 - 57",64,"P3 - 64",69,"P3 - 69",35,"P3 - 35",33,"P3 - 33"],["apprightfaxps",88,"P3 - 88",34,"P3 - 34",76,"P3 - 76",85,"P3 - 85",122,"P3 - 122"],["appsharepointps",0,"N/A",1,"P3 - 1",0,"N/A",0,"N/A",0,"N/A"],["appsiebelps",0,"N/A",0,"N/A",1,"P3 - 1",0,"N/A",0,"N/A"],["appsmdrps",3,"P3 - 3",3,"P3 - 3",5,"P3 - 5",1,"P3 - 1",4,"P3 - 4"],["appsmsps",16,"P4 - 3 | P3 - 13",26,"P3 - 26",15,"P3 - 15",16,"P3 - 16",8,"P3 - 7 | P4 - 1"],["apptksps",146,"P3 - 146",215,"P3 - 215",280,"P3 - 280",235,"P3 - 235",174,"P3 - 174"],["appudutups",8,"P3 - 8",13,"P3 - 13",6,"P3 - 6",4,"P3 - 4",3,"P3 - 3"],["appwmsps",120,"P3 - 120",94,"P3 - 94",100,"P3 - 100",56,"P3 - 56",37,"P3 - 37"],["appxapps",0,"N/A",1,"P3 - 1",0,"N/A",0,"N/A",0,"N/A"],["dbacmgt3",11,"P3 - 11",15,"P3 - 15",12,"P3 - 12",4,"P3 - 4",2,"P3 - 2"],["dbacorpt3",35,"P3 - 35",47,"P3 - 47",29,"P4 - 1 | P3 - 28",30,"P3 - 30",13,"P3 - 13"],["dbasqlservert3",2,"P3 - 2",10,"P3 - 10",2,"P3 - 2",7,"P3 - 7",4,"P3 - 4"],["sacmgt3",0,"N/A",1,"P3 - 1",2,"P3 - 2",1,"P3 - 1",1,"P3 - 1"],["sacorpt3",3,"P3 - 3",0,"N/A",2,"P3 - 2",0,"N/A",1,"P3 - 1"]

]);

grpoupData.setColumnProperty(2, 'role', 'tooltip');

grpoupData.setColumnProperty(4, 'role', 'tooltip');

grpoupData.setColumnProperty(6, 'role', 'tooltip');

grpoupData.setColumnProperty(8, 'role', 'tooltip');

grpoupData.setColumnProperty(10, 'role', 'tooltip');

// Create a dashboard.

var dashboard1 = new google.visualization.Dashboard(

document.getElementById('dashboard_div1'));

var donutRangeSlider1 = new google.visualization.ControlWrapper({

'controlType': 'StringFilter',

'containerId': 'filter_div1',

'options': {

'filterColumnLabel': 'SMS GROUP'

}

});

var pieChart1 = new google.visualization.ChartWrapper({

'chartType': 'ColumnChart',

'containerId': 'chart_div1',

'options': {

'width': 1300,

'height': 400,

'title': 'SR counts per SMS group',

'hAxis': {title: 'SMS GROUP', titleTextStyle: {color: 'Black'}},

'vAxis': {

'title': 'SR counts',

'titleTextStyle': {color: 'Black'}

}

});

// Establish dependencies, declaring that 'filter' drives 'pieChart',

// so that the pie chart will only display entries that are let through

// given the chosen slider range.

dashboard1.bind(donutRangeSlider1, pieChart1);

// Draw the dashboard.

dashboard1.draw(grpoupData);

}

</script>

<tr>

<h2><a href="http://cdcalv17.na.convergys.com/~sprahala/IMDashBoardV2.php?smtype=IM">Incidents</a></h2>

</td>

<h2><a href="http://cdcalv17.na.convergys.com/~sprahala/IMDashBoardV2.php?smtype=SR">Service Request</a></h2>

</td>

</tr>

</table>

<table>

<tr>

<b>SR count v/s Manager</b>

</td>

<td align="Center"><p><i>(Last Updated on December 07 2013 08:37:50.)</i></p>

</td>

</tr>

</table>

<table>

<tr>

<b>SR count v/s SMS Group</b>

</td>

<td align="Center"><p><i>(Last Updated on December 07 2013 08:37:51.)</i></p>

</td>

</tr>

</table>

</div>

</body>

</head>

</html>

asgallant

unread,

Dec 8, 2013, 10:57:00 AM12/8/13

to google-visua...@googlegroups.com

Your HTML is invalid: <body> is not allowed to be a child element of <head> (both should be children of <html>) and you are missing a closing </div> tag for <div id="dashboard_div">. Also, to make the charts work in IE8, you require a <!DOCTYPE> declaration (<!DOCTYPE html> should be sufficient). Fix those issues first and then see if that fixes your problem in IE8.

Sandy

unread,

Dec 8, 2013, 11:58:10 AM12/8/13

to google-visua...@googlegroups.com

OK, I would give it a try. Will keep you posted. Thanks for your tips! As always, Savior!!

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

Reply all

Reply to author

Forward