player.setNavigationCallback = ( function() {
var MHE_graph,
data,
index,
userInfobox,
select = $("#graph-select"),
select_val = $(select).val();
$.ajax({
url: 'asset/conv_energy_assignment/index.json',
cache: false,
dataType: 'json'
}).done(
function (res) {
// data for our graph
data = res;
// Initialize our graph field
MHE_graph = new Graph();
window.MHE_graph = MHE_graph;
}
).fail(
function () {
throw new Error('Loading was failed');
}
);
//fix position:fixed for select scrolled
var is_ios = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
if(is_ios)
{
var el = $("#data-visualization-activities");
$(el).css("position", "absolute");
$(document).bind("scroll", function() {
var elTop = $(document).scrollTop();
var timerId = setTimeout(function() {
$(el).css("margin-top", elTop);
clearTimeout(timerId);
}, 500);
});
};
var
view = 'desktop',
lastView = 'desktop';
// Parameters for graph elements
var
Y_LINE_PARAMS = {
fixed: true,
straightFirst: false,
strokeColor: 'black',
strokeWidth: 2,
highlight: false
},
X_LINE_PARAMS = {
fixed: true,
straightFirst: false,
strokeColor: 'black',
strokeWidth: 2,
highlight: false,
drawZero: true
},
POINTS_PARAMS = {
needsRegularUpdate: false,
withLabel: false,
fixed: true,
infoboxDigits: 'none',
size: 1,
showInfoBox: false,
strokeWidth:0,
highlightStrokeColor:"#ccc",
highlightFillColor:"#ccc",
},
CURVE_PARAMS = {
needsRegularUpdate: false,
showCopyright: false,
showNavigation: true,
strokeWidth:3,
highlightStrokeColor: "#ccc",
pan: {
enabled: false
}
},
GRAPH_PARAMS = {
showCopyright: false,
showNavigation: true
},
Y_TICKS_PARAMS = {
fixed: true,
opacity: 1,
minorTicks: 0,
drawLabels: true,
majorHeight: 10000,
label: {
highlightCssClass: 'y_label',
highlight: false,
cssClass: 'y_label',
offset: [-48, 0]
},
tickEndings: [0, 1],
highlight: false,
strokeWidth: 1,
minTicksDistance: 0.01,
strokeColor: 'rgba(0,0,0,0.2)'
},
X_TICKS_PARAMS = {
fixed: true,
opacity: 1,
minorTicks: 0,
majorHeight: 10,
drawLabels: true,
label: {
highlightCssClass: 'x_label',
highlight: false,
cssClass: 'x_label',
offset: [0, 0]
},
tickEndings: [0, 1],
highlight: false,
minTicksDistance: 1,
strokeWidth: 2,
strokeColor: '#000',
drawZero: true
},
SPECIAL_Y_TICKS_COORDS = [
[0, 500, 1000, 1500, 2000, 2500],
[0, 10, 20, 30, 40, 50, 60]
],
SPECIAL_X_TICKS_COORDS = [
[1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43, 45, 47, 49],
[1.5, 3.5, 5.5, 7.5, 9.5]
],
BAR_COLORS = [
["#FF2500", "#E8AE00", "#46FF0A", "#04B3FF", "#7F00E8"],
["#4F81BD", "#C0504D"]
],
Y_LABEL = [
["0", "500", "1000", "1500", "2000", "2500"],
["0%", "10%", "20%", "30%", "40%", "50%", "60%", "70%"]
],
X_LABEL = [
["1966", "1968", "1970", "1972", "1974", "1976", "1978", "1980", "1982", "1984", "1986", "1988", "1990", "1992", "1994", "1996", "1998", "2000", "2002", "2004", "2006", "2008", "2010", "2012", "2014"],
["China", "US", "India", "Japan", "South Africa"]
],
YEARS = ["1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"],
LEGENDS = [
["China", "US", "India", "Japan", "South Africa"],
["Share of Total Consumption", "Total Reserves"]
],
LEGEND_COLORS = [
["#FF2500", "#E8AE00", "#46FF0A", "#04B3FF", "#7F00E8"],
["#4F81BD", "#C0504D"]
],
LEGEND_PARAM = [
[2, 1910, 80, "o", 0],
[5, 46, 2.5, "[]", 3]
],
Y_AXIS_TITLE = ["Million tonnes oil equivalent", "Share of Total Consumption /
Total Reserves"],
X_AXIS_TITLE = ["Years", "Countries"];
var Graph = function(){
initBoard.call( this );
this.initEvents();
this.board.unsuspendUpdate();
window.addEventListener( 'resize', this.resizeThis.bind( this ) );
function initBoard(){
this.getCurrentData();
this.getBoundingBox();
//Init graph's board
this.board = G2D.G2DGraph.initBoard( 'G2Dbox', GRAPH_PARAMS );
this.board.setBoundingBox( this.boundingbox );
this.board.suspendUpdate();
var _this = this;
var y_max = function(){ return _this.maxY},
y_min = function(){ return _this.minY},
x_max = function(){ return _this.maxX},
x_min = function(){ return _this.minX};
var y_axis_coords = [ [x_min, y_min], [x_min, y_max]],
x_axis_coords = [ [x_min, y_min], [x_max, y_min] ];
//Create axis
this.axisY = this.board.create( 'line', y_axis_coords, Y_LINE_PARAMS );
this.axisX = this.board.create( 'line', x_axis_coords, X_LINE_PARAMS );
this.updateGraph();
this.board.unsuspendUpdate();
// UPD 04.12 Anatoly
//var graph = this;
//player.setNavigationCallback(function(){ graph.updateGraph(); });
}
};
Graph.prototype.updateGraph = function(){
this.getCurrentData();
this.getBoundingBox();
this.board.setBoundingBox( this.boundingbox );
if (select_val == 0) {
this.initCurve();
} else if (select_val == 1){
this.drawBars();
};
this.setTicks();
this.drawLegend();
this.board.unsuspendUpdate();
this.board.update();
};
Graph.prototype.initEvents = function(){
var _this = this;
var change_select = function(){
select_val = $(select).val();
_this.updateGraph();
};
$(select).change(change_select);
};
Graph.prototype.getBoundingBox = function(){
this.minX = 0;
this.minY = 0;
this.maxY = Math.max.apply(0, this.currentDataWhole);
if (select_val == 0) {
this.maxX = this.currentData[0].length;
} else if (select_val == 1){
this.maxX = this.currentData.length;
};
var min_x = this.minX - 1,
min_y = this.minY - 1,
max_x = this.maxX + 1,
max_y = this.maxY * 1.05;
this.boundingbox = [ min_x, max_y, max_x, min_y ];
};
Graph.prototype.drawBars = function(){
this.board.removeObject(this.curves);
this.board.removeObject(this.points);
this.board.removeObject(this.barGraph);
var bars_options = {
chartStyle: "bar",
fillOpacity: 1,
colors: BAR_COLORS[select_val]
},
bars_height = this.currentData.slice(0);
for (var i = 0; i < bars_height.length; i++){
if(bars_height[i] < 0.5) {
bars_height[i] = bars_height[i] * 10;
}
};
this.barGraph = this.board.createElement('chart', bars_height, bars_options);
var _this = this;
for( i = 0; i < this.barGraph[0].length; i += 1 ){
currentBar = this.barGraph[0][i];
polygon = currentBar.rendNode;
polygon.addEventListener( "mouseenter", ( function( i, bar ){
return function(){
_this.setInfobox( i, _this.currentData[i], bar );
};
} ) ( i, currentBar ) );
polygon.addEventListener( "mouseleave", ( function(){
$(".hoverInfoText").hide();
} ) );
};
var el = document.querySelector("#G2Dbox svg");
var rect = el.getBoundingClientRect();
$("#G2Dbox svg").css("height", rect.height + 10);
};
Graph.prototype.initCurve = function() {
this.board.removeObject(this.curves);
this.board.removeObject(this.points);
this.board.removeObject(this.barGraph);
var x_coord, y_coord, p, curves;
this.points = [];
this.curves = [];
for ( var i = 0; i < this.currentData.length; i++ ) {
POINTS_PARAMS.fillColor = BAR_COLORS[select_val][i];
for ( var j = 0; j < this.currentData[i].length; j++ ) {
x_coord = j;
x_text = YEARS[j];
y_coord = this.currentData[i][j];
p = this.board.create( 'point', [x_coord, y_coord], POINTS_PARAMS );
var _this = this;
p.name = '' + x_text + ': ' + y_coord + '';
p.rendNode.addEventListener("mouseover", (function(p) {
return function() {
y = p.Y();
y += _this.boundingbox[1] * 0.05;
userInfobox = _this.board.create('text',[p.X(), y, p.name], {
highlight: false,
cssClass: "hoverInfoText",
anchorX: "middle",
fixed: true
});
};
})(p));
p.rendNode.addEventListener("mouseout", (function(p) {
return function() {
$(".hoverInfoText").hide();
_this.board.removeObject(userInfobox);
};
})(p));
this.points.push( p );
};
};
// Fill points x and y coords from curve
for ( var i = 0; i < this.currentData.length; i++ ) {
this.xCoords = [];
this.yCoords = [];
CURVE_PARAMS.strokeColor = BAR_COLORS[select_val][i];
for ( var j = 0; j < this.currentData[i].length; j++ ) {
this.xCoords.push(j);
this.yCoords.push(this.currentData[i][j]);
};
curve = this.board.create( 'curve', [this.xCoords, this.yCoords], CURVE_PARAMS );
this.curves.push(curve);
};
};
Graph.prototype.getCurrentData = function(){
var arrData = [],
arrDataWhole = [];
if (select_val == 0) {
for (var i = 0; i < data[select_val].length; i++) {
arrData[i] = data[select_val][i].slice(1);
for (var j = 1; j < data[select_val][i].length; j++) {
arrDataWhole.push(data[select_val][i][j]);
};
};
} else if (select_val == 1) {
arrData = data[select_val].slice(0);
arrDataWhole = data[select_val].slice(0);
};
this.currentData = arrData;
this.currentDataWhole = arrDataWhole;
};
Graph.prototype.resizeThis = function() {
if ( window.innerWidth < 700 || window.innerHeight < 760 ) {
lastView = view;
view = 'tablet';
}
else {
lastView = view;
view = 'desktop';
}
this.updateGraph();
};
Graph.prototype.setInfobox = function( x, y, el ) {
var text = y;
var coefficient = 2;
x = (el.vertices[2].X() - el.vertices[1].X()) / coefficient;
x += el.vertices[1].X();
y = el.vertices[1].Y();
y += this.boundingbox[1] * 0.03;
this.infobox = this.board.create("text", [x, y, text], {
highlight: false,
cssClass: "hoverInfoText",
anchorX: "middle"
});
};
Graph.prototype.setTicks = function(){
var fixed_y_ticks = [],
fixed_x_ticks = [];
fixed_y_ticks = SPECIAL_Y_TICKS_COORDS[select_val];
Y_TICKS_PARAMS.labels = Y_LABEL[select_val];
fixed_x_ticks = SPECIAL_X_TICKS_COORDS[select_val];
X_TICKS_PARAMS.labels = X_LABEL[select_val];
$("#yaxislabel").html(Y_AXIS_TITLE[select_val]);
$("#xaxislabel").html(X_AXIS_TITLE[select_val]);
if(!this.ticksX && !this.ticksY ){
this.ticksY = this.board.create( 'ticks', [ this.axisY, fixed_y_ticks ], Y_TICKS_PARAMS );
this.ticksX = this.board.create( 'ticks', [ this.axisX, fixed_x_ticks ], X_TICKS_PARAMS );
return;
};
this.ticksY.fixedTicks = fixed_y_ticks;
this.ticksX.fixedTicks = fixed_x_ticks;
this.ticksY.setAttribute({ labels: Y_LABEL[select_val] });
this.ticksX.setAttribute({ labels: X_LABEL[select_val]});
};
Graph.prototype.drawLegend = function(){
if( this.currentLegend ){
var j;
for( j = 0; j < this.currentLegend.length; j += 1 ){
this.currentLegend[j].remove();
}
};
this.currentLegend = [];
var i,
legend = LEGENDS[select_val],
colors = LEGEND_COLORS[select_val],
point_params = {
fixed: true,
showInfobox: false,
size: LEGEND_PARAM[select_val][4],
face: LEGEND_PARAM[select_val][3],
name: null,
label: {
cssClass: "legend_text",
highlight: false,
offset: [10, -1]
},
color: null
},
curve_params = {
fixed: true,
showInfobox: false,
//name: null,
strokeWidth: 3,
label: {
cssClass: "legend_text",
highlight: false,
offset: [10, -1]
},
cssClass: "legend_text",
highlightCssClass: "legend_text",
color: null
};
var item_legend,
curveLegend,
textLegend,
y = LEGEND_PARAM[select_val][1],
x_pos = LEGEND_PARAM[select_val][0];
if (select_val == 0) {
for (i = 0; i < legend.length; i += 1) {
var curve_coord_x = [],
curve_coord_y = [];
curve_coord_x.push(x_pos);
curve_coord_x.push(x_pos + 2);
curve_coord_y.push(y);
curve_coord_y.push(y);
curve_params.color = LEGEND_COLORS[select_val][i];
curve_params.highlightStrokeColor = LEGEND_COLORS[select_val][i];
curve_params.name = legend[i];
curveLegend = this.board.create('curve', [curve_coord_x, curve_coord_y], curve_params);
this.currentLegend.push( curveLegend );
textLegend = this.board.create('text', [x_pos + 3, y, curve_params.name], curve_params);
this.currentLegend.push( textLegend );
y -= LEGEND_PARAM[select_val][2];
}
} else if (select_val == 1){
for( i = 0; i < legend.length; i += 1 ){
point_params.color = colors[i];
point_params.name = legend[i];
item_legend = this.board.create( "point", [x_pos, y], point_params );
y -= LEGEND_PARAM[select_val][2];
this.currentLegend.push( item_legend );
}
};
};
});