Update templates
This commit is contained in:
parent
ca5dafb15d
commit
a74b28a6cb
|
@ -2,12 +2,40 @@
|
|||
width: 98%;
|
||||
margin-left: 0px;
|
||||
overflow-x: scroll;
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
|
||||
.chartWrapper {
|
||||
position: relative;
|
||||
background-color: #DFCFBE;
|
||||
border-radius: 30px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chartWrapper > canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
pointer-events:none;
|
||||
}
|
||||
.chartAreaWrapper {
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
.chartAreaWrapper2 {
|
||||
|
||||
position: relative;
|
||||
height: 300px;
|
||||
width: 3000px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
|
||||
#charts {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
#charts {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
|
134
tpl/graph.js
134
tpl/graph.js
|
@ -1,134 +0,0 @@
|
|||
var jsonfileRW = $.getJSON( "daily.json", function(data) {
|
||||
var date = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.date;
|
||||
});
|
||||
var rwallets = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.rWallets;
|
||||
});
|
||||
var rmembers = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.rMembers;
|
||||
});
|
||||
var nbrwallets = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.nbrWallets;
|
||||
});
|
||||
var nbrmembers = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.nbrMembers;
|
||||
});
|
||||
|
||||
//ReceivedGraph
|
||||
var ctx = document.getElementById("chartRW");
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: date,
|
||||
datasets: [{
|
||||
label: 'Ḡ1 reçus sur les simples portefeuilles',
|
||||
data: rwallets,
|
||||
backgroundColor: 'rgba(0, 119, 204, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}, {
|
||||
label: 'Ḡ1 reçus sur les portefeuilles membres',
|
||||
data: rmembers,
|
||||
backgroundColor: 'rgba(0, 178, 0, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
responsive: true
|
||||
}
|
||||
};
|
||||
var myChartRW = new Chart(ctx, config);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// NbrWallets Graph
|
||||
var ctx = document.getElementById("chartNBRW");
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: date,
|
||||
datasets: [{
|
||||
label: 'Nombre de simple portefeuilles',
|
||||
data: nbrwallets,
|
||||
backgroundColor: 'rgba(0, 119, 204, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}, {
|
||||
label: 'Nombre de portefeuilles membres',
|
||||
data: nbrmembers,
|
||||
backgroundColor: 'rgba(0, 178, 0, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
responsive: true
|
||||
}
|
||||
};
|
||||
|
||||
var myChartNBRW = new Chart(ctx, config);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*var jqxhr = $.getJSON( "example.json", function() {
|
||||
console.log( "success" );
|
||||
})
|
||||
.done(function() {
|
||||
console.log( "second success" );
|
||||
})
|
||||
.fail(function() {
|
||||
console.log( "error" );
|
||||
})
|
||||
.always(function() {
|
||||
console.log( "complete" );
|
||||
});*/
|
|
@ -0,0 +1,134 @@
|
|||
var jsonfileRW = $.getJSON( "../data/cum-daily.json", function(data) {
|
||||
var date = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.date;
|
||||
});
|
||||
var rwallets = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.rWallets;
|
||||
});
|
||||
var rmembers = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.rMembers;
|
||||
});
|
||||
var nbrwallets = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.nbrWallets;
|
||||
});
|
||||
var nbrmembers = jsonfileRW.responseJSON.map(function(e) {
|
||||
return e.nbrMembers;
|
||||
});
|
||||
|
||||
//ReceivedGraph
|
||||
var ctx = document.getElementById("chartRW");
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: date,
|
||||
datasets: [{
|
||||
label: 'Ḡ1 reçus sur les simples portefeuilles',
|
||||
data: rwallets,
|
||||
backgroundColor: 'rgba(0, 119, 204, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}, {
|
||||
label: 'Ḡ1 reçus sur les portefeuilles membres',
|
||||
data: rmembers,
|
||||
backgroundColor: 'rgba(0, 178, 0, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true
|
||||
}
|
||||
};
|
||||
var myChartRW = new Chart(ctx, config);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// NbrWallets Graph
|
||||
var ctx = document.getElementById("chartNBRW");
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: date,
|
||||
datasets: [{
|
||||
label: 'Nombre de simple portefeuilles',
|
||||
data: nbrwallets,
|
||||
backgroundColor: 'rgba(0, 119, 204, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}, {
|
||||
label: 'Nombre de portefeuilles membres',
|
||||
data: nbrmembers,
|
||||
backgroundColor: 'rgba(0, 178, 0, 0.3)',
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 8,
|
||||
pointHoverBackgroundColor: "beige",
|
||||
pointHoverBorderColor: "brown",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHitRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: true,
|
||||
responsive: true
|
||||
}
|
||||
};
|
||||
|
||||
var myChartNBRW = new Chart(ctx, config);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*var jqxhr = $.getJSON( "example.json", function() {
|
||||
console.log( "success" );
|
||||
})
|
||||
.done(function() {
|
||||
console.log( "second success" );
|
||||
})
|
||||
.fail(function() {
|
||||
console.log( "error" );
|
||||
})
|
||||
.always(function() {
|
||||
console.log( "complete" );
|
||||
});*/
|
Loading…
Reference in New Issue