Skip to content

Instantly share code, notes, and snippets.

@holysugar
Created April 26, 2011 13:39
Show Gist options
  • Save holysugar/942276 to your computer and use it in GitHub Desktop.
Save holysugar/942276 to your computer and use it in GitHub Desktop.
convert table.chart to chart image by google (in prototype)
window.onload = function(){
function Chart(table_elem, size, type) {
this.dom = table_elem;
this.size = size;
this.type = type
this.calc();
}
Chart.prototype.rangechars = [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
];
Chart.prototype.colors = ["FF0000", "00FF00", "0000FF", "FFFF00", "FF00FF", "00FFFF",
"800000", "008000", "000080", "808000", "800080", "008080"];
Chart.prototype.trs = function() {
return this.dom.getElementsByTagName('tr');
}
Chart.prototype.head = function() {
return this.rows(0);
}
Chart.prototype.rows = function(index) {
var tr = this.trs()[index];
var tds = tr.children;
var arr = [];
for (var i = 0, len = tds.length; i < len; i++) {
arr.push(tds[i]);
}
return arr;
}
Chart.prototype.row_length = function() {
return this.trs().length;
}
Chart.prototype.col_length = function() {
return this.head().length;
}
Chart.prototype.lines_length = function() {
return this.col_length() - 1;
}
Chart.prototype.calc = function() {
if (this.data && this.data[0]) return this.data;
this.data = [];
for (var i = 1, len = this.row_length(); i < len; i++) {
var r = this.rows(i);
for (var j = 0, len2 = r.length; j < len2; j++) {
if (!this.data[j]) this.data[j] = [];
this.data[j].push(r[j].innerHTML.trim());
}
}
return this.data;
}
Chart.prototype.max = function(line) {
// TODO: cache
return Math.max.apply(null, this.data[line+1]);
}
Chart.prototype.min = function(line) {
// TODO: cache
return Math.min.apply(null, this.data[line+1]);
}
Chart.prototype.yrange = function(line) {
var margin = 0.1;
var min = this.min(line);
var max = this.max(line);
var sub = max - min;
return [line+1, min - sub*margin, max + sub*margin];
}
Chart.prototype.encode_unit = function(line) {
var maxes = this.yrange(line);
return (maxes[2] - maxes[1]) / 62;
}
Chart.prototype.encode_value = function(value, unit, min) {
return Math.round((value - min)/unit);
}
Chart.prototype.encode = function(line) {
var unit = this.encode_unit(line);
var min = this.yrange(line)[1];
var d = this.data[line+1];
var result = this.data[line+1].map(function(x){return this.rangechars[this.encode_value(x, unit, min)]}, this);
return result.join("");
}
Chart.prototype.chtt = function() {
return encodeURIComponent(this.head()[0].innerHTML);
}
Chart.prototype.chdl = function() {
return this.head().slice(1).map(function(x){return x.innerHTML}).join("|")
}
Chart.prototype.chco = function() {
var num = this.lines_length();
return this.colors.slice(0, num).join(",")
}
Chart.prototype.chxs = function() {
var num = this.lines_length();
var tmp = [];
for (var i = 0; i < num; i++) {
tmp.push([i+1, this.colors[i]].join(","))
}
return tmp.join("|");
}
Chart.prototype.chxr = function() {
var tmp = [];
for (var i = 0, l = this.lines_length(); i < l; i++) {
tmp.push(this.yrange(i).join(","));
}
return tmp.join("|");
}
Chart.prototype.chxl = function() {
return "0:|" + this.data[0].join("|");
}
Chart.prototype.chxt = function() {
var num = this.lines_length();
var tmp = [];
for (var i = 0; i < num; i++) tmp.push("y");
return "x," + tmp.join(",")
}
Chart.prototype.chd = function() {
var tmp = [];
for (var i = 0, l = this.lines_length(); i < l; i++) {
tmp.push(this.encode(i));
}
return "s:" + tmp.join(",");
}
Chart.prototype.query = function() {
return [
"chs=" +(this.size||"960x240"),
"cht=" +(this.type||"lc"),
"chtt="+this.chtt(),
"chco="+this.chco(),
"chdl="+this.chdl(),
"chxr="+this.chxr(),
"chxt="+this.chxt(),
"chxs="+this.chxs(),
"chxl="+this.chxl(),
"chd=" +this.chd()
].join("&");
}
Chart.prototype.url = function() {
this.calc();
return "http://chart.apis.google.com/chart?" + this.query();
}
// exec
var charts = document.getElementsByClassName('chart');
for (var i = 0, len = charts.length; i < len; i++) {
var c = charts[i];
var chart = new Chart(c);
var img = document.createElement('img');
img.src = chart.url();
c.parentNode.insertBefore(img, c.nextSibling);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment