Monitor - Affichage graphique directement dans une cellule

[Chris54220]

Petit Question il a déjà quelqu'un qui a fait la mise a jour et qui a testé ?

Car chez moi je n'arrive pas a custom les graph

[papoo]

je suis en train de tester
chez moi ça donne ça

graph.png (515.4 Kio) Consulté 12452 fois

comme vil1driver l'indique seuls les graphs jour (day) fonctionnent.
chez moi impossible d'afficher les graphiques en jaune, ils restent désespérément en bleu quelque soit la couleur définie dans le css
Mes compteurs sont de type RFXMeter counter
mon parametrage de frontpage_setting.js

Code : Tout sélectionner

['Temperature exterieure','Graph',   'graph1_1', 'temp ext','temp','day','te','°C'],
['EDF','Graph',  'graph1_2',  'EDF','counter','day','v','kWh'],
['Compteur Eau Froide','Graph', 'graph1_3',  'Eau Froide','counter','day','v','m3'],
['Compteur Gaz','Graph', 'graph1_4', 'GAZ','counter','day','v','Litres'],

[Chris54220]

mon paramétrage de frontpage_setting.js

Code : Tout sélectionner

				['Raspi','Graph','domo_1','Raspberry','temp','day','te','°C'],									// Temperature Raspberry Graph
				['Raspi CPU','Graph','domo_2','CPU','Percentage','day','v','pour'],							// CPU Raspberry Graph
				['UPLOAD','Graph','domo_3','Upload','Percentage','day','v','Mbit/s'],							// Upload Graph
				['DOWNLOAD','Graph','domo_4','Download','Percentage','day','v','Mbit/s'],						// Download graph

Moi voila ce que sa donne et j'ai beau essai de changer mon css de ma page sa change pas du tout

[vil1driver]

Si le graphique est visible c'est que le settings est correct
Mais quelle est la partie css ?

[Chris54220]

j'ai fait un copie coller du tien pour les essai

Code : Tout sélectionner

#domo_1 .highcharts-background {
   fill: rgba(0, 0, 0, 0.4);
}
#domo_1 .highcharts-title, #domo_1 .highcharts-axis-title, #domo_1 .highcharts-axis-labels{
   fill: #F2DDB3;
}
#domo_1 .highcharts-color-0{
   stroke: yellow;
}
#domo_1 .highcharts-color-1{
   stroke: yellow;
}

#domo_2 .highcharts-background {
   fill: rgba(0, 0, 0, 0.4);
}
#domo_2 .highcharts-title, #domo_2 .highcharts-axis-title, #domo_2 .highcharts-axis-labels {
   fill: #F2DDB3;
}
#domo_2 .highcharts-color-0{
   stroke: yellow;
}
#domo_2 .highcharts-color-1{
   stroke: yellow;
}

#domo_3 .highcharts-background {
   fill: rgba(0, 0, 0, 0.4);
}
#domo_3 .highcharts-title, #domo_3 .highcharts-axis-title, #domo_3 .highcharts-axis-labels {
   fill: #F2DDB3;
}

#domo_3 .highcharts-color-0{
   stroke: yellow;
}
#domo_3 .highcharts-color-1{
   stroke: yellow;
}

#domo_4 .highcharts-background {
   fill: rgba(0, 0, 0, 0.4);
}
#domo_4 .highcharts-title, #domo_4 .highcharts-axis-title, #domo_4 .highcharts-axis-labels {
   fill: #F2DDB3;
}
#domo_4 .highcharts-color-0{
   stroke: yellow;
}
#domo_4 .highcharts-color-1{
   stroke: yellow;
}

[vil1driver]

Dans domo.css ?
Et t'as bien la mise à jour de highcharts.js ?

[Chris54220]

Dans domo.css ?
Et t'as bien la mise à jour de highcharts.js ?

Oui ces bien dans domo.css

Code : Tout sélectionner

#domo_1a, #domo_2a, #domo_3a, #domo_4a
{
    position: absolute;
    width: 130px;
    height: 60px;
    margin-top: -210px;
    font-family: arimo;
    font-weight: bold;
    color: #999;
    font-size: 40px;
    text-shadow: 1px 1px 4px black;
    text-align: left;
    margin-left: 6px;
	border: 1px solid transparent;
	line-height: 60px; 
}

