dramatically improve load time of pages containing google charts
This commit is contained in:
parent
5c8608bef5
commit
ffc7d59ed5
|
@ -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 }
|
||||
|
|
|
@ -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 = {
|
||||
|
|
|
@ -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"}]}');
|
||||
});
|
||||
|
|
|
@ -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
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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
2
todo
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue