Discussion :

[kami66]

Bonjour,

Je veux importer les données de mon tableau data.txt (PJ), qui est stocké dans un serveur, sous amchart.

Néanmoins, les colonnes de mon tableau sont séparées par deux délimiteurs. Le séparateur entre la première et la deuxième colonne est la virgule, puis pour le reste des colonnes, il s'agit de l'espace.

J'ai utilisé le terme "délimiteur" deux fois dans mon code mais sans donner de résultats.

P.S: Je vous informe que je ne peux pas modifier le tableau avant de l'importer sous amchart car ce dernier est stocké dans un serveur et je veux bien afficher les données en live dans un site.

Pouvez-vous s'il vous plaît corriger mon code ci-dessous!

Merci d'avance
Voici mon tableau :

data.txt


Voici mon 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
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
// 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.option.delimiter = ",";
chart.dataSource.parser.option.delimiter = "\t";
 
chart.dataSource.parser.options.useColumnNames = false;
 
// 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());
 
// Add legend
chart.legend = new am4charts.Legend();

[NoSmoking]

Bonjour,

Néanmoins, les colonnes de mon tableau sont séparées par deux délimiteurs. Le séparateur entre la première et la deuxième colonne est la virgule, puis pour le reste des colonnes, il s'agit de l'espace.

Là au départ il y a un problème de conception de ton fichier !

J'ai utilisé le terme "délimiteur" deux fois dans mon code mais sans donner de résultats.
(...)

Code :

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

1
2
chart.dataSource.parser.option.delimiter = ",";
chart.dataSource.parser.option.delimiter = "\t";

C'est le comportement normal, la deuxième affectation annulant la première.

P.S: Je vous informe que je ne peux pas modifier le tableau avant de l'importer sous amchart car ce dernier est stocké dans un serveur et je veux bien afficher les données en live dans un site.

Le mieux serait quand même de faire modifier le format interne de ce fichier, d'autant qu'il existe visiblement dans celui-ci une date sans aucun « format », exemple sur la première ligne

8.258,201906302058	2.103	0.002	25.822

Pouvez-vous s'il vous plaît corriger mon code ci-dessous!

Déjà pour commencer chart.dataSource.parser.option.delimiter, est incorrect, il faut écrire chart.dataSource.parser.options.delimiter options avec un s.

Ceci étant et attendu que amChart parse les données via une regExp

Code :

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

new RegExp("(\\" + e + '|\\r?\\n|\\r|^)(?:"([^"]*(?:""[^"]*)*)"|([^"\\' + e + "\\r\\n]*))", "gi")

et sauf à savoir comment la faire fonctionner pour qu'elle accepte plusieurs séparateurs, je te propose une autre approche qui consiste à créer toi même les datas.

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
20
21
22
23
24
// Set up data source
chart.dataSource.url = "ton-fichier.txt";
chart.dataSource.parser = new am4core.CSVParser();
 
// délimiteur improbable pour récupération des lignes
chart.dataSource.parser.options.delimiter = "~";
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;
    });
  });
});

[kami66]

Bonjour,

Merci beaucoup NoSmoking pour votre aide. ça marche très bien.

Une autre fois merci