Discussion :

[kami66]

Bonjour,

En effet, je suis entrain d'afficher mes données en temps-réel sous amchart. Néanmoins, je voulais calculer un nouveau paramètre en fonction des autres colonnes de mon tableau. Je m'explique, mon tableau contient 4 colonnes et je souhaiterais crée une 5ème colonne et dans cette dernière je calcule un nouveau paramètre comme suit : (colonne 3 + colonne 4)/2.

J'ai beaucoup cherché dans le site "amchart " (https://www.amcharts.com/) mais je ne trouve pas d'exemples pareils !

Je vous remercie d'avance de me donner quelques pistes!

Bien cordialement


Voici mon tableau de données :data.txt

Code TXT :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
201906302058	2.103	0.002	25.822
201906302108	2.102	0.001	25.802
201906302118	2.106	0.002	26.154
201906302128	2.085	0.001	26.08
201906302138	2.088	0.004	26.183
201906302148	2.105	0.003	26.176
201906302158	2.098	0.002	26.331
201906302208	2.1	0.002	26.357
201906302218	2.077	0.003	26.291
201906302228	2.072	0.004	26.267
201906302238	2.068	0.004	26.17
201906302248	2.057	0.003	26.206
201906302258	2.037	0.001	26.176
201906302308	2.023	0.002	25.96
201906302318	2.044	0.003	25.9
201906302328	2.036	0.002	25.869
201906302338	2.041	0.005	25.954
201906302348	2.04	0.003	26.007
201906302358	2.038	0.004	25.877
201907010008	2.043	0.005	25.871
201907010018	2.039	0.003	25.898
201907010028	2.037	0.004	25.908
201907010038	2.041	0.002	25.955
201907010048	2.035	0.004	26.004
201907010058	2.029	0.002	26.021
201907010108	2.023	0.002	26.038
201907010118	2.035	0.002	25.873
201907010128	2.034	0.002	26.05
201907010138	2.013	0.002	25.726
201907010148	2.031	0.001	25.77
201907010158	2.022	0.002	25.966
201907010208	2.03	0.005	26.037
201907010218	2.035	0.002	25.976
201907010228	2.051	0.002	25.811
201907010238	2.066	0.002	25.642
201907010248	2.064	0.001	25.758
201907010258	2.047	0.001	25.835
201907010308	2.05	0.002	25.929
201907010318	2.076	0.002	25.631
201907010328	2.074	0.001	25.95
201907010338	2.081	0.002	25.959
201907010348	2.092	0.003	25.955
201907010358	2.112	0.003	25.992
201907010408	2.102	0.002	25.947
201907010418	2.111	0.003	25.974
201907010428	2.09	0.003	25.979
201907010438	2.117	0.002	25.941
201907010448	2.107	0.002	25.927
201907010458	2.105	0.001	25.928
201907010508	2.12	0.003	25.925
201907010518	2.122	0.003	25.915
201907010528	2.118	0.003	25.911
201907010538	2.095	0.003	25.902
201907010548	2.119	0.002	25.926
201907010558	2.118	0.005	26
201907010608	2.132	0.003	26.017
201907010618	2.124	0.002	25.926
201907010628	2.112	0.001	25.919
201907010638	2.122	0.006	25.907
201907010648	2.109	0.003	25.909
201907010658	2.093	0.002	25.982
201907010708	2.083	0.003	25.942

Voici mon code ci-dessous :

Code HTML :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
 
<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
 
#chartdiv {
  width: 100%;
  height: 300px;
}
</style>
 
<script>
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
 
// Set up data source
 
chart.dataSource.url = "https://..../amchart/data.txt";
chart.dataSource.parser = new am4core.CSVParser();
 
 
chart.dataSource.parser.options.useColumnNames = false;
 
// Create axes
 
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "col0";
 
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
 
// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "col1";
series1.dataFields.categoryX = "col0";
series1.name = "P";
series1.strokeWidth = 1;
series1.tensionX = 0.7;
series1.bullets.push(new am4charts.CircleBullet());
 
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "col2";
series2.dataFields.categoryX = "col0";
series2.name = "T";
series2.strokeWidth = 1;
series2.tensionX = 0.7;
series2.bullets.push(new am4charts.CircleBullet());
 
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "col3";
series3.dataFields.categoryX = "col0";
series3.name = "V";
series3.strokeWidth = 1;
series3.tensionX = 0.7;
series3.bullets.push(new am4charts.CircleBullet());
 
// Add legend
chart.legend = new am4charts.Legend();
</script>

[mathieu]

les données peuvent être modifiées après analyse du fichier comme expliqué ici :
https://www.amcharts.com/docs/v4/con...ng_loaded_data

donc vous pouvez faire cela par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	chart.dataSource.events.on("parseended", function (ev) {
 
		var data = ev.target.data;
 
		for (var i = 0; i < data.length; i++) {
 
			// ajout d'une colonne "col4"
			data[i]["col4"] = (data[i]["col2"] + data[i]["col3"]) / 2;
 
		}
 
 
	});

[kami66]

Merci beaucoup mathieu pour votre réponse,
En effet ça marche bien pour mon exemple ci-dessus. Vraiment merci. Néanmoins, mon vrai tableau initial contient deux séparateurs "espace" et ",". Donc j'ai d'abord effectué un premier traitement en convertant les "," en "espace".

Voici mon tableau avec 2 séparateurs :
data1.txt

Voici mon code avec importation du tableau avec deux séparateurs, en ajoutant votre code solution pour ajouter une nouvelle colonne (col5)

Code html :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
  width: 100%;
  height: 300px;
}
</style>
<script>
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Set up data source
chart.dataSource.url = "https://..../data1.txt";
chart.dataSource.parser = new am4core.CSVParser();
chart.dataSource.parser.options.useColumnNames = false;
 // récupération et traitement des lignes au chargement
chart.dataSource.events.on("done", function(ev) {
  console.log("Datas chargées");
  // pointe sur les données
  const data = ev.target.data;
  // séparateurs comma ou tabulation
  const regex = /[,\t]/;
  let tab;
  data.forEach(function(elem) {
    // récup. des datas
    tab = elem.col0.split(regex);
    // mise à jour de l'objet
    tab.forEach(function(t, ind) {
      elem["col" + ind] = t;
    });
  });
});
 // Ajout d'une colonne
chart.dataSource.events.on("parseended", function (ev) {
                var data = ev.target.data;
                for (var i = 0; i < data.length; i++) {
                        // ajout d'une colonne "col5"
                        data[i]["col5"] = (data[i]["col2"] + data[i]["col4"]) / 2;
                }
        });
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "col1";
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "col2";
series1.dataFields.categoryX = "col1";
series1.name = "P";
series1.strokeWidth = 1;
series1.tensionX = 0.7;
series1.bullets.push(new am4charts.CircleBullet());
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "col3";
series2.dataFields.categoryX = "col1";
series2.name = "T";
series2.strokeWidth = 1;
series2.tensionX = 0.7;
series2.bullets.push(new am4charts.CircleBullet());
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "col4";
series3.dataFields.categoryX = "col1";
series3.name = "V";
series3.strokeWidth = 1;
series3.tensionX = 0.7;
series3.bullets.push(new am4charts.CircleBullet());
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "col5";
series3.dataFields.categoryX = "col1";
series3.name = "S";
series3.strokeWidth = 1;
series3.tensionX = 0.7;
series3.bullets.push(new am4charts.CircleBullet());
// Add legend
chart.legend = new am4charts.Legend();
// Enable export
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.align = "right";
chart.exporting.menu.verticalAlign = "top";
chart.exporting.menu.items = [
  {
    "label": "...",
    "menu": [
      { "type": "png", "label": "PNG","options": { "quality": 1 } },
          { "type": "csv", "label": "CSV" },
      { "label": "Print", "type": "print" }
    ]
  }
];
chart.exporting.filePrefix = "Conductivité_Flux";
chart.scrollbarX.exportable = false;
series.tooltip.exportable = false;
</script>

Dans ce cas, il a ajouté une colonne "col5" mais avec des valeurs manquantes NaN et il a aussi supprimé la colonne 4 (tableau ci-dessous)



Je vois pas quel est le problème ?

