[highcharts] graphique depuis un csv

**takezo_s** · 26/06/2012, 10h04

Bonjour à tous,

Alors voici mon problème je charge un fichier csv pour faire un graphique avec highchart (je suis encore un noob

)
mon fichier csv:

Code :

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

1
2
3
4
5
6
7
0	1.03645399076138	18.680054645644	26.8678147836078
1	2.44625498591384	18.680054645644	26.8678147836078
2	5.45509322517529	18.680054645644	26.8678147836078
3	2.36362640018202	18.680054645644	26.8678147836078
4	2.28307829582599	18.680054645644	26.8678147836078
5	3.41138672777039	18.680054645644	26.8678147836078
...

Dans ma première colonne j'ai mon abscisse et les trois suivantes mon ordonnée (3 points dont 2 qui constitueront des seuils)

Mon code pour le moment que je n'arrive pas vraiment à adapter à mon résultat attendue:

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
    <script type="text/javascript">
      jQuery(document).ready(function() {
 
 
        var options = {
          chart: {
            renderTo: 'container2',
            defaultSeriesType: 'column'
          },
          title: {
            text: 'Ewarespar Residuals'
          },
          xAxis: {
            categories: []
          },
          yAxis: {
            title: {
              text: 'Units'
            }
          },
          series: []
        };
 
        /*
             Load the data from the CSV file. This is the contents of the file:
 
                    Apples,Pears,Oranges,Bananas,Plums
                    John,8,4,6,5
                    Jane,3,4,2,3
                    Joe,86,76,79,77
                    Janet,3,16,13,15
 
         */
        jQuery.get('/qark/1/graph2.csv', function(data) {
          // Split the lines
          var lines = data.split('\n');
          jQuery.each(lines, function(lineNo, line) {
            var items = line;
 
            // header line containes categories
            if (lineNo == 0) {
              jQuery.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
              });
            }
 
            // the rest of the lines contain data with their name in the first position
            else {
              var series = {
                data: []
              };
              jQuery.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                  series.name = item;
                } else {
                  series.data.push(parseFloat(item));
                }
              });
 
              options.series.push(series);
 
            }
 
          });
 
          var chart = new Highcharts.Chart(options);
        });
 
 
      });
    </script>

Merci d'avance pour votre aide !

**NoSmoking** · 26/06/2012, 20h21

Bonjour,
les enregistrements sont disposés par ligne et pour chaque enregistrement les datas sont séparées par une tabulation.

Il te faut donc faire un .split('\n') pour récupérer les lignes, puis pour chaque ligne un .split('\t') pour récupérer les datas.

**takezo_s** · 27/06/2012, 09h28

Bonjour NoSmoking,

Merci pour votre aide, j'ai en effet rajouté un split et ca fonctionne légèrement mieux le seule probleme c'est que j'obtiens mes résultats sur des graphes différents alors que j'aimerai les avoir réunis

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
      jQuery(document).ready(function() {
 
 
        var options = {
          chart: {
            renderTo: 'container2',
            defaultSeriesType: 'column'
          },
          title: {
            text: 'Ewarespar Residuals'
          },
          xAxis: {
            categories: []
          },
          yAxis: {
            title: {
              text: 'Units'
            }
          },
          series: []
        };
 
        /*
             Load the data from the CSV file. This is the contents of the file:
 
                    Apples,Pears,Oranges,Bananas,Plums
                    John,8,4,6,5
                    Jane,3,4,2,3
                    Joe,86,76,79,77
                    Janet,3,16,13,15
 
         */
        var courbe
        jQuery.get('/qark/1/graph2.csv', function(data) {
          // Split the lines
          var lines = data.split('\n');
          jQuery.each(lines, function(lineNo, line) {
            var items = line.split(';');
 
            // header line containes categories
             {
              jQuery.each(items, function(itemNo, item) {
                if (itemNo == 0) options.xAxis.categories.push("jours");
              });
            }
 
            // the rest of the lines contain data with their name in the first position
            {
              var series = {
                data: []
              };
              jQuery.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                  series.name = parseInt(item);
                } else {
                  if(itemNo == 1) {
                  series.data.push(parseFloat(item));
                }
                }
              });
 
              options.series.push(series);
 
            }
 
          });
 
          var chart = new Highcharts.Chart(options);
        });
 
 
      });

**NoSmoking** · 27/06/2012, 18h34

Envoyé par takezo_s

... ca fonctionne légèrement mieux le seule probleme c'est que j'obtiens mes résultats sur des graphes différents alors que j'aimerai les avoir réunis

je ne vois pas bien ce que cela signifie, peut être as tu mal choisi l'option de la courbe, à voir du coté de plotOptions.

**takezo_s** · 28/06/2012, 10h18

Et bien j'avais 3 repères avec 3 courbes alors que je voulais un repère avec trois courbes mais j'ai réussi à les mettre ensemble seulement je ne comprends pas pourquoi j'ai des points et ils ne sont pas réuni par une ligne ...
j'ai regardé dans les options en mettant type: 'spline' je devrais obtenir des points réunis par des lignes mais la j'ai juste des points en ordonnée

**NoSmoking** · 29/06/2012, 18h49

as tu été jeter un oeil sur leurs démos Highcharts Demo, cela devrait te permettre de mieux cibler ton besoin et ce fonction de l'offre.

**takezo_s** · 02/07/2012, 11h23

Oui j'avais déjà fait un tour dessus, mais je crois qu'il y a un bug avec highcharts car la je n'arrive pas avoir de courbe relier. Je n'ai que des points alors que j'ai mis 'spline' c'est vraiment étrange deplus sur jsfiddle quand je colle mon code j'obtiens des courbes relier ...

**NoSmoking** · 02/07/2012, 18h54

(...)c'est vraiment étrange deplus sur jsfiddle quand je colle mon code j'obtiens des courbes relier ...

je reste dubitatif sur ce coup!

Vérifies quand même qu'il n'y ai pas une option qui fasse sauter le rendu.

Peut être pourrais tu mettre ton code sur jsfiddle.

**takezo_s** · 03/07/2012, 09h35

Et bien je ne pense pas qu'il y ait une option particulière...
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
+$(function () {
    var chart = new Highcharts.Chart({
        chart:{
            zoomType:"xy",
            renderTo:"container",
            title:{text:"Mewma Scores"}
        },
        xAxis:{
            tickInterval:10,        
            categories:["0","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",""]
        },    
yAxis:[{
    lineColor:"#FF0000",
    lineWidth:1,
    max:150,
    title:{text:"T-score"}},
       {lineColor:"#FF0000",
        lineWidth:1,
        linkedTo:0,
        opposite:true,
        title:{"text":"Units"}
       }],        
series:[{
            name:"max",
            type:"spline",
            lineWidth:1,            data:[34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,34.4283248109657,null]},
{
name:"min",
type:"spline",
lineWidth:1,
data:[25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,25.2331473247096,null]},
{
name:"dégradation",
type:"spline",
    lineWidth:10,    
data:[0.934785856113144,9.49818946121924,8.17313737998374,8.19364952786688,7.85786050316547,24.6084780968119,16.4742184566244,13.1079468061459,13.742007537262,8.1224843013004,12.6671661553533,9.1635488342819,6.11479117965266,6.05855879684876,7.81350289616564,7.40502194409132,11.5959727999229,9.86778805732694,12.0723567086532,13.7998781869001,8.11244042161697,7.67738491404992,9.37940691567251,6.68138483511104,24.1497231928125,28.4505666073598,18.2139867680948,20.2916227772795,14.5423970198089,9.69758671258775,8.99532425205845,17.0883241940217,13.7795963190142,14.2896111798233,12.1899503253292,12.5079771652271,13.5601290557528,11.1483931865191,11.9651257569005,14.9640736676029,19.0933328845617,16.736137279183,14.254930031415,12.0789720406716,15.0180269766477,12.3180244010846,8.94075598461183,8.80422654669957,19.0128789561993,22.4015289192551,21.9170289692681,27.0736742457496,23.0755012089647,21.5961494920026,12.1206364655443,32.900571736336,35.8033224577208,22.0745649470371,19.1174458227951,17.6977971356099,15.9931721277111,18.120580683564,15.0823677987569,12.6097038963534,12.7295331861644,26.109003944401,24.7957326183021,18.3610380142523,27.7232981573006,23.4868649884425,23.0733600165461,18.9440785439157,14.5612226775507,24.5081381357149,22.0182468026188,32.3186585265087,31.02137582362,29.7305962288149,31.8667238842057,37.6643623709237,26.7868819800178,15.0923919398284,18.4365302755508,10.7546876735362,5.29058921155852,4.76794667881578,5.45405569755456,10.580378820454,17.5036254800785,11.696870052372,7.41475664963014,14.7316206971692,7.44652926316116,18.4940491889047,13.4965054820224,18.5992856895368,17.2301087276737,22.8421452710671,32.9944089458712,21.7473041722468,23.3421556883622,28.1601298176469,30.4094701674601,126930999434388000,81235840027023500,51990937564214400,33274199973629200,21295488378024900,13629112646162300,8722632191999720,5582484582976220,3572790161231940,2286585815136530,1463414924888760,936585572430260,599414731329278,383625450378162,245520300847672,157132991601452,100565116340689,64361675179826.5,41191471480757.9,26362543719601.7,16872029752285,10798094759594.6,6910782907565.87,4422900904442.22,2830658568599.49,1811620683245.29,1159437406600.5,742038673376.148,474905218326.724,303939445859.973,194521562122.493,124493736013.2,79675685278.6192,50992313235.3945,32635022890.9562,20886374049.462,13367261300.4318,8555084664.76055,5475234377.35988,3504128267.91586,2242679320.13841,1435280638.32832,918626071.414243,587943159.271023,376329271.148846,240872275.441352,154139991.881691,98662872.5300977,63156414.9654615,40432474.2865684,25871903.3608172,null]}
]
});
});

quand je zoom sur ma courbe de dégradation parfois les lignes apparaissent parfois pas très étrange :s

**NoSmoking** · 03/07/2012, 23h01

ton soucis ne viendrait-il pas de valeurs telle que 63156414.9654615 qui est sans commune mesure avec 0.934785856113144.

**takezo_s** · 04/07/2012, 09h24

vous pensez que cela viendrait de ça ? Ce sont des calculs mathématiques et bon la j'ai un donnée légèrement faussé qui donne ce résultat... Je vais tenté avec une autre plage de donnée et je vous dis !

**takezo_s** · 04/07/2012, 14h12

Bon j'ai testé avec d'autres valeurs et le résultat est le même

j'ai réfléchis par rapport au code et je pense que cela vient du push ...

**NoSmoking** · 04/07/2012, 22h36

je ne vois pas de push dans ton code!

**takezo_s** · 05/07/2012, 11h54

C est normal sur le jsfiddle je ne peux faire de get(file..) du coup j'ai convertie mon objet jc en objet json mais mon code est plus au dessus.
Enfin voici la dernière version de 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
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
<div id="graph1">
      <!-- 2. Add the JavaScript to initialize the chart on document ready -->
      <script type="text/javascript">
        jQuery(document).ready(function() {
          var degradation = {
            name: "dégradation",
            type: 'spline',
            lineWidth: 5,
            data: []
          };
          var max = {
            name: "max",
            type: 'spline',
            lineWidth: 1,
            data: []
          };
          var min = {
            name: "min",
            type: 'spline',
            lineWidth: 1,
            data: []
          };
          jQuery.get('/qark/1/graph1.csv', function(data) {
            // Split the lines
            var lines = data.split('\n');
            jQuery.each(lines, function(lineNo, line) {
              var items = line.split(';');
              degradation.data.push(parseFloat(items[1]));
              max.data.push(parseFloat(items[3]));
              min.data.push(parseFloat(items[2]));
            });
            var options = {
              chart: {
                zoomType: 'xy',
                renderTo: 'container'
              },
              title: {
                text: 'Mewma Scores'
              },
              xAxis: {
                tickInterval: 10,
                categories: []
              },
              yAxis: [{
                  lineColor: '#FF0000',
                  lineWidth: 1,
                  max: 150,
                  title: {
                    text: 'T-score'
                  }
                },
                {
                  lineColor: '#FF0000',
                  lineWidth: 1,
                  linkedTo: 0,
                  opposite: true,
                  title: {
                    text: 'Units'
                  }
                }
              ],
              series: []
            };
            jQuery.each(lines, function(lineNo, line) {
              var items = line.split(';');
              options.xAxis.categories.push(items[0]);
            });
            options.series.push(degradation);
            options.series.push(max);
            options.series.push(min);
 
            var chart = new Highcharts.Chart(options);
          });
        });
  <%#*var jsonStr = JSON.stringify(options);%>
  <%#*debug(jsonStr);%>
      </script>
      <!-- 3. Add the container -->
      <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
    </div>

Sais tu comment je pourrais rendre dynamique le chargement de fichier sur ruby on rails au lieu de mettre jQuery.get(...)?

[highcharts] graphique depuis un csv

jQuery

Discussions similaires

Partager

Partager