"
Template:GraphHeader/GraphCreator.js
From 2009.igem.org
var loaded = 0;
function onLoadCallback() {
loaded++;
if (loaded==2) {
loadGraphs();
}
}
google.load('visualization', '1', {}); google.setOnLoadCallback(onLoadCallback);
dojo.require("dojox.charting.Chart2D"); dojo.require("dojox.charting.widget.Legend"); dojo.addOnLoad(onLoadCallback);
function loadGraphs() {
var graphs = dojo.query('.graph');
for(var g=0; g<graphs.length; g++) {
loadGraph(graphs[g]);
}
}
function loadGraph(graph) {
var links = dojo.query('a',graph);
if (links.length!=1) return; // TODO: Nicer error handling?
dojo.xhrGet( {
url: links[0].href.replace(/\#.*/,),
content: {action: 'raw', templates: 'expand'},
preventCache: true,
handleAs: "json",
load: function(responseObject, ioArgs) {
createGraph(graph, responseObject);
},
error: function(responseObject, ioArgs) {
graph.innerHTML = ;
graph.appendChild(document.createTextNode('Error loading '));
graph.appendChild(links[0]);
graph.appendChild(document.createTextNode('!'));
graph.appendChild(document.createElement('br'));
graph.appendChild(document.createTextNode(responseObject.message));
}
});
}
function createGraph(graph, desc) {
// Some layout stuff graph.innerHTML = ;
// Create div's for graph
var chartDiv = document.createElement('div');
chartDiv.style.textAlign = 'left';
chartDiv.style.width = desc.width;
chartDiv.style.height = desc.height;
graph.appendChild(chartDiv);
graph.style.width = chartDiv.style.width;
var legendCenter = document.createElement('center');
graph.appendChild(legendCenter);
var legendDiv = document.createElement('div');
legendCenter.appendChild(legendDiv);
// Create chart and legend
var chart = new dojox.charting.Chart2D(chartDiv);
for(var a in desc.axes) {
chart.addAxis(a, desc.axes[a]);
}
for(var p in desc.plots) {
chart.addPlot(p, desc.plots[p]);
}
chart./*addPlot("default", {
type: "Pie",
font: "normal normal 11pt Tahoma",
fontColor: "black",
labelOffset: -30,
radius: 80
}).*/addSeries("Series A", [
{y: 4, text: "Red", stroke: "black", tooltip: "Red is 50%"},
{y: 2, text: "Green", stroke: "black", tooltip: "Green is 25%"},
{y: 1, text: "Blue", stroke: "black", tooltip: "I am feeling Blue!"},
{y: 1, text: "Other", stroke: "black", tooltip: "Mighty strong
With two lines!"}
]);
chart.render();
var legend = new dojox.charting.widget.Legend({chart: chart}, legendDiv);
// Query spreadsheet and let result be drawn
//var query = new google.visualization.Query(desc.datasource);
//query.send(function(response){drawGraph(desc,chart,legend,response);});
}
function drawGraph(desc,chart,legend,response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var series = dojoSeriesFromDataTable(data,desc.series);
for(var i=0; i<series.length; i++) {
chart.addSeries(series[i].title, series[i].data, series[i].args);
}
chart.render();
for(var a in desc.axes) { // This works around axis titles not being supported!!!
if (desc.axes[a].title!=undefined) setAxisTitle(chart, a, desc.axes[a].title, 10);
}
legend.refresh();
}
function dojoSeriesFromDataTable(dataTable,series) {
var dojoSeriesArray = [];
for(var s=0; s<series.length; s++) {
var xc = series[s].x, yc = series[s].y, textc = series[s].text, colorc = series[s].color, fontcolorc = series[s].fontColor;
var dojoSeries = [];
if (xc==undefined && textc==undefined && colorc==undefined && fontcolorc==undefined) {
// Just an ordinary list of values
for(var r=0; r<dataTable.getNumberOfRows(); r++) {
dojoSeries.push(dataTable.getValue(r,yc));
}
} else {
// An object
for(var r=0; r<dataTable.getNumberOfRows(); r++) {
var v = {y: dataTable.getValue(r,yc)};
if (xc!=undefined) v['x'] = dataTable.getValue(r,xc);
if (textc!=undefined) v['text'] = dataTable.getValue(r,textc);
if (colorc!=undefined) v['color'] = dataTable.getValue(r,colorc);
if (fontcolorc!=undefined) v['fontColor'] = dataTable.getValue(r,fontcolorc);
dojoSeries.push(v);
}
}
dojoSeriesArray.push({title: series[s].title===undefined ?
dataTable.getColumnLabel(yc) : series[s].title,
data: dojoSeries,
args: getSeriesArgs(series[s])});
}
return dojoSeriesArray;
}
function getSeriesArgs(series) {
var args = {};
for(var p in series) {
if (p=='title' || p=='x' || p=='y' || p=='text' || p=='color' || p=='fontColor') continue;
args[p] = series[p];
}
return args;
}
// Code from http://trac.dojotoolkit.org/ticket/7746 var setAxisTitle=function(chart, axisname, title, fontsizept) {
var axis = chart.axes[axisname];
var dim = chart.dim;
var offsets=chart.offsets;
var ta = chart.theme.axis;
var taFont = "font" in axis.opt ? axis.opt.font : ta.font;
var x;
var y;
var label;
var rotate=0;
if(axis.vertical) {
rotate=270
label = title;
y=dim.height/2 - offsets.b/2;
x=0+2*fontsizept;
} else {
label = title;
x=dim.width/2 + offsets.l/2;
y=dim.height-fontsizept/2;
}
var m = dojox.gfx.matrix;
var elem = axis.group.createText({x:x, y:y, text:label, align: "middle"});
elem.setFont({family:taFont.family, size: fontsizept+"pt", weight: "bold"});
elem.setFill('grey');
elem.setTransform(m.rotategAt(rotate, x,y));
}
