Discussion :

[pierrot10]

Bonjour à tous,

Lors je ne savais pas trop comment donner un titre à ce poste. Alors je vais essayer d'être le plus explicite.

Voici un bout de code et j'attire votre attention sur borderColor et backgroundColor où vous constaterez 'window.chartColors.[une_couleur]':

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 var dataset = [{
        label: "Waterlevel",
        fill: false,
        data: data_wl,
       // borderDash: [3, 3],
        type: 'line',
        borderWidth: 2,
        showLine: true,
        pointStyle: 'rectRot',  
        borderWidth: 1,
        pointRadius: 1,
        pointHoverRadius: 13,
        borderColor: window.chartColors.darkblue,
        backgroundColor: window.chartColors.darkblue
        //backgroundColor: ['rgba(15, 37, 172, 1)'],
        //borderColor: ['rgba(45, 114, 66, 1)']
 
    },{
        label: "Waterlevel normalized",
        fill: false,
        data: data_wln,
        type: 'line',
        borderWidth: 1,
        pointRadius: 1,
        pointHoverRadius: 13,
        borderColor: window.chartColors.lightblue,
        backgroundColor: window.chartColors.lightblue
 
    }]

J'extrais des donnée de ma base de donnée et j'essaye de le faire dynamique. C'est à dire, si j'ai un capteur 'water' et que plus tard, j'ajoute un capteur 'moisture' dans ma base de donnée, je ne veux pas editer mon fichier.js pour ajouter un bloque, comme vous voyeu ci-dessus.

Alors depuis mon fichier php qui va faire le traitement vers mas base donnée pour le retourne au format json (AJAX), je prépare ce que vous voyez ci-dessus, et ca marche.

Voici une partie de mon code php avant de venir sur mon problème (mon probème est un problème javascript, mais je dois votre mettre du code PHP, pour comprendre.
J'attire votre attention sur les deux dernieres ligne de la boucle while()

$data[$row['id_sensor_type']]['datasets']['borderColor'] = $color[$row['id_sensor_type']];

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
// Ici il y a la requete mysql sur la base de donée, que je ne mets pas car ca fonction et mon problème est plus bas,
$color=array(
	'window.chartColors.darkred',
	'window.chartColors.darkblue',
	'window.chartColors.lightblue',
	'window.chartColors.red',
	'window.chartColors.green',
	'window.chartColors.darkgreen',
	'window.chartColors.lightgreen',
	'window.chartColors.light2green',
	'window.chartColors.yellow',
	'window.chartColors.purple',
	'window.chartColors.orange',
	'window.chartColors.grey'
);
while($row = $sql_result->fetch_assoc()){
 
 
				$data[$row['id_sensor_type']]['unit'] = $row['measure_unit'];
				$data[$row['id_sensor_type']]['name'] = $row['sensor_type_name'];
				$data[$row['id_sensor_type']]['station'] = $row['station_name'];
				$data[$row['id_sensor_type']]['datasets']['label'] = $row['sensor_type_longname'];
				$data[$row['id_sensor_type']]['datasets']['fill'] = 0;
				$data[$row['id_sensor_type']]['datasets']['data'][] = $row['value'];
				$data[$row['id_sensor_type']]['datasets']['type'] = "line";
				$data[$row['id_sensor_type']]['datasets']['borderWidth'] = 1;
				$data[$row['id_sensor_type']]['datasets']['pointRadius'] = 1;
				$data[$row['id_sensor_type']]['datasets']['pointHoverRadius'] = 13;
				$data[$row['id_sensor_type']]['datasets']['pointStyle'] = "rectRot";
				$data[$row['id_sensor_type']]['datasets']['showLine'] = 1;
				$data[$row['id_sensor_type']]['datasets']['borderColor'] = $color[$row['id_sensor_type']];
				$data[$row['id_sensor_type']]['datasets']['backgroundColor'] = $color[$row['id_sensor_type']];
}

Donc les deux dernières ligne

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$data[$row['id_sensor_type']]['datasets']['borderColor'] = $color[$row['id_sensor_type']];
$data[$row['id_sensor_type']]['datasets']['backgroundColor'] = $color[$row['id_sensor_type']]

me permets de donner une couleur à ma chart, et ca marche (quoi c'est pas tellement vrai ) car, mon concole.log(data) de la section 'success' (ajax) de mon fichier javascript m'affiche ceci:

_meta: Object [ {…} ]
backgroundColor: "window.chartColors.darkgreen"
borderColor: "window.chartColors.darkgreen"
borderWidth: 1
data: Array [ 17.18, 18, 18.62, … ]
fill: 0
label: "T-Air"
pointHoverRadius: 13
pointRadius: 1
pointStyle: "rectRot"
showLine: 1
type: "line"

Donc ceci est nikel SAUF que

backgroundColor: "window.chartColors.darkgreen"
borderColor: "window.chartColors.darkgreen"

c'est du texte!!! alors dans le tout premier code que j'ai mis c'est pas du texte.

Comparaison:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
borderColor: window.chartColors.lightblue,
backgroundColor: window.chartColors.lightblue

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
backgroundColor: "window.chartColors.darkgreen"
borderColor: "window.chartColors.darkgreen"

Voyez-vous mon problème?

Donc ma question; comment je peux parser, convertir, transformer une chaine de caracter venant de donnée json, soit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

backgroundColor: "window.chartColors.darkgreen"

pour que ceci (voir premeir code)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
        label: "Waterlevel",
        fill: false,
        data: data_wl,
       // borderDash: [3, 3],
        type: 'line',
        borderWidth: 2,
        showLine: true,
        pointStyle: 'rectRot',  
        borderWidth: 1,
        pointRadius: 1,
        pointHoverRadius: 13,
        borderColor: window.chartColors.darkblue,
        backgroundColor: window.chartColors.darkblue
        //backgroundColor: ['rgba(15, 37, 172, 1)'],
        //borderColor: ['rgba(45, 114, 66, 1)']
        
    }

L'autre idée que j'avais, c'était de créer un nouveau champ dans ma base de donnée, genre une champs 'borederColor' et un autre 'backgroundColor' et 'denregistré les code rgb et d'utiliser ceci

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
     //backgroundColor: ['rgba(15, 37, 172, 1)'],
        //borderColor: ['rgba(45, 114, 66, 1)']

mais je pense que j'aurai le même problème (j'ai pas encore essayé).
D'ailleur cette option me plait un peu plus, car je pourrais gérer les couleurs depuis mon interface admin.

J'espère que mon explication itait un peu mieux que mon titre .

Merciiiii!

[Beginner.]

Salut,

Je ne m'y connais pas mais on n'utilise pas un parser json normalement ?

Sinon pourquoi on ne pourrait pas ajouter ton tableau à un fichier js ? Je veux dire automatiquement par du code puisse que tu ne veux pas le faire manuellement...

Enfin je n'ai pas l'habitude de ces sujets-là, attendons d'autres éventuelles réponses...

[psychadelic]

d'ou sortent tes window.chartColors.xxx ?

j'ai pas trouvé dans mes doc sur javascript...

js > console.log(window.chartColors.lightblue)
TypeError: window.chartColors is undefined

sinon un simple

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

backgroundColor: "darkgreen"

devrai affecter correctement la couleur

et si tu ne peux pas tronquer "window.chartColors.darkgreen" directement, tu peux sans doute coder de cette manière :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

backgroundColor: ("window.chartColors.darkgreen").substr(19)

ou

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

$data[$row['id_sensor_type']]['datasets']['borderColor'] = substr($color[$row['id_sensor_type']], 19);

[Beginner.]

d'ou sortent tes window.chartColors.xxx ?

D'une base de donnée apparemment à laquelle il accède via php que je ne connais pas mais je dirais que le code php que tu as fournis est ce qu'il lui fallait...