Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1939 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Jqplot graphique et affichage sur multiple ligne

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Jqplot graphique et affichage sur multiple ligne

n°2280581
pioupiou12​32
Posté le 02-05-2016 à 14:28:41  profilanswer
 

Bonjour,
 
Je cherche à affiche les résultats de plusieurs ligne sur un X donné, à partir d'une ligne vertical.
 
Je peux vous montrer l'exemple avec 1 ligne, mais je n'arrive pas à afficher tout les résultats.
[url]
http://jsfiddle.net/xwhqV/92/[/url]
 
Merci d'avance :)

mood
Publicité
Posté le 02-05-2016 à 14:28:41  profilanswer
 

n°2280597
pioupiou12​32
Posté le 02-05-2016 à 16:14:33  profilanswer
 

UP

n°2280662
pioupiou12​32
Posté le 03-05-2016 à 09:29:46  profilanswer
 

up

n°2280675
pioupiou12​32
Posté le 03-05-2016 à 11:55:54  profilanswer
 

UP :bounce:

n°2280706
pioupiou12​32
Posté le 03-05-2016 à 16:04:42  profilanswer
 

Bon bon bon, je rencontre 2 problèmes 1):
 
Quand je suis l'affichage avec des alertes ça me mets 1 puis l'autre mais jamais les deux en simultanés ^^.
 
 

Code :
  1. var mydata = [[0,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
  2. var mydata2 = [[0,5],[1,11],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
  3. $(document).ready(function(){
  4.   var plot1 = $.jqplot (
  5.       'chart1',
  6.       [mydata,mydata2],
  7.       {
  8.           seriesDefaults: {
  9.               showMarker: false
  10.           },
  11.           cursor: {
  12.               show: true,
  13.               showTooltip: true,
  14.               showVerticalLine: true,
  15.               showHorizontalLine: false
  16.           },
  17.           highlighter: {
  18.               show: true,
  19.               showTooltip: false
  20.          }
  21.       }
  22.   );
  23. });
  24. //Show nearest point's tooltip
  25. $("#chart1" ).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){
  26.     var c_x = datapos.xaxis;
  27.     var index_x = -1;
  28.     var pos_index = 0;
  29.     var low = 0;
  30.     var high = data.data[0].length-1;
  31.     while(high - low > 1){
  32.         var mid = Math.round((low+high)/2);
  33.         var current = data.data[0][mid][0];
  34.         if(current <= c_x)
  35.             low = mid;
  36.         else
  37.             high = mid;
  38.     }
  39.     if(data.data[0][low][0] == c_x){
  40.         high = low;
  41.         index_x = high;
  42.     }else{
  43.         var c_low = data.data[0][low][0];
  44.         var c_high = data.data[0][high][0];
  45.         if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){
  46.             index_x = low;
  47.         }else{
  48.             index_x = high; 
  49.         }
  50.     }
  51.     //Display marker and tooltip
  52.     if(data.series[0].data[index_x]){
  53.         var x = data.series[0].gridData[index_x][0];
  54.         var y = data.series[0].gridData[index_x][1];
  55.         var r = 5;
  56.         var highlightCanvas = $(".jqplot-highlight-canvas" )[0];
  57.         var context = highlightCanvas.getContext('2d');
  58.         context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
  59.         context.strokeStyle = 'rgba(47,164,255,1)';
  60.         context.fillStyle = 'rgba(47,164,255,1)';
  61.         context.beginPath();
  62.         context.arc(x,y,r,0,Math.PI*2,true);
  63.         context.closePath();
  64.         context.stroke();
  65.         context.fill();
  66.         //Display tooltip on nearest point
  67.         var highlightTooltip = $(".jqplot-highlighter-tooltip" );
  68.         var val_x = data.data[0][index_x][0];
  69.         var val_y = data.data[0][index_x][1];
  70.         highlightTooltip.html("X : "+val_x+"<br/>Y : "+val_y);
  71.         highlightTooltip.css({'left': x+'px', 'top': (y-10)+'px', 'display': 'block'});         
  72.     }
  73. });


 
Et aussi quand je fais un petit zoom ça me zap les points après le dézoom :'(

n°2280768
pioupiou12​32
Posté le 04-05-2016 à 10:14:36  profilanswer
 

Up

n°2280811
pioupiou12​32
Posté le 04-05-2016 à 14:52:47  profilanswer
 

Code :
  1. var mydata = [[0,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
  2. var mydata2 = [[0,5],[1,11],[2,2],[3,7],[4,4],[5,7],[6,4],[7,8],[8,7]];
  3. $(document).ready(function(){
  4.   var plot1 = $.jqplot (
  5.       'chart1',
  6.       [mydata,mydata2],
  7.       {
  8.           seriesDefaults: {
  9.               showMarker: false
  10.           },
  11.           cursor: {
  12.               show: true,
  13.               showTooltip: true,
  14.               showVerticalLine: true,
  15.               showHorizontalLine: false
  16.           },
  17.           highlighter: {
  18.               show: true,
  19.               showTooltip: true
  20.          }
  21.       }
  22.   );
  23. });
  24. //Show nearest point's tooltip
  25. $("#chart1" ).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){
  26.        for(i=0; i <= data.series.length; i++)
  27.     {
  28.     alert(i);
  29.     var c_x = datapos.xaxis;
  30.     var index_x = -1;
  31.     var pos_index = 0;
  32.     var low = 0;
  33.     var high = data.data[i].length-1;
  34.     while(high - low > 1){
  35.         var mid = Math.round((low+high)/2);
  36.         var current = data.data[i][mid][0];
  37.         if(current <= c_x)
  38.             low = mid;
  39.         else
  40.             high = mid;
  41.     }
  42.     if(data.data[i][low][0] == c_x){
  43.         high = low;
  44.         index_x = high;
  45.     }else{
  46.         var c_low = data.data[i][low][0];
  47.         var c_high = data.data[i][high][0];
  48.         if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){
  49.             index_x = low;
  50.         }else{
  51.             index_x = high; 
  52.         }
  53.     }
  54.      
  55.     //Display marker and tooltip
  56.  
  57.           var x = data.series[0].gridData[index_x][0];
  58.           var y=[];
  59.           y[i] = data.series[i].gridData[index_x][1];
  60.          
  61.           var r = 5;
  62.           var highlightCanvas=[];
  63.           var highlightTooltip=[];
  64.           highlightTooltip[i] = $(".jqplot-highlighter-tooltip" );
  65.           val_x=[];
  66.           val_y=[];
  67.          
  68.            val_x[i] = data.data[i][index_x][0];
  69.            val_y[i] = data.data[i][index_x][1];
  70.           highlightTooltip[i].html("X : "+val_x[i]+"<br/>Y : "+val_y[i]);
  71.           highlightTooltip[i].css({'left': x+'px', 'top': (y[i]-10)+'px', 'display': 'block'}); 
  72.           highlightCanvas[i] = $(".jqplot-highlight-canvas" )[i];
  73.           var context=[];
  74.           context[i] = highlightCanvas[i].getContext('2d');
  75.           context[i].clearRect(0,0,highlightCanvas[i].width,highlightCanvas[i].height);
  76.           context[i].strokeStyle = 'rgba(47,164,255,1)';
  77.           context[i].fillStyle = 'rgba(47,164,255,1)';
  78.           context[i].beginPath();
  79.          
  80.           context[i].arc(x,y,r,0,Math.PI*2,true);
  81.           context[i].closePath();
  82.           context[i].stroke();
  83.           context[i].fill();
  84.       }
  85.    
  86.    
  87. });


 
Bon alors je doute maintenant ce n'est pas faute d'avoir essayé ^^, je ne sais pas si c'est possible tout simplement en canevas d'afficher  tooltips en même qui renvoi  2 données différentes.
 


Message édité par pioupiou1232 le 04-05-2016 à 14:53:26
n°2280889
pioupiou12​32
Posté le 06-05-2016 à 13:44:22  profilanswer
 

Alors j'ai la réponse!! j'ai  crée des clones pour l’affichage, seulement quelqu'un à une solution plus clair (sinon je ferai avec) ? Apparemment le bug du zoom s'est arrangé "tout seul".
 
 
Je vous ai mis le code directement à lancer en .html:
 
 

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr" xmlns:og="http://ogp.me/ns#">
  3. <head>
  4.  <meta charset="iso-8859-1" />
  5.  <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="  crossorigin="anonymous"></script>
  6.  <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
  7.  <script language="javascript" type="text/javascript" src="plugins/jqplot.highlighter.js"></script>
  8.  <script language="javascript" type="text/javascript" src="plugins/jqplot.cursor.js"></script>
  9. </thead>
  10. <body>
  11.  <div id="chart1"></div>
  12. </body>
  13. <script>
  14.  var mydata = [[0,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
  15.  var mydata2 = [[0,5],[1.5,11],[2,2],[3,7],[4,4],[5,7],[6,4],[7,8],[8,7]];
  16.  $(document).ready(function(){
  17.    var plot1 = $.jqplot (
  18.     'chart1',
  19.     [mydata, mydata2],
  20.     {
  21.      seriesDefaults: {
  22.       showMarker: false
  23.      },
  24.      cursor: {
  25.       show: true,
  26.       showTooltip: false,
  27.       showVerticalLine: true,
  28.       showHorizontalLine: false
  29.      },
  30.      highlighter: {
  31.       show: true,
  32.       showTooltip: true
  33.      }
  34.     }
  35.    );
  36.  });
  37. $("#chart1" ).bind('jqplotMouseMove', function(ev, seriesIndex, pointIndex, neighbor, data){
  38.  var current_position_x = pointIndex.xaxis;
  39.  var index_x = -1;
  40.  var pos_index = 0;
  41.  // Pour chaque series
  42.  var low = 0;
  43.  var high = data.data[0].length-1; // Nombre totale de "point" de notre série
  44.  while(high - low > 1){
  45.   var mid = Math.round((low+high)/2); // La moitié du nombre de point de la serie ?
  46.   var current = data.data[0][mid][0]; // Position x du "point"  
  47.   if(current <= current_position_x) // Si ce x ce trouve avant le x de notre curseur
  48.    low = mid;
  49.   else
  50.    high = mid;
  51.  }
  52.  if(data.data[0][low][0] == current_position_x){
  53.   high = low;
  54.   index_x = high;
  55.  }else{
  56.   var c_low = data.data[0][low][0];
  57.   var c_high = data.data[0][high][0];
  58.   if(Math.abs(c_low - current_position_x) < Math.abs(c_high - current_position_x))
  59.    index_x = low;
  60.   else
  61.    index_x = high; 
  62.  }
  63.  $(".clone" ).remove();
  64.  //Display marker and tooltip
  65.  $.each(data.series, function(i) {
  66.   if(data.series[i].data[index_x]){
  67.    var x = data.series[i].gridData[index_x][0];
  68.    var y = data.series[i].gridData[index_x][1];
  69.    var r = 5;
  70.    var highlightCanvas = $(".jqplot-lineRenderer-highlight-canvas" )[0];
  71.    var context = highlightCanvas.getContext('2d');
  72.    //context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
  73.    context.strokeStyle = 'rgba(47,164,255,1)';
  74.    context.fillStyle = 'rgba(47,164,255,1)';
  75.    context.beginPath();
  76.    context.arc(x,y,r,0,Math.PI*2,true);
  77.    context.closePath();
  78.    context.stroke();
  79.    context.fill();
  80.    //Display tooltip on nearest point
  81.    var cloneTest = $(".jqplot-highlighter-tooltip" ).clone();
  82.    cloneTest.addClass("clone" );
  83.    $("#chart1" ).append(cloneTest);
  84.    var val_x = data.data[i][index_x][0];
  85.    var val_y = data.data[i][index_x][1];
  86.    cloneTest.html("X : "+val_x+"<br/>Y : "+val_y);
  87.    cloneTest.css({'left': x+'px', 'top': (y-10)+'px', 'display': 'block'});
  88.   }
  89.  });
  90. });
  91. </script>
  92. </html>


 
Je vais maintenant implanter mes données. Je vous tien au courant.

n°2281064
pioupiou12​32
Posté le 10-05-2016 à 11:15:38  profilanswer
 

J'aimerai savoir si il est possible de faire apparaître les X là ou la VerticalLine est, en gras ?
 

Code :
  1. <!DOCTYPE html>
  2.     <html lang="fr" xmlns:og="http://ogp.me/ns#">
  3.     <head>
  4.      <meta charset="iso-8859-1" />
  5.      <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="  crossorigin="anonymous"></script>
  6.      <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
  7.      <script language="javascript" type="text/javascript" src="plugins/jqplot.highlighter.js"></script>
  8.      <script language="javascript" type="text/javascript" src="plugins/jqplot.cursor.js"></script>
  9.     </thead>
  10.     <body>
  11.      <div id="chart1"></div>
  12.     </body>
  13.     <script>
  14.      var mydata = [[0,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
  15.      var mydata2 = [[0,5],[1,11],[2,2],[3,7],[4,4],[5,7],[6,4],[7,8],[8,7]];
  16.      var mydata3 = [[0,7],[1,1],[2,3],[3,8],[4,7],[5,4],[6,5],[7,7],[8,4]];
  17.      $(document).ready(function(){
  18.        var plot1 = $.jqplot (
  19.         'chart1',
  20.         [mydata, mydata2,mydata3],
  21.         {
  22.          seriesDefaults: {
  23.           showMarker: false
  24.          },
  25.          legend:
  26.          {
  27.           Cursor:"default",
  28.           fontsize:20,
  29.           fontFamily:"calibri",
  30.           fontColor:"black",
  31.           fontStyle:"norma"
  32.          },
  33.          cursor: {
  34.           show: true,
  35.           showTooltip: false,
  36.           showVerticalLine: true,
  37.           showHorizontalLine: false,
  38.           zoom: true
  39.          },
  40.          highlighter: {
  41.           show: true,
  42.           showTooltip: true
  43.          },
  44.         }
  45.        );
  46.      });
  47.     $("#chart1" ).bind('jqplotMouseMove', function(ev, seriesIndex, pointIndex, neighbor, data){
  48.      var current_position_x = pointIndex.xaxis;
  49.      var index_x = -1;
  50.      var pos_index = 0;
  51.      // Pour chaque series
  52.      var low = 0;
  53.      var high = data.data[0].length-1; // Nombre totale de "point" de notre série
  54.      while(high - low > 1){
  55.       var mid = Math.round((low+high)/2); // La moitié du nombre de point de la serie ?
  56.       var current = data.data[0][mid][0]; // Position x du "point"   
  57.       if(current <= current_position_x) // Si ce x ce trouve avant le x de notre curseur
  58.        low = mid;
  59.       else
  60.        high = mid;
  61.      }
  62.      if(data.data[0][low][0] == current_position_x){
  63.       high = low;
  64.       index_x = high;
  65.      }else{
  66.       var c_low = data.data[0][low][0];
  67.       var c_high = data.data[0][high][0];
  68.       if(Math.abs(c_low - current_position_x) < Math.abs(c_high - current_position_x))
  69.        index_x = low;
  70.       else
  71.        index_x = high;
  72.      }
  73.      $(".clone" ).remove();
  74.      //Display marker and tooltip
  75.      $.each(data.series, function(i) {
  76.       if(data.series[i].data[index_x]){
  77.        var x = data.series[i].gridData[index_x][0];
  78.        var y = data.series[i].gridData[index_x][1];
  79.        var r = 5;
  80.        var highlightCanvas = $(".jqplot-lineRenderer-highlight-canvas" )[0];
  81.        var context = highlightCanvas.getContext('2d');
  82.        //context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
  83.        context.strokeStyle = data.series[i].color;
  84.        context.fillStyle = data.series[i].color;
  85.        context.beginPath();
  86.        context.arc(x,y,r,0,Math.PI*2,true);
  87.        context.fillText("Y :"+data.data[i][index_x][1],x + 3 ,y +15);
  88.        context.font="20px Georgia";
  89.        context.closePath();
  90.        context.stroke();
  91.        context.fill();
  92.        //Display tooltip on nearest point
  93.       }
  94.      });
  95.     });
  96.     </script>
  97.     </html>


 
Je vous donne le code avec des données en dure :).
 
Ensuite j'ai quelque problème sur l'affichage des legends, le problème c'est que quand j'affiche les legends en Inside, ca affiche mais de façon très moche^^.
 
 
Voilà j'espère que vous avez des réponses :)

n°2281107
pioupiou12​32
Posté le 10-05-2016 à 16:37:06  profilanswer
 

Code :
  1. <!DOCTYPE html>
  2.     <html lang="fr" xmlns:og="http://ogp.me/ns#">
  3.     <head>
  4.      <meta charset="iso-8859-1" />
  5.      <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="  crossorigin="anonymous"></script>
  6.      <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
  7.      <script language="javascript" type="text/javascript" src="plugins/jqplot.highlighter.js"></script>
  8.      <script language="javascript" type="text/javascript" src="plugins/jqplot.cursor.js"></script>
  9.     </thead>
  10.     <body>
  11.      <div id="chart1"></div>
  12.     </body>
  13.     <script>
  14.      var mydata = [[0,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
  15.      var mydata2 = [[1,11],[2,2],[3,7],[4,4],[5,7],[6,4],[7,8],[8,7],[9,6]];
  16.      var mydata3 = [[0,7],[1,1],[2,3],[3,8],[4,7],[5,4],[6,5],[7,7],[8,4]];
  17.      $(document).ready(function(){
  18.        var plot1 = $.jqplot (
  19.         'chart1',
  20.         [mydata, mydata2,mydata3],
  21.         {
  22.          seriesDefaults: {
  23.           showMarker: false
  24.          },
  25.          legend:
  26.          {
  27.           Cursor:"default",
  28.           fontsize:20,
  29.           fontFamily:"calibri",
  30.           fontColor:"black",
  31.           fontStyle:"norma"
  32.          },
  33.          cursor: {
  34.           show: true,
  35.           showTooltip: false,
  36.           showVerticalLine: true,
  37.           showHorizontalLine: false,
  38.           zoom: true
  39.          },
  40.          highlighter: {
  41.           show: true,
  42.           showTooltip: true
  43.          },
  44.         }
  45.        );
  46.      });
  47.     $("#chart1" ).bind('jqplotMouseMove', function(ev, seriesIndex, pointIndex, neighbor, data){
  48.      var current_position_x = pointIndex.xaxis;
  49.      var index_x = -1;
  50.      var pos_index = 0;
  51.      // Pour chaque series
  52.      var low = 0;
  53.      var high = data.data[0].length-1; // Nombre totale de "point" de notre série
  54.      while(high - low > 1){
  55.       var mid = Math.round((low+high)/2); // La moitié du nombre de point de la serie ?
  56.       var current = data.data[0][mid][0]; // Position x du "point"   
  57.       if(current <= current_position_x) // Si ce x ce trouve avant le x de notre curseur
  58.        low = mid;
  59.       else
  60.        high = mid;
  61.      }
  62.      if(data.data[0][low][0] == current_position_x){
  63.       high = low;
  64.       index_x = high;
  65.      }else{
  66.       var c_low = data.data[0][low][0];
  67.       var c_high = data.data[0][high][0];
  68.       if(Math.abs(c_low - current_position_x) < Math.abs(c_high - current_position_x))
  69.        index_x = low;
  70.       else
  71.        index_x = high;
  72.      }
  73.      //Display marker and tooltip
  74.      $.each(data.series, function(i) {
  75.       if(data.series[i].data[index_x]){
  76.        var x = data.series[i].gridData[index_x][0];
  77.        var y = data.series[i].gridData[index_x][1];
  78.        var r = 5;
  79.        var highlightCanvas = $(".jqplot-lineRenderer-highlight-canvas" )[0];
  80.        var context = highlightCanvas.getContext('2d');
  81.        //context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
  82.        context.strokeStyle = data.series[i].color;
  83.        context.fillStyle = data.series[i].color;
  84.        context.beginPath();
  85.        context.arc(x,y,r,0,Math.PI*2,true);
  86.        context.fillText("Y :"+data.data[i][index_x][1],x + 3 ,y +15);
  87.        context.font="20px Georgia";
  88.        context.closePath();
  89.        context.stroke();
  90.        context.fill();
  91.        //Display tooltip on nearest point
  92.       }
  93.      });
  94.     });
  95.     </script>
  96.     </html>


 
J'ai un petit sushi, je veux pouvoir afficher les données en X de la manière telle que seul le ou les points le plus proche du X sur lequelle on est (mouseover) s'affiche :)
Pour cela je sais que mon graphique ne renvoi que les points le plus proche de toutes les séries et les parcours de la même manière qu'un tableau. Mais  c'est justement ce que je ne veux pas...
 
Je sais que celà est assez spécifique, je vous expose mes problèmes et apporte les solutions quand je les trouves :)


Message édité par pioupiou1232 le 10-05-2016 à 16:40:35
mood
Publicité
Posté le 10-05-2016 à 16:37:06  profilanswer
 

n°2281108
Moumoule
Posté le 10-05-2016 à 16:38:01  profilanswer
 

pioupiou1232 a écrit :

J'aimerai savoir si il est possible de faire apparaître les X là ou la VerticalLine est, en gras ?


 
Je te conseille de jeter un oeil à l'API de jqplot: http://www.jqplot.com/docs/files/j [...] ne-js.html
 
Pour le theming, voici un exemple: http://www.jqplot.com/examples/theming.php
 
 
 
 

n°2281271
pioupiou12​32
Posté le 12-05-2016 à 09:57:30  profilanswer
 

Moumoule a écrit :


 
Je te conseille de jeter un oeil à l'API de jqplot: http://www.jqplot.com/docs/files/j [...] ne-js.html
 
Pour le theming, voici un exemple: http://www.jqplot.com/examples/theming.php
 
 
 
 


 
 
Excuse moi de je ne vois pas le rapport entre les problématiques et tes liens, j'ai essayé mais je ne trouve pas. En revanche mon code à  changer :). Il me reste justement plus que le problème de la vertical Line, mais je crois que je vais créer une fonction à part.
 
Merci de ton aide, dans tout les cas.
 
Sinon pour les tooltips qui disparaît avec le zoom et le dé-zoom c'est un problème inhérent  à Google Chrome, je vais me renseigner :).

n°2281379
pioupiou12​32
Posté le 13-05-2016 à 09:48:55  profilanswer
 

Vous savez comment faire en sorte que la couleur de label des legend soit la même que celle des séries ?

n°2281403
pioupiou12​32
Posté le 13-05-2016 à 15:31:45  profilanswer
 

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr" xmlns:og="http://ogp.me/ns#">
  3. <head>
  4.  <meta charset="iso-8859-1" />
  5.  <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="  crossorigin="anonymous"></script>
  6.  <script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
  7.  <script language="javascript" type="text/javascript" src="plugins/jqplot.highlighter.js"></script>
  8.  <script language="javascript" type="text/javascript" src="plugins/jqplot.cursor.js"></script>
  9.  <script language="javascript" type="text/javascript" src="plugins/jqplot.enhancedLegendRenderer.js"></script>
  10.  <script language="javascript" type="text/javascript" src="excanvas.js"></script>
  11.  <link type="text/css" rel="stylesheet" href="style.css"></link>
  12. <body>
  13.  <div id="chart1"></div>
  14. </body>
  15. <script>
  16. plot1 = null;
  17. data = [];
  18.  mydata = [[-50,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
  19.  mydata2 = [[1,11],[2,2],[3,7],[4,4],[5,7],[6,4],[7,8],[8,7],[9,6]];
  20.  mydata3 = [[0,7],[1,1],[2,3],[3,8],[4,7],[5,4],[6,5],[7,7],[8,4]];
  21.  series=0;
  22.  addSeries = function(series) {
  23.    series++;
  24.   data.push(series);
  25. }
  26. addSeries(mydata);
  27. addSeries(mydata2);
  28. addSeries(mydata3);
  29. /*$(document).ready(function(){
  30.  $.jqplot.postDrawHooks.push(function(){
  31.   var swatches= $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch')
  32.   var labels=$('table.jqplot-table-legend tr td.jqplot-table-legend-label');
  33.   labels.each(function(index)){
  34.    var color= $(swatches[index]).find("div div" ).css('background-color');
  35.    $this.css('color', color);
  36.    $(this).css('color', color);
  37.    $this.css('white-space', 'nowrap');
  38.    $(this).html(types[index]);
  39.   }  
  40.    })*/
  41. $(document).ready(function() {
  42.     $.jqplot.postDrawHooks.push(function() {     
  43.         var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
  44.         var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
  45.         labels.each(function(index) {
  46.             //turn the label's text color to the swatch's color
  47.             var color = $(swatches[index]).find("div div" ).css('background-color');
  48.             $(this).css('color',color );
  49.             //set type name as the label's text
  50.             $(this).css('white-space', 'nowrap'); //otherwise Heavy Industry M12 will be in 3 lines
  51.             $(this).html(types[index]);
  52.         });
  53.     });
  54.    var types = ['rthdrt', 'trhdtrdh', 'hdrtrhd'];
  55.     var counts = [mydata, mydata2 , mydata3];
  56.     var total = 0;
  57.     for (var i = 0; i < counts.length; i++) {
  58.         total += counts[i];
  59.     }
  60.     var data = [];
  61.     var precision = 2;
  62.     var percentageSoFar = 0;
  63.    for (var i = 0; i < counts.length; i++) {
  64.         var count = counts[i];
  65.         var percentage = parseFloat((count / total * 100).toFixed(precision));
  66.         if (i == counts.length - 1) {
  67.             percentage = parseFloat((100 - percentageSoFar).toFixed(precision));
  68.             console.log("last count is = " + count + "; percentage is = " + percentage);
  69.         }
  70.         percentageSoFar += percentage;
  71.         var row = [percentage, count];
  72.         data.push(row);
  73.     }
  74.  plot1 = $.jqplot (
  75.   'chart1',data, {
  76.    seriesDefaults: {
  77.      showMarker: true,
  78.      xaxis: 'xaxis',
  79.    },
  80.    /*animate:true,
  81.    animateReplot:true,*/
  82.    series: [
  83.     { label : "MyLabel"},
  84.     { label : "Poivre"},
  85.     { label : "Cuivre"}
  86.    ],
  87.    legend:
  88.    {
  89.                  show: true,
  90.      location: 'se',
  91.      showSwatch : true,
  92.      renderer: $.jqplot.EnhancedLegendRenderer,
  93.      rendererOptions : {
  94.      seriesToggleReplot : {resetAxes: true},
  95.      disableIEFading : false,
  96.     }
  97.    },
  98.    cursor: {
  99.     show: true,
  100.      showVerticalLine: true,
  101.      xaxis: "red",
  102.      showHorizontalLine: false,
  103.      showTooltipDataPosition: true,
  104.      zoom: true,
  105.     intersectionThreshold: 10,
  106.     followMouse: true,
  107.     useAxesFormatters:true,
  108.     tooltipAxisGroups:[],
  109.    },
  110.   }
  111.  );
  112. });
  113. $("#chart1" ).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){
  114.    
  115.     var c_x = datapos.xaxis;
  116.     var index_x = -1;
  117.     var pos_index = 0;
  118.     var low = 0;
  119.  
  120.     var high = data.data[0].length-1;
  121.     while(high - low > 1){
  122.         var mid = Math.round((low+high)/2);
  123.         var current = data.data[0][mid][0];
  124.         if(current <= c_x)
  125.             low = mid;
  126.         else
  127.             high = mid;
  128.     }
  129.     if(data.data[0][low][0] == c_x){
  130.         high = low;
  131.         index_x = high;
  132.     }else{
  133.         var c_low = data.data[0][low][0];
  134.         var c_high = data.data[0][high][0];
  135.         if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){
  136.             index_x = low;
  137.         }else{
  138.             index_x = high; 
  139.         }
  140.     }
  141.     //Display marker and tooltip
  142.     if(data.series[0].data[index_x]){
  143.         var x = data.series[0].gridData[index_x][0];
  144.         var r = 5;
  145.         var highlightCanvas = $(".jqplot-highlight-canvas" )[0];
  146.         var context = highlightCanvas.getContext('2d');
  147.         context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
  148.         context.strokeStyle = 'rgba(47,164,255,1)';
  149.         context.fillStyle = 'rgba(47,164,255,1)';
  150.         context.beginPath();
  151.         context.arc(x,r,0,Math.PI*2,true);
  152.         context.closePath();
  153.         context.stroke();
  154.         context.fill();
  155.         //Display tooltip on nearest point
  156.         var highlightTooltip = $(".jqplot-highlighter-tooltip" );
  157.         var val_x = data.data[0][index_x][0];
  158.         highlightTooltip.html(val_x);
  159.         highlightTooltip.css({'bottom': -25, 'left': x+'px','display': 'block'});         
  160.     }
  161. });
  162. </script>
  163. </html>


 
Donc j'ai mon code avec pour avoir la même couleur du nom de label que du noùm de la line.
 
Le seul problème c'est que le graph est incrémenté avec des données format PieChart. Ce que j'aimerai fair c'est incrémenter des séries comme si c'étais des courbes,
par exemple (mydata/mydata2/mydata3).
 
Voilà :)
 
 


Message édité par pioupiou1232 le 13-05-2016 à 15:49:11
n°2281809
pioupiou12​32
Posté le 20-05-2016 à 14:17:01  profilanswer
 

Aufaite, tout mes problèmes sont résolu c'est bon


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Jqplot graphique et affichage sur multiple ligne

 

Sujets relatifs
copie colle ligne sous conditionLecture récursive d'une arborescence et affichage par tri alpha numéro
Delphi : supprimer une ligne dans un DBgrid à partir d'un bouton[HTML/Bootstrap] Problème d'affichage d'images bootstrap
Modification droit fichier en ligne de commande .batAffichage de données temporelles dans Google Earth
affichage images aléatoirementchoix multiple et traitement des données
Plus de sujets relatifs à : Jqplot graphique et affichage sur multiple ligne


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR