Update templates

This commit is contained in:
poka 2020-10-01 05:06:44 +02:00
parent ca5dafb15d
commit a74b28a6cb
3 changed files with 167 additions and 139 deletions

View File

@ -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%;
}
}

View File

@ -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" );
});*/

134
tpl/js/graph.js Normal file
View File

@ -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" );
});*/