Utilisation de Highcharts
This commit is contained in:
xdrm-brackets
parent
c1402aed01
commit
f612a94c15
|
|
@ -10,7 +10,6 @@
|
|||
"js" : "/js",
|
||||
|
||||
"highcharts": "/js/lib/highcharts/js",
|
||||
"sigma": "/js/lib/sigma",
|
||||
|
||||
"upload": "/src/upload"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"manager": { "permissions": "private" },
|
||||
|
||||
"src": {
|
||||
"permissions": "phponly",
|
||||
"permissions": "php",
|
||||
"static": "public"
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -112,23 +112,17 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
/* [4] Gestion des couleurs
|
||||
/* [4] On construit l'objet
|
||||
=========================================================*/
|
||||
$colors = array();
|
||||
|
||||
$colors['default'] = array( 'hsla(347,100%,69%,1)', 'hsla(204,82%,57%,1)', 'hsla(43,100%,67%,1)' );
|
||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'labels' => $labels,
|
||||
'datasets' => array(array(
|
||||
'data' => array($INCOMING, $OUTGOING, $MISSED),
|
||||
'backgroundColor' => $colors['default'],
|
||||
'hoverBackgroundColor' => $colors['hover']
|
||||
))
|
||||
'xlabels' => $labels,
|
||||
'series' => array(array(
|
||||
array( 'name' => $labels[0], 'y' => $INCOMING ),
|
||||
array( 'name' => $labels[1], 'y' => $OUTGOING ),
|
||||
array( 'name' => $labels[2], 'y' => $MISSED ) ))
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -188,8 +182,8 @@
|
|||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'labels' => array('APPELS', 'SMS'),
|
||||
'datasets' => array(array(
|
||||
'xlabels' => array('APPELS', 'SMS'),
|
||||
'series' => array(array(
|
||||
'data' => array($PHONE, $SMS),
|
||||
'backgroundColor' => $colors['default'],
|
||||
'hoverBackgroundColor' => $colors['hover']
|
||||
|
|
@ -250,21 +244,17 @@
|
|||
}
|
||||
|
||||
|
||||
/* [4] Gestion des couleurs
|
||||
=========================================================*/
|
||||
$colors = array();
|
||||
|
||||
$colors['default'] = array( 'hsla(347,100%,69%,1)', 'hsla(204,82%,57%,1)' );
|
||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'labels' => array('HOMME', 'FEMME'),
|
||||
'datasets' => array(array(
|
||||
'data' => array($H, $F),
|
||||
'backgroundColor' => $colors['default'],
|
||||
'hoverBackgroundColor' => $colors['hover']
|
||||
'title' => 'Répartition des genres',
|
||||
'pointFormat' => '{series.name}: <b>{point.percentage:.1f}%</b>',
|
||||
'series' => array(array(
|
||||
'colorByPoint' => true,
|
||||
'name' => 'Répartition des genres',
|
||||
'data' => array(
|
||||
array( 'name' => 'Homme', 'y' => $H ),
|
||||
array( 'name' => 'Femme', 'y' => $F )
|
||||
)
|
||||
))
|
||||
);
|
||||
}
|
||||
|
|
@ -302,15 +292,18 @@
|
|||
|
||||
/* (2) On initialise les compteurs et les labels */
|
||||
$age_classes = array();
|
||||
$age_classesByContact = array();
|
||||
$labels = array();
|
||||
foreach($dict['contacts']['age'] as $i=>$label){
|
||||
array_push($labels, $label);
|
||||
$age_classes[$i] = 0;
|
||||
$age_classesByContact[$i] = 0;
|
||||
}
|
||||
|
||||
|
||||
/* [3] S'il a un journal d'appel, on renvoie les données
|
||||
=========================================================*/
|
||||
$tot = 0;
|
||||
if( isset($data['logs']) && is_array($data['logs']) ){
|
||||
|
||||
|
||||
|
|
@ -328,37 +321,52 @@
|
|||
continue;
|
||||
|
||||
/* (4) On incrémente le compteur de la classe d'age en question */
|
||||
if( isset($age_classes[ $associatedContact['age'] ]) )
|
||||
if( isset($age_classes[ $associatedContact['age'] ]) ){
|
||||
$age_classes[ $associatedContact['age'] ]++;
|
||||
|
||||
$tot++;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
foreach($age_classes as $i=>$class)
|
||||
$age_classes[$i] = 100 * $class / $tot;
|
||||
|
||||
/* [4] Gestion des couleurs
|
||||
}
|
||||
|
||||
|
||||
/* [4] On récupère les ages pour répartition des CONTACTS
|
||||
=========================================================*/
|
||||
$colors = array();
|
||||
/* (1) On incrémente les compteurs */
|
||||
$tot = 0;
|
||||
foreach($data['contacts'] as $c=>$contact){
|
||||
|
||||
$colors['default'] = array();
|
||||
/* (2) On incrémente le compteur de la classe d'age en question */
|
||||
if( isset($age_classesByContact[ $contact['age'] ]) ){
|
||||
$age_classesByContact[$contact['age']]++;
|
||||
$tot++;
|
||||
}
|
||||
|
||||
$step = (int) (50/count($age_classes));
|
||||
}
|
||||
|
||||
// Pour chaque classe, on ajoute une couleur
|
||||
for( $i = 0 ; $i < count($age_classes) ; $i++ )
|
||||
array_push($colors['default'], 'hsl(216,100%,'.(25+(50-$step*$i)).'%)');
|
||||
foreach($age_classesByContact as $i=>$class)
|
||||
$age_classesByContact[$i] = 100 * $class / $tot;
|
||||
|
||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'labels' => $labels,
|
||||
'datasets' => array(array(
|
||||
'data' => $age_classes,
|
||||
'backgroundColor' => $colors['default'],
|
||||
'hoverBackgroundColor' => $colors['hover']
|
||||
))
|
||||
'xlabels' => $labels,
|
||||
'title' => 'Répartition des ages',
|
||||
'series' => array(
|
||||
array(
|
||||
'name' => 'Parmi les communications',
|
||||
'data' => array_values($age_classes)
|
||||
),
|
||||
array(
|
||||
'name' => 'Parmi les contacts',
|
||||
'data' => array_values($age_classesByContact)
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -456,49 +464,18 @@
|
|||
$relationsByContact[$r] = 100 * $relationsByContact[$r] / $tot;
|
||||
|
||||
|
||||
|
||||
/* [5] Gestion des couleurs
|
||||
=========================================================*/
|
||||
$colors = array();
|
||||
|
||||
$colors['default'] = array();
|
||||
$colors['defaultContact'] = array();
|
||||
|
||||
$step = (int) (50/count($relations));
|
||||
|
||||
// Pour chaque classe, on ajoute une couleur
|
||||
for( $i = 0 ; $i < count($relations) ; $i++ )
|
||||
array_push($colors['default'], 'hsla(216,100%,'.(25+(50-$step*$i)).'%,.5)');
|
||||
|
||||
$colors['hover'] = self::cFilter($colors['default'], 0, 0, -2);
|
||||
|
||||
// Pour chaque classe PAR CONTACT, on ajoute une couleur
|
||||
for( $i = 0 ; $i < count($relationsByContact) ; $i++ )
|
||||
array_push($colors['defaultContact'], 'hsla(20,100%,'.(25+(50-$step*$i)).'%,.5)');
|
||||
|
||||
$colors['hoverContact'] = self::cFilter($colors['defaultContact'], 0, 0, -2);
|
||||
|
||||
|
||||
|
||||
return array(
|
||||
'ModuleError' => ManagerError::Success,
|
||||
'labels' => $labels,
|
||||
'datasets' => array(
|
||||
'xlabels' => $labels,
|
||||
'title' => 'Répartition des relations',
|
||||
'series' => array(
|
||||
array( // En fonction du log
|
||||
'label' => 'Répartition des communications',
|
||||
'data' => $relations,
|
||||
'backgroundColor' => $colors['default'],
|
||||
'hoverBackgroundColor' => $colors['hover'],
|
||||
'borderWidth' => 1,
|
||||
'borderColor' => 'hsla(216,100%,80%,1)'
|
||||
'name' => 'Parmi les communications',
|
||||
'data' => $relations
|
||||
),
|
||||
array( // Répartition dans les contacts
|
||||
'label' => 'Répartition des contacts',
|
||||
'data' => $relationsByContact,
|
||||
'backgroundColor' => $colors['defaultContact'],
|
||||
'hoverBackgroundColor' => $colors['hoverContact'],
|
||||
'borderWidth' => 1,
|
||||
'borderColor' => 'hsla(20,100%,80%,1)'
|
||||
array( // Parmi les contacts
|
||||
'name' => 'Parmi les contacts',
|
||||
'data' => $relationsByContact
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
Order deny,allow
|
||||
Deny from all
|
||||
|
|
@ -4,186 +4,28 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Chart du sexe (HOMME/FEMME)</title>
|
||||
<script type='text/javascript' src='/f/js/api-min/js/lib'></script> <!-- Gestion des transactions avec le serveur -->
|
||||
<script type='text/javascript' src='/f/js/_charts-min/js/lib'></script>
|
||||
<script type='text/javascript' src='/f/js/highcharts/highcharts'></script>
|
||||
<script type='text/javascript' src='/f/js/exporting/highcharts/modules'></script>
|
||||
</head>
|
||||
<body style='display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap;'>
|
||||
|
||||
<canvas id="direction" width="400" height="400" style='margin: 2em;'></canvas>
|
||||
<canvas id="type" width="400" height="400" style='margin: 2em;'></canvas>
|
||||
<canvas id="sexe" width="400" height="400" style='margin: 2em;'></canvas>
|
||||
<canvas id="age" width="400" height="400" style='margin: 2em;'></canvas>
|
||||
<canvas id="relation" width="400" height="400" style='margin: 2em;'></canvas>
|
||||
<div id="age" style='margin: 2em'></div>
|
||||
|
||||
|
||||
|
||||
<script type='text/javascript'>
|
||||
var api = new APIClass('/api/');
|
||||
|
||||
var direction = document.getElementById('direction');
|
||||
var type = document.getElementById('type');
|
||||
var sexe = document.getElementById('sexe');
|
||||
var age = document.getElementById('age');
|
||||
var relation = document.getElementById('relation');
|
||||
|
||||
/* [0] Paramètres globaux
|
||||
=========================================================*/
|
||||
Chart.defaults.global.responsive = false;
|
||||
Chart.defaults.global.onClick = function(e, c){
|
||||
console.log(e); // MouseEvent
|
||||
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', 'relation'];
|
||||
|
||||
|
||||
/* [1] On crée les conteneurs
|
||||
=========================================================*/
|
||||
for( var c in charts ){
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [1] On récupére les données SEXE
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/sexe',
|
||||
subject: subject
|
||||
}
|
||||
|
||||
/* (2) On lance la requête */
|
||||
api.send(request, function(response){
|
||||
/* (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
|
||||
=========================================================*/
|
||||
var myDoughnutChart = new Chart(sexe, {
|
||||
type: 'doughnut',
|
||||
animation: { animateScale: true },
|
||||
data: data
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* [2] On récupére les données DIRECTION
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/direction',
|
||||
subject: subject
|
||||
}
|
||||
|
||||
/* (2) On lance la requête */
|
||||
api.send(request, function(response){
|
||||
/* (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
|
||||
=========================================================*/
|
||||
var myDoughnutChart = new Chart(direction, {
|
||||
type: 'doughnut',
|
||||
animation: { animateScale: true },
|
||||
data: data
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
/* [3] On récupére les données TYPE
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/type',
|
||||
subject: subject
|
||||
}
|
||||
|
||||
/* (2) On lance la requête */
|
||||
api.send(request, function(response){
|
||||
/* (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
|
||||
=========================================================*/
|
||||
var myDoughnutChart = new Chart(type, {
|
||||
type: 'doughnut',
|
||||
animation: { animateScale: true },
|
||||
data: data
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
/* [4] On récupére les données AGES
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/ages',
|
||||
subject: subject
|
||||
}
|
||||
|
||||
/* (2) On lance la requête */
|
||||
api.send(request, function(response){
|
||||
/* (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
|
||||
=========================================================*/
|
||||
var myDoughnutChart = new Chart(age, {
|
||||
type: 'doughnut',
|
||||
animation: { animateScale: true },
|
||||
data: data
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
/* [5] On récupére les données RELATIONS (types)
|
||||
=========================================================*/
|
||||
/* (1) On rédige la requête */
|
||||
var request = {
|
||||
path: 'chart/relations',
|
||||
subject: subject
|
||||
|
|
@ -191,24 +33,23 @@
|
|||
|
||||
/* (2) On lance la requête */
|
||||
api.send(request, function(response){
|
||||
console.log( response );
|
||||
|
||||
/* (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
|
||||
}
|
||||
/* (4) Gestion des paramètres */
|
||||
var options = {
|
||||
chart: { renderTo: age, defaultSeriesType: 'bar' },
|
||||
series: response.series
|
||||
};
|
||||
|
||||
/* [3] On construit notre graphique
|
||||
=========================================================*/
|
||||
var myBarChart = new Chart(relation, {
|
||||
type: 'bar',
|
||||
animation: { animateScale: true },
|
||||
data: data
|
||||
});
|
||||
|
||||
/* (5) Création */
|
||||
var chart = new Highcharts.Chart(options);
|
||||
|
||||
console.log(chart);
|
||||
|
||||
});
|
||||
|
||||
|
|
|
|||
2
view.php
2
view.php
|
|
@ -42,6 +42,8 @@
|
|||
<script type='text/javascript' src='/f/js/input-html-facebook-data-min/js/includes' ></script> <!-- Gestion du constructeur HTML pour la page d'acquisition 'facebook' -->
|
||||
|
||||
<!-- Librairies Externes Javascript -->
|
||||
<script type='text/javascript' src='/f/js/highcharts/highcharts' ></script> <!-- Librairie pour les graphiques -->
|
||||
<script type='text/javascript' src='/f/js/exporting/highcharts/modules' ></script> <!-- Librairie pour les graphiques -->
|
||||
<script type='text/javascript' src='/f/js/_charts-min/js/lib' ></script> <!-- Librairie pour les graphiques -->
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";Chart.defaults.global.responsive=!1;Chart.defaults.global.title.display=!0;Chart.defaults.global.onClick=function(a,b){console.log(a);null!=b[0]&&console.log(b[0]._datasetIndex,b[0]._index)};subject=273;var charts=["sexe","direction","type","ages","relations"],types=["doughnut","doughnut","doughnut","bar","bar"],canvas=[],instances=[],c;
|
||||
for(c in charts)canvas[c]=document.createElement("canvas"),canvas[c].id=charts[c],canvas[c].width=400,canvas[c].height=400,subPhone.appendChild(canvas[c]);
|
||||
for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,b){console.log(api.buffer);var d=b[0];if(0!=a.ModuleError)return!1;var e={labels:a.labels,datasets:a.datasets};Chart.defaults.global.title.text=charts[d].charAt(0).toUpperCase()+charts[d].slice(1).toLowerCase();instances[d]=new Chart(canvas[d],{type:types[d],animation:{animateScale:!0},data:e,options:{scaleShowLabels:!1}})},null,c)};
|
||||
var subPhone=$('section[data-sublink="phone"]');subPhone.style.display="flex";subPhone.style.flexWrap="wrap";subPhone.style.justifyContent="space-around";Chart.defaults.global.responsive=!1;Chart.defaults.global.title.display=!1;Chart.defaults.global.tooltips.footerFontSize=0;Chart.defaults.global.onClick=function(a,b){console.log(a);null!=b[0]&&console.log(b[0]._datasetIndex,b[0]._index)};subject=273;
|
||||
var charts=["sexe","direction","type","ages","relations"],types=["pie","pie","pie","column","bar"],canvas=[],instances=[],c;for(c in charts)canvas[c]=document.createElement("div"),canvas[c].id=charts[c],canvas[c].style.width=canvas[c].style.height="column"==types[c]?"40em":"30em",canvas[c].style.margin="2em",subPhone.appendChild(canvas[c]);
|
||||
for(c=0;c<charts.length;c++){var request={path:"chart/"+charts[c],subject:subject};api.send(request,function(a,b){console.log(api.buffer);var e=b[0];if(0!=a.ModuleError)return!1;var d={chart:{renderTo:canvas[e],defaultSeriesType:types[e]},series:a.series,plotOptions:{pie:{allowPointSelect:!0,cursor:"pointer",dataLabels:{enabled:!0,format:"<b>{point.name}</b>: {point.percentage:.1f} %",style:{color:Highcharts.theme&&Highcharts.theme.contrastTextColor||"black"}}},bar:{allowPointSelect:!0,cursor:"pointer"}}};
|
||||
null!=a.xlabels&&(d.xAxis={categories:a.xlabels});null!=a.ylabels&&(d.yAxis={categories:a.ylabels});null!=a.title&&(d.title={text:a.title});null!=a.pointFormat&&(d.tooltip={pointFormat:a.pointFormat});instances[e]=new Highcharts.Chart(d)},null,c)};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ subPhone.style.justifyContent = 'space-around';
|
|||
/* [0] Paramètres globaux
|
||||
=========================================================*/
|
||||
Chart.defaults.global.responsive = false;
|
||||
Chart.defaults.global.title.display = true;
|
||||
Chart.defaults.global.title.display = false;
|
||||
Chart.defaults.global.tooltips.footerFontSize = 0;
|
||||
|
||||
|
||||
Chart.defaults.global.onClick = function(e, c){
|
||||
|
|
@ -22,17 +23,18 @@ subject = 273;
|
|||
|
||||
|
||||
var charts = ['sexe', 'direction', 'type', 'ages', 'relations'];
|
||||
var types = ['doughnut', 'doughnut', 'doughnut', 'bar', 'bar'];
|
||||
var types = ['pie', 'pie', 'pie', 'column', 'bar'];
|
||||
var canvas = []; // Contiendra les canvas
|
||||
var instances = []; // Contiendra les charts
|
||||
|
||||
/* [1] On crée les conteneurs
|
||||
=========================================================*/
|
||||
for( var c in charts ){
|
||||
canvas[c] = document.createElement('canvas');
|
||||
canvas[c] = document.createElement('div');
|
||||
canvas[c].id = charts[c];
|
||||
canvas[c].width = 400;
|
||||
canvas[c].height = 400;
|
||||
// canvas[c].width = canvas[c].height = ( types[c] == 'bar' ) ? 500 : 300;
|
||||
canvas[c].style.width = canvas[c].style.height = ( types[c] == 'column' ) ? '40em' : '30em';
|
||||
canvas[c].style.margin = '2em';
|
||||
subPhone.appendChild( canvas[c] );
|
||||
}
|
||||
|
||||
|
|
@ -66,17 +68,49 @@ for( var c = 0 ; c < charts.length ; c++ ){
|
|||
datasets: response.datasets
|
||||
};
|
||||
|
||||
Chart.defaults.global.title.text = charts[c].charAt(0).toUpperCase()+charts[c].slice(1).toLowerCase();
|
||||
/* [3] On construit notre graphique
|
||||
=========================================================*/
|
||||
instances[c] = new Chart(canvas[c], {
|
||||
type: types[c],
|
||||
animation: { animateScale: true },
|
||||
data: data,
|
||||
options: {
|
||||
scaleShowLabels: false
|
||||
/* (1) On définit les options */
|
||||
var options = {
|
||||
chart: { renderTo: canvas[c], defaultSeriesType: types[c] },
|
||||
series: response.series,
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
||||
style: {
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
bar: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 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 };
|
||||
|
||||
/* (2) On crée le graphique */
|
||||
instances[c] = new Highcharts.Chart(options);
|
||||
|
||||
|
||||
}, null, c);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue