Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    novembre 2013
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : novembre 2013
    Messages : 40
    Points : 32
    Points
    32
    Par défaut [amCharts] Ajouter une colonne et calculer un nouveau paramètre dans le tableau importé
    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>

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    7 190
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 7 190
    Points : 11 297
    Points
    11 297
    Par défaut
    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;
     
    		}
     
     
    	});

  3. #3
    Nouveau membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    novembre 2013
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : novembre 2013
    Messages : 40
    Points : 32
    Points
    32
    Par défaut
    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)

    Nom : table export.PNG
Affichages : 29
Taille : 10,5 Ko

    Je vois pas quel est le problème ?

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

    Cordialement

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 839
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 839
    Points : 33 634
    Points
    33 634
    Par défaut
    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;

  5. #5
    Nouveau membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    novembre 2013
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : novembre 2013
    Messages : 40
    Points : 32
    Points
    32
    Par défaut
    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

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 839
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 839
    Points : 33 634
    Points
    33 634
    Par défaut
    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.

  7. #7
    Nouveau membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    novembre 2013
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : novembre 2013
    Messages : 40
    Points : 32
    Points
    32
    Par défaut
    Bonjour,

    Merci NoSmoking pour votre réponse.

    Désolé pour l'oubli de la commande de "délimiteur improbable pour récupération des lignes".

    Donc je reviens sur mon problème de base, comment adapter les deux commandes "done" et "parseended"

    Selon votre réponse ci-dessus : "donc ce que tu fais dans le done il faut le faire dans le parseended et inversement". J'ai essayé d'appliquer ça (voir mon code ci-dessous) mais le code ne fonctionne pas.

    Je suis vraiment bloqué à cette étape. Pouvez vous s'il vous plait me clarifier un peu plus comment mettre ces 2 commandes "done" et "parseended" !

    Merci beaucoup

    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
    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
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    
    <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://cefrem.univ-perp.fr/qgis2web/amchart/qst/data.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;
        });
      });
      
      // mise à jour de l'objet
    		var data = ev.target.data;
     		for (var i = 0; i < data.length; i++) {
     		// ajout d'une colonne "col4"
    			data[i]["col5"] = (data[i]["col2"] + data[i]["col4"]) / 2;
     
    		}
      
    });
       
     
     // Ajout d'une colonne 
     
    chart.dataSource.events.on("parseended", 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;
        });
      });
    
     
      // mise à jour de l'objet
    		var data = ev.target.data;
     		for (var i = 0; i < data.length; i++) {
     		// ajout d'une colonne "col4"
    			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>

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 839
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 839
    Points : 33 634
    Points
    33 634
    Par défaut
    Donc je reviens sur mon problème de base, comment adapter les deux commandes "done" et "parseended"
    Tu peux faire d'une pierre deux coups en groupant les traitements dans un ou l'autre des événements sans forcément les dissocier.
    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
    // récupération et traitement des lignes au chargement
    chart.dataSource.events.on("parseended", function(ev) {
    //chart.dataSource.events.on("done", function (ev) {
      console.log("Datas ->", ev.type);
      // pointe sur les données
      const data = ev.target.data;
      console.log("(0)", JSON.stringify(data[0], null, 2));
      // 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 "col5"
        // ATTENTION au type des données
        elem["col5"] = (parseFloat(elem["col2"]) + parseFloat(elem["col4"])) / 2;
      });
      console.log("(1)", JSON.stringify(data[0], null, 2));
    });
    tu peux changer le type de l'événement pour observer le résultat final.

    Un dernier point, j'attire ton attention sur ces lignes
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    // ajout d'une colonne "col5"
    // ATTENTION au type des données
    elem["col5"] = (parseFloat(elem["col2"]) + parseFloat(elem["col4"])) / 2;
    il te faut « caster » les données de String en Number pour éviter la concaténation avant division.

  9. #9
    Nouveau membre du Club
    Femme Profil pro
    Étudiant
    Inscrit en
    novembre 2013
    Messages
    40
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : novembre 2013
    Messages : 40
    Points : 32
    Points
    32
    Par défaut
    Merci beaucoup NoSmoking. J'apprends beaucoup selon vos réponses. Merci une autre fois pour vos conseils. Le problème est résolu.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 05/03/2015, 22h00
  2. Réponses: 3
    Dernier message: 04/07/2014, 13h48
  3. Réponses: 14
    Dernier message: 25/07/2013, 10h29
  4. Réponses: 7
    Dernier message: 15/05/2007, 12h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo