131 lines
3.5 KiB
JavaScript
131 lines
3.5 KiB
JavaScript
var subPhone = $('section[data-sublink="phone"]');
|
|
subPhone.style.display = 'flex';
|
|
subPhone.style.flexWrap = 'wrap';
|
|
subPhone.style.justifyContent = 'space-around';
|
|
|
|
/* [0] Paramètres globaux
|
|
=========================================================*/
|
|
Chart.defaults.global.responsive = false;
|
|
Chart.defaults.global.title.display = false;
|
|
Chart.defaults.global.tooltips.footerFontSize = 0;
|
|
|
|
|
|
Chart.defaults.global.onClick = function(e, c){
|
|
console.log(e); // MouseEvent
|
|
if( c[0] != null )
|
|
console.log(c[0]._datasetIndex, c[0]._index); // Chart data
|
|
|
|
// _datasetIndex, quel dataset (s'il y en a plusieurs)
|
|
// _index, indice de la valeur dans le dataset
|
|
};
|
|
|
|
subject = 273;
|
|
|
|
|
|
var charts = ['sexe','direction', 'type', 'ages', 'relations', 'weekdays'];
|
|
var types = ['pie', 'pie', 'pie', 'column', 'bar', 'column'];
|
|
var canvas = []; // Contiendra les canvas
|
|
var instances = []; // Contiendra les charts
|
|
|
|
var plotOptions = [ { pie: { // pie
|
|
innerSize: '50%',
|
|
allowPointSelect: true,
|
|
cursor: 'pointer',
|
|
startAngle: -90,
|
|
endAngle: 90,
|
|
dataLabels: {
|
|
enabled: true,
|
|
distance: -45,
|
|
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
|
style: { color: 'white', textShadow: '0 0 2px black' }
|
|
}
|
|
} } ];
|
|
|
|
plotOptions[1] = plotOptions[0]; // PIE
|
|
plotOptions[2] = plotOptions[0]; // PIE
|
|
|
|
// AGES + WEEKDAY
|
|
plotOptions[3] = { column: { shadow: false, borderWidth: 0 } };
|
|
plotOptions[5] = { column: { shadow: false, borderWidth: 0 } };
|
|
plotOptions[5].column.stacking = 'normal';
|
|
|
|
// RELATIONS
|
|
plotOptions[4] = { bar: { allowPointSelect: true, cursor: 'pointer' } };
|
|
|
|
|
|
/* [1] On crée les conteneurs
|
|
=========================================================*/
|
|
for( var c in charts ){
|
|
canvas[c] = document.createElement('div');
|
|
canvas[c].id = charts[c];
|
|
// canvas[c].width = canvas[c].height = ( types[c] == 'bar' ) ? 500 : 300;
|
|
canvas[c].style.width = canvas[c].style.height = ( types[c] != 'pie' ) ? '40em' : '30em';
|
|
canvas[c].style.margin = '2em';
|
|
subPhone.appendChild( canvas[c] );
|
|
}
|
|
|
|
|
|
/* [2] Pour chaque graphique, on récupère les données et on les affiche
|
|
=========================================================*/
|
|
for( var c = 0 ; c < charts.length ; c++ ){
|
|
|
|
|
|
/* (1) On rédige la requête */
|
|
var request = {
|
|
path: 'chart/'+charts[c],
|
|
subject: subject
|
|
};
|
|
|
|
|
|
/* (2) On lance la requête */
|
|
api.send(request, function(response, args){
|
|
console.log(api.buffer);
|
|
// On récupère @c dans le scope du handler
|
|
var c = args[0];
|
|
|
|
/* (3) Si erreur, on quitte */
|
|
if( response.ModuleError != 0 )
|
|
return false;
|
|
|
|
/* [2] On construit les données
|
|
=========================================================*/
|
|
var data = {
|
|
labels: response.labels,
|
|
datasets: response.datasets
|
|
};
|
|
|
|
/* [3] On construit notre graphique
|
|
=========================================================*/
|
|
/* (1) On définit les options */
|
|
var options = {
|
|
chart: { renderTo: canvas[c], type: types[c] },
|
|
series: response.series,
|
|
plotOptions: plotOptions[c]
|
|
};
|
|
|
|
// labels
|
|
if( response.xlabels != null )
|
|
options.xAxis = { categories: response.xlabels };
|
|
|
|
if( response.ylabels != null )
|
|
options.yAxis = { categories: response.ylabels };
|
|
|
|
// titre
|
|
if( response.title != null )
|
|
options.title = { text: response.title };
|
|
|
|
// pointFormat
|
|
if( response.pointFormat != null )
|
|
options.tooltip = { pointFormat: response.pointFormat };
|
|
|
|
console.log(options);
|
|
/* (2) On crée le graphique */
|
|
instances[c] = new Highcharts.Chart(options);
|
|
|
|
|
|
}, null, c);
|
|
|
|
|
|
|
|
}
|