Template:GraphHeader/GraphCreator.js
From 2009.igem.org
(Difference between revisions)
m |
m |
||
Line 67: | Line 67: | ||
var size = dojo.marginBox(chartDiv); | var size = dojo.marginBox(chartDiv); | ||
var ratio = size.w/size.h; | var ratio = size.w/size.h; | ||
- | alert( | + | alert("size="+size.w+","+size.h); |
} else if (autoHeight) { | } else if (autoHeight) { | ||
chartDiv.style.width = desc.width; | chartDiv.style.width = desc.width; | ||
Line 73: | Line 73: | ||
var size = dojo.marginBox(chartDiv); | var size = dojo.marginBox(chartDiv); | ||
var ratio = size.h/size.w; | var ratio = size.h/size.w; | ||
- | alert( | + | alert("size="+size.w+","+size.h); |
} else { | } else { | ||
chartDiv.style.width = graph.style.width; | chartDiv.style.width = graph.style.width; |
Revision as of 08:57, 25 June 2009
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'); var autoWidth = graph.style.width ===undefined || graph.style.width ===null || graph.style.width ==0 || graph.style.width == || graph.style.width =='auto'; var autoHeight = graph.style.height===undefined || graph.style.height===null || graph.style.height==0 || graph.style.height== || graph.style.height=='auto'; alert("autoWidth="+autoWidth+", autoHeight="+autoHeight); if (autoWidth && autoHeight) { chartDiv.style.width = desc.width; chartDiv.style.height = desc.height; } else if (autoWidth) { chartDiv.style.width = desc.width; chartDiv.style.height = desc.height; var size = dojo.marginBox(chartDiv); var ratio = size.w/size.h; alert("size="+size.w+","+size.h); } else if (autoHeight) { chartDiv.style.width = desc.width; chartDiv.style.height = desc.height; var size = dojo.marginBox(chartDiv); var ratio = size.h/size.w; alert("size="+size.w+","+size.h); } else { chartDiv.style.width = graph.style.width; chartDiv.style.height = graph.style.height; } graph.style.width = chartDiv.style.width; graph.style.height = 'auto'; // The legend may take extra space. chartDiv.style.textAlign = 'left'; graph.appendChild(chartDiv);
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]); } 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));
}