Merci une autre fois pour votre aide. Je suis vraiment très reconnaissant

Cordialement

[NoSmoking]

Bonjour,

Je vois pas quel est le problème ?

le problème se situe au niveau de la gestion/compréhension des indices de ton tableau de données

indice tableau 0	➜ colonne n°1	➜ label = "col0"
indice tableau 1	➜ colonne n°2	➜ label = "col1"
indice tableau 2	➜ colonne n°3	➜ label = "col2"

et ainsi de suite ....

De plus mathieu t'a fourni le code suivant :

Code :

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

1
2
// ajout d'une colonne "col4"
data[i]["col4"] = (data[i]["col2"] + data[i]["col3"]) / 2;

que tu as repris comme suit :

Code :

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

1
2
// ajout d'une colonne "col5"
data[i]["col5"] = (data[i]["col2"] + data[i]["col4"]) / 2;

[kami66]

Bonjour,

Merci NoSmoking pour votre réponse. Effectivement, j'ai bien compris que "col0" correspond à la première colonne du tableau et ainsi de suite.... Peut être vous n'avez pas vu mon tableau "data1", il a 5 colonnes (figure ci-dessous), donc je voulais crée une 6ème colonne dans le tableau mais je devrais la nommer "col5" dans le scrypte. Je pense ce n'est pas le problème de nomination des colonnes du tableau.

Je pense le problème vient d'ici :

Comme mon tableau initial a déjà subi un premier traitement, pour afficher les données à partir de deux séparateurs "," et "espace" selon le code suivant :

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
 // récupération et traitement des lignes au chargement
chart.dataSource.events.on("done", function(ev) {
  console.log("Datas chargées");
  // pointe sur les données
  const data = ev.target.data;
  // séparateurs comma ou tabulation
  const regex = /[,\t]/;
  let tab;
  data.forEach(function(elem) {
    // récup. des datas
    tab = elem.col0.split(regex);
    // mise à jour de l'objet
    tab.forEach(function(t, ind) {
      elem["col" + ind] = t;
    });
  });
});

Donc peut être le tableau a pris un autre nom et c'est possible que le code d'ajout une nouvelle colonne (ci dessous) s'applique toujours sur le tableau initial et non pas sur le tableau niveau 1.

Code :

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

1
2
3
4
5
6
7
8
 // Ajout d'une colonne
chart.dataSource.events.on("parseended", function (ev) {
                var data = ev.target.data;
                for (var i = 0; i < data.length; i++) {
                        // ajout d'une colonne "col5"
                        data[i]["col5"] = (data[i]["col2"] + data[i]["col4"]) / 2;
                }
        });

Je suis pas assez avancé dans la programmation, si vous pouvez m'orienter un peu plus, je suis vraiment reconnaissant

Bien à vous

[NoSmoking]

Je n'avais pas regardé en plein ton code et il s’avère qu'il y a plusieurs points à clarifier.

Ordre des événements d'un CSVParser:

parseended	Param { type: "parseended", target: this }	Invoked when parsing of the loaded data finishes.
done	Param { type: "done", target: this }	Invoked when data source was successfully loaded and parsed.

donc ce que tu fais dans le done il faut le faire dans le parseended et inversement.

Voir CSVParser done/parseended.

Ceci étant ce n'est pas le seul soucis que tu as, il y a la récupération de tes données qui ne correspond pas à ce que tu attends, je t'avais donné une solution que tu n'as pas appliqué en entier et notamment cette ligne

Code :

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

1
2
// délimiteur improbable pour récupération des lignes
chart.dataSource.parser.options.delimiter = "~";

car par défaut le fichier est parsé via la tabulation, donc tu récupères pour chaque ligne

Code :

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

1
2
3
4
5
6
{
  "col0": "8.258,201906302058",
  "col1": "2.103",
  "col2": 0.002,
  "col3": 25.822
}

et non

Code :

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

1
2
3
{
  "col0": "8.258,201906302058\t2.103\t0.002\t25.822"
}

ce qui fait que tout ton traitement foire par la suite à cette ligne

Code :

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

tab = elem.col0.split(regex);

Il te faut déjà corriger cela avant de pouvoir obtenir le résultat voulu.