dramatically improve load time of pages containing google charts

This commit is contained in:
Thibault Duplessis 2012-06-14 00:57:12 +02:00
parent 5c8608bef5
commit ffc7d59ed5
6 changed files with 79 additions and 102 deletions

View file

@ -5,9 +5,7 @@
}
@moreJs = {
<script src="http://www.google.com/jsapi"></script>
@jsTag("chart.js")
@jsTag("gamestats.js")
}
@title = @{ "Game #%s time stats" format game.id }

View file

@ -3,13 +3,11 @@
@title = @{ "%s : %s - page %d".format(u.username, filterTitle(info, filters.current), games.currentPage) }
@evenMoreJs = {
<script src="http://www.google.com/jsapi"></script>
@jsTag("chart.js")
@jsTag("user-chart.js")
@if(ctx is u) {
@jsTag("vendor/jquery.editable-set.min.js")
@jsTag("user-edit.js")
}
@jsTag("chart.js")
}
@evenMoreCss = {

View file

@ -1,13 +1,82 @@
if (typeof google.visualization == "undefined" ) {
google.load("visualization", "1", {packages:["corechart"]});
}
function drawCharts() {
google.elemToData = function(elem) {
var data = new google.visualization.DataTable();
$.each($(elem).data('columns'), function() {
data.addColumn(this[0], this[1]);
function elemToData(elem) {
var data = new google.visualization.DataTable();
$.each($(elem).data('columns'), function() {
data.addColumn(this[0], this[1]);
});
data.addRows($(elem).data('rows'));
return data;
}
$('div.elo_history').each(function() {
var data = elemToData(this);
var chart = new google.visualization.ComboChart(this);
chart.draw(data, {
series: [
{ color: "blue", type: "area", lineWidth: 2 },
{ color: "red", type: "line", lineWidth: 2 }
],
width: 460,
height: 340,
axisTitlePosition: 'none',
chartArea:{left:"10%",top:"2%",width:"90%",height:"96%"},
titlePosition: 'none',
hAxis: {textPosition: "none"}
});
});
data.addRows($(elem).data('rows'));
return data;
$('div.win_stats').each(function() {
var data = elemToData(this);
var chart = new google.visualization.PieChart(this);
chart.draw(data, {
width: 312,
height: 200,
titlePosition: 'none',
chartArea:{left:"0%",width:"100%",height:"100%"},
is3D: true,
});
});
$('div.elo_distribution').each(function() {
var data = elemToData(this);
var chart = new google.visualization.ScatterChart(this);
chart.draw(data, {
width: 747,
height: 500,
//axisTitlePosition: 'none',
chartArea:{left:"5%",top:"3%",width:"78%",height:"92%"},
title: $(this).attr('title'),
titlePosition: 'in',
pointSize: 3,
});
});
$('div.end_distribution').each(function() {
var data = elemToData(this);
var chart = new google.visualization.PieChart(this);
chart.draw(data, {
width: 747,
height: 500,
chartArea:{left:"0%",top:"5%",width:"100%",height:"95%"},
is3D: true,
title: $(this).attr('title'),
});
});
$('div.move-time').each(function() {
var data = elemToData(this);
var chart = new google.visualization.AreaChart(this);
chart.draw(data, {
width: 747,
height: 400,
title: $(this).data('title'),
chartArea:{left:"5%",top:"5%",width:"78%",height:"90%"}
});
});
}
$(function() {
$.getScript('https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart"],"callback":"drawCharts"}]}');
});

View file

@ -1,25 +0,0 @@
google.setOnLoadCallback(function() {
$('div.move-time').each(function() {
var data = google.elemToData(this);
var chart = new google.visualization.AreaChart(this);
chart.draw(data, {
width: 747,
height: 400,
title: $(this).data('title'),
chartArea:{left:"5%",top:"5%",width:"78%",height:"90%"}
});
});
$('div.move-time-distribution').each(function() {
var data = google.elemToData(this);
var chart = new google.visualization.PieChart(this);
chart.draw(data, {
width: 747,
height: 300,
title: $(this).data('title'),
chartArea:{left:"0%",top:"8%",width:"100%",height:"92%"},
is3D: false
});
});
});

View file

@ -1,61 +0,0 @@
google.setOnLoadCallback(function() {
setTimeout(function() {
$('div.elo_history').each(function() {
var data = google.elemToData(this);
var chart = new google.visualization.ComboChart(this);
chart.draw(data, {
series: [
{ color: "blue", type: "area", lineWidth: 2 },
{ color: "red", type: "line", lineWidth: 2 }
],
width: 460,
height: 340,
axisTitlePosition: 'none',
chartArea:{left:"10%",top:"2%",width:"90%",height:"96%"},
titlePosition: 'none',
hAxis: {textPosition: "none"}
});
});
$('div.win_stats').each(function() {
var data = google.elemToData(this);
var chart = new google.visualization.PieChart(this);
chart.draw(data, {
width: 312,
height: 200,
titlePosition: 'none',
chartArea:{left:"0%",width:"100%",height:"100%"},
is3D: true,
});
});
$('div.elo_distribution').each(function() {
var data = google.elemToData(this);
var chart = new google.visualization.ScatterChart(this);
chart.draw(data, {
width: 747,
height: 500,
//axisTitlePosition: 'none',
chartArea:{left:"5%",top:"3%",width:"78%",height:"92%"},
title: $(this).attr('title'),
titlePosition: 'in',
pointSize: 3,
});
});
$('div.end_distribution').each(function() {
var data = google.elemToData(this);
var chart = new google.visualization.PieChart(this);
chart.draw(data, {
width: 747,
height: 500,
chartArea:{left:"0%",top:"5%",width:"100%",height:"95%"},
is3D: true,
title: $(this).attr('title'),
});
});
}, 500);
});

2
todo
View file

@ -22,8 +22,6 @@ autoclose top menus
tournaments http://www.chess.com/tournaments/help.html
fix game list translations
temporary mod IP ban to help stopping cheaters
join game as player from player page
load graphs later
new translations:
-rematchOfferCanceled=Rematch offer canceled