Can anyone help with my code for multiple visualations?

35 views
Skip to first unread message

Meyor8 Meyor

unread,
Feb 10, 2012, 11:19:03 AM2/10/12
to Google Visualization API
The code below displays 2 charts but with the exact information.

How do I modify it so that it takes information from separate list
views. I am a complete novice so need explicit instructions.

<table cellpadding="0" cellspacing="0">
<tr>
<td id="Chart1"></td>
<td id="Chart2"></td>
</tr>
<tr>
<td id="Chart3"></td>
<td id="Chart4"></td>
<td id="Chart5"></td>


</tr>
</table>

<script type="text/javascript">
/*****************************************************
Address all containers
*****************************************************/
// All charts must be represented by a container with a unique id.
This container must be present in the page

arrOfChartContainers =
["Chart_div","Chart1","Chart2","Chart3",”chart4”];
</script>


<SCRIPT type=text/javascript>
if(typeof jQuery=="undefined")
{
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/";
document.write("<script src='",jQPath,"jquery.js' type='text/
javascript'><\/script>");
}
</SCRIPT>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

<SCRIPT type=text/javascript>
var ColValue = new Array();
var ColName = new Array();

// Getting the Data
$("document").ready(function(){
var arrayList=$("td.ms-gb:contains('Action With')");
var coord= new Array();
var labels= new Array();
$.each(arrayList, function(i,e)
{
var MyIf= $(e).text();
var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1);
// Extract the 'Y' coordinates
coord[i]=txt;
var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1);
// Extract the labels
labels[i]=txt1+"("+txt+")";
//add also coordinates for better read
});
ColValue = coord;
ColName = labels;
});
//Graph Rendering
google.load("visualization", "1", {packages:["columnchart"]});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Actions');
data.addColumn('number', 'Actions');
data.addRows(ColValue.length);
for (i=0; i<ColValue.length; i++)
{
data.setValue(i, 0, ColName[i]);
data.setValue(i, 1, parseInt(ColValue[i]));
}
var chart = new
google.visualization.ColumnChart(document.getElementById('chart1'));
chart.draw(data, {width: 600, height: 240, is3D: true, title: 'Open
Actions by Team member'});
}
</script>
<div id="chart_div" align="Left"></div>

<SCRIPT type=text/javascript>
var ColValue = new Array();
var ColName = new Array();

// Getting the Data
$("document").ready(function(){
var arrayList=$("td.ms-gb:contains('Status')");
var coord= new Array();
var labels= new Array();
$.each(arrayList, function(i,e)
{
var MyIf= $(e).text();
var txt= MyIf.substring(MyIf.indexOf('(')+1,MyIf.length-1);
// Extract the 'Y' coordinates
coord[i]=txt;
var txt1= MyIf.substring(MyIf.indexOf(':')+2,MyIf.indexOf("(")-1);
// Extract the labels
labels[i]=txt1+"("+txt+")";
//add also coordinates for better read
});
ColValue = coord;
ColName = labels;
});
//Graph Rendering
google.load("visualization", "1", {packages:["PieChart"]});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Actions');
data.addColumn('number', 'Actions');
data.addRows(ColValue.length);
for (i=0; i<ColValue.length; i++)
{
data.setValue(i, 0, ColName[i]);
data.setValue(i, 1, parseInt(ColValue[i]));
}
var chart = new
google.visualization.PieChart(document.getElementById('chart2'));
chart.draw(data, {width: 600, height: 240, is3D: true, title:
'Actions by Status'});
}
</script>

asgallant

unread,
Feb 13, 2012, 9:40:25 AM2/13/12
to google-visua...@googlegroups.com
I moved all the data collection and chart drawing into a single function that is triggered by google.setOnLoadCallback, which avoids possible synchronization issues (where the callback function is called before the document's 'ready' event fires).  See the example code here: http://jsfiddle.net/MtcH4/

This is a pretty rough reworking of the code that can easily be refined and condensed (ie, input data directly into the DataTables without going through the intermediary ColName and ColValue arrays), but it should be enough to get you started.
Reply all
Reply to author
Forward
0 new messages