#domo_1b, #domo_2b, #domo_3b, #domo_4b
{
    position: absolute;
    height: 60px;
    margin-top: -210px;
    font-family: arimo;
    font-weight: bold;
    color: #999;
    font-size: 40px;
    text-shadow: 1px 1px 4px black;
    /*margin-left: 145px;*/
    margin-left: 120px;
    width: 183px;
	border: 1px solid transparent;
	line-height: 60px; 
	z-index:2;
}

#domo_1c, #domo_2c, #domo_3c, #domo_4c
{
    position: absolute;
    width: 130px;
    height: 60px;
    /*margin-left: 338px;*/
    margin-left: 288px;
    margin-top: -210px;
    font-size: 40px;
	font-family: arimo;
	font-weight: bold;
	color: #999;
	text-shadow: 1px 1px 4px black;
	border: 1px solid transparent;
	text-align: right;
	line-height: 60px; 
}

#domo_1d, #domo_2d, #domo_3d, #domo_4d
{
    position: absolute;
    width: 130px;
    height: 60px;
    margin-left: 6px;
    margin-top: -141px;
    font-size: 40px;
	font-family: arimo;
	font-weight: bold;
	color: #999;
	text-shadow: 1px 1px 4px black;
	border: 1px solid transparent;
    text-align: left;
	line-height: 60px; 
}

#domo_1e, #domo_2e, #domo_3e, #domo_4e
{
    position: absolute;
    width: 130px;
    height: 60px;
    /*margin-left: 338px;*/
    margin-left: 305px;
    margin-top: -141px;
    font-size: 40px;
	font-family: arimo;
	font-weight: bold;
	color: #999;
	text-shadow: 1px 1px 4px black;
	border: 1px solid transparent;
    text-align: right;
	line-height: 60px; 
}

#domo_1f, #domo_2f, #domo_3f, #domo_4f
{
    position: absolute;
    width: 130px;
    height: 60px;
    margin-left: 6px;
    margin-top: -72px;
    font-family: arimo;
    font-weight: bold;
    color: #999;
    font-size: 40px;
    text-shadow: 1px 1px 4px black;
    text-align: left;
	border: 1px solid transparent;
	line-height: 60px; 
}

#domo_1g, #domo_2g, #domo_3g, #domo_4g
{
    position: absolute;
    height: 60px;
    margin-top: -72px;
    font-family: arimo;
    font-weight: bold;
    color: #999;
    font-size: 40px;
    text-shadow: 1px 1px 4px black;
    text-align: right;
    /*margin-left: 338px;*/
    margin-left: 305px;
    width: 130px;
	border: 1px solid transparent;
	line-height: 60px; 
}

#domo_1, #domo_2, #domo_3, #domo_4 
{
	font-family: arimo;
	font-weight: bold;
	/*width: 454px;*/
	width: 420px;
	padding: 10px;
	border: 1px solid transparent;
 	box-shadow: 1px 1px 1px #999; 
	border-radius: 5px;
	height: 185.5px;	
	line-height: 195px; 
	font-size: 80px;	
	color: #999;
	margin: 0px;
	text-shadow: 1px 1px 4px black;
}

#domo_1 .highcharts-background {
   fill: rgba(0, 0, 0, 0.4);
}
#domo_1 .highcharts-title, #domo_1 .highcharts-axis-title, #domo_1 .highcharts-axis-labels{
   fill: #F2DDB3;
}
#domo_1 .highcharts-color-0{
   stroke: yellow;
}
#domo_1 .highcharts-color-1{
   stroke: yellow;
}

#domo_2 .highcharts-background {
   fill: rgba(0, 0, 0, 0.4);
}
#domo_2 .highcharts-title, #domo_2 .highcharts-axis-title, #domo_2 .highcharts-axis-labels {
   fill: #F2DDB3;
}
#domo_2 .highcharts-color-0{
   stroke: yellow;
}
#domo_2 .highcharts-color-1{
   stroke: yellow;
}

#domo_3 .highcharts-background {
   fill: rgba(0, 0, 0, 0.4);
}
#domo_3 .highcharts-title, #domo_3 .highcharts-axis-title, #domo_3 .highcharts-axis-labels {
   fill: #F2DDB3;
}

#domo_3 .highcharts-color-0{
   stroke: yellow;
}
#domo_3 .highcharts-color-1{
   stroke: yellow;
}

#domo_4 .highcharts-background {
   fill: rgba(0, 0, 0, 0.4);
}
#domo_4 .highcharts-title, #domo_4 .highcharts-axis-title, #domo_4 .highcharts-axis-labels {
   fill: #F2DDB3;
}
#domo_4 .highcharts-color-0{
   stroke: yellow;
}
#domo_4 .highcharts-color-1{
   stroke: yellow;
}


#domo_5, #domo_6, #domo_7, #domo_8, #domo_9,
#domo_10, #domo_11, #domo_12, #domo_13, #domo_14
 {
	font-family: arimo;
	font-weight: bold;
	/*width: 162px;*/
	width: 152px;
	padding: 10px;
	border: 1px solid transparent;
	border-radius: 0px;
	height: 58px;
	line-height: 55px; 		
	color: #999;
	font-size:40px;
	text-shadow: 1px 1px 4px black;
/* 	margin: 2px;
	margin-top: -2px; */
}
#domo_7, #domo_12
{ 
	/*width: 184px;*/ 
	width: 154px; 
}
#desc_domo_1, #desc_domo_2, #desc_domo_3, #desc_domo_4
{
    font-family: arimo;
    font-weight: normal;
	color: #F2DDB3;
    font-size: 30px;
    margin-top: -20px;
    height: 25px;
    line-height: 1px;
	text-shadow: 1px 1px 4px black;
}

#desc_domo_5, #desc_domo_6, #desc_domo_7, #desc_domo_8, #desc_domo_9,
#desc_domo_10, #desc_domo_11, #desc_domo_12, #desc_domo_13, #desc_domo_14
 {
	font-family: arimo;
	font-weight: normal;
	color: #F2DDB3;
	font-size: 17px;
	margin-top: -20px;
	height: 25px;
	line-height: 15px;
	text-shadow: 1px 1px 4px black;
}

#ls_domo_1, #ls_domo_2, #ls_domo_3, #ls_domo_4,
#ls_domo_5, #ls_domo_6, #ls_domo_7, #ls_domo_8, #ls_domo_9,
#ls_domo_10, #ls_domo_11, #ls_domo_12, #ls_domo_13, #ls_domo_14
 {
	font-family: arimo;
	font-weight: normal;
	color: #999;
	font-size: 12px;
	margin-top: -20px;
	height: 20px;
	line-height: 65px;
	text-shadow: 1px 1px 5px black;
}

tu parle de highcharts.min.js ??
car il as pas de highcharts.js dans ta mise a jour

[vil1driver]

Heu oui désolé mais je pense que oui tu dois avoir le bon.

[Chris54220]

oui j'ai le dernier
j'ai même essai de re Install toute la custom
sans mes modifie a moi et sa me fait la même chose

[Chris54220]

Bon après des tests et encore des Tests
je vous annonce que j'ai résolu mon Problème [image 1]


Bon il reste un petit soucis (C'est que je ne sais pas comment j'ai réussi a faire cela)

mais je vais vous expliquer ce que j'ai fait pour que cela s'affiche correctement [image 2]


Allez sur votre Custom Page (Avec Google Chrome)

Puis un Petit (F12) pour afficher la console

Quand vous vous retrouvez dans la console allez dans l'ongle Sources (Indice 1)

Il va falloir aller chercher maintenant le fichier de la page que vous souhaitez (Pour moi ces domo.css) (Indice 2)

Maintenant nous allons devoir aller sur le bouton Format c'est à dire les deux { } (Indice 3)

Une fois que vous auriez cliqué sur ce bouton, l'affichage se modifiera pour devenir l'affichage que vous voyez dans la partie inferieur sur l'image 2 (un peu plus haut).

Ce même code, il va falloir le sélectionner entièrement, le copier et le coller dans votre fichier .css de votre page de graphique, puis y coller votre code.

Sauvegardez, et revenez sur votre Custom Page pour ainsi rafraichir votre monitor avec le combo Ctrl+F5.

Vous devriez normalement avoir l'affichage de la page de graphique qui a été modifié.