Jqplot graphique et affichage sur multiple ligne

Jqplot graphique et affichage sur multiple ligne - Javascript/Node.js - Programmation

Marsh Posté le 02-05-2016 à 14:28:41    

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 :)

Reply

Marsh Posté le 02-05-2016 à 14:28:41   

Reply

Marsh Posté le 02-05-2016 à 16:14:33    

UP

Reply

Marsh Posté le 03-05-2016 à 09:29:46    

up

Reply

Marsh Posté le 03-05-2016 à 11:55:54    

UP :bounce:

Reply

Marsh Posté le 03-05-2016 à 16:04:42    

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


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

Reply

Marsh Posté le 04-05-2016 à 10:14:36    

Up

Reply

Marsh Posté le 04-05-2016 à 14:52:47    

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. });
  25. //Show nearest point's tooltip
  26. $("#chart1" ).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){
  27.        for(i=0; i <= data.series.length; i++)
  28.     {
  29.     alert(i);
  30.     var c_x = datapos.xaxis;
  32.     var index_x = -1;
  33.     var pos_index = 0;
  34.     var low = 0;
  35.     var high = data.data[i].length-1;
  36.     while(high - low > 1){
  37.         var mid = Math.round((low+high)/2);
  38.         var current = data.data[i][mid][0];
  39.         if(current <= c_x)
  40.             low = mid;
  41.         else
  42.             high = mid;
  43.     }
  44.     if(data.data[i][low][0] == c_x){
  45.         high = low;
  46.         index_x = high;
  47.     }else{
  48.         var c_low = data.data[i][low][0];
  49.         var c_high = data.data[i][high][0];
  50.         if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){
  51.             index_x = low;
  52.         }else{
  53.             index_x = high; 
  54.         }
  55.     }
  56.      
  57.     //Display marker and tooltip
  59.  
  61.           var x = data.series[0].gridData[index_x][0];
  62.           var y=[];
  63.           y[i] = data.series[i].gridData[index_x][1];
  64.          
  65.           var r = 5;
  66.           var highlightCanvas=[];
  67.           var highlightTooltip=[];
  70.           highlightTooltip[i] = $(".jqplot-highlighter-tooltip" );
  71.           val_x=[];
  72.           val_y=[];
  73.          
  74.            val_x[i] = data.data[i][index_x][0];
  75.            val_y[i] = data.data[i][index_x][1];
  76.           highlightTooltip[i].html("X : "+val_x[i]+"<br/>Y : "+val_y[i]);
  77.           highlightTooltip[i].css({'left': x+'px', 'top': (y[i]-10)+'px', 'display': 'block'}); 
  78.           highlightCanvas[i] = $(".jqplot-highlight-canvas" )[i];
  79.           var context=[];
  80.           context[i] = highlightCanvas[i].getContext('2d');
  81.           context[i].clearRect(0,0,highlightCanvas[i].width,highlightCanvas[i].height);
  82.           context[i].strokeStyle = 'rgba(47,164,255,1)';
  83.           context[i].fillStyle = 'rgba(47,164,255,1)';
  84.           context[i].beginPath();
  85.          
  86.           context[i].arc(x,y,r,0,Math.PI*2,true);
  87.           context[i].closePath();
  88.           context[i].stroke();
  89.           context[i].fill();
  90.       }
  91.    
  94.    
  95. });


 
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
Reply

Marsh Posté le 06-05-2016 à 13:44:22    

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


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

Reply

Marsh Posté le 10-05-2016 à 11:15:38    

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"
  33.          },
  34.          cursor: {
  35.           show: true,
  36.           showTooltip: false,
  37.           showVerticalLine: true,
  38.           showHorizontalLine: false,
  39.           zoom: true
  40.          },
  41.          highlighter: {
  42.           show: true,
  43.           showTooltip: true
  44.          },
  47.         }
  48.        );
  49.      });
  50.     $("#chart1" ).bind('jqplotMouseMove', function(ev, seriesIndex, pointIndex, neighbor, data){
  51.      var current_position_x = pointIndex.xaxis;
  52.      var index_x = -1;
  53.      var pos_index = 0;
  54.      // Pour chaque series
  55.      var low = 0;
  56.      var high = data.data[0].length-1; // Nombre totale de "point" de notre série
  57.      while(high - low > 1){
  58.       var mid = Math.round((low+high)/2); // La moitié du nombre de point de la serie ?
  59.       var current = data.data[0][mid][0]; // Position x du "point"   
  60.       if(current <= current_position_x) // Si ce x ce trouve avant le x de notre curseur
  61.        low = mid;
  62.       else
  63.        high = mid;
  64.      }
  65.      if(data.data[0][low][0] == current_position_x){
  66.       high = low;
  67.       index_x = high;
  68.      }else{
  69.       var c_low = data.data[0][low][0];
  70.       var c_high = data.data[0][high][0];
  71.       if(Math.abs(c_low - current_position_x) < Math.abs(c_high - current_position_x))
  72.        index_x = low;
  73.       else
  74.        index_x = high;
  75.      }
  76.      $(".clone" ).remove();
  77.      //Display marker and tooltip
  78.      $.each(data.series, function(i) {
  79.       if(data.series[i].data[index_x]){
  80.        var x = data.series[i].gridData[index_x][0];
  81.        var y = data.series[i].gridData[index_x][1];
  82.        var r = 5;
  83.        var highlightCanvas = $(".jqplot-lineRenderer-highlight-canvas" )[0];
  84.        var context = highlightCanvas.getContext('2d');
  86.        //context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
  87.        context.strokeStyle = data.series[i].color;
  88.        context.fillStyle = data.series[i].color;
  89.        context.beginPath();
  90.        context.arc(x,y,r,0,Math.PI*2,true);
  92.        context.fillText("Y :"+data.data[i][index_x][1],x + 3 ,y +15);
  94.        context.font="20px Georgia";
  95.        context.closePath();
  96.        context.stroke();
  97.        context.fill();
  98.        //Display tooltip on nearest point
  101.       }
  102.      });
  103.     });
  104.     </script>
  105.     </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 :)

Message cité 1 fois
Reply

Marsh Posté le 10-05-2016 à 16:37:06    

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"
  33.          },
  34.          cursor: {
  35.           show: true,
  36.           showTooltip: false,
  37.           showVerticalLine: true,
  38.           showHorizontalLine: false,
  39.           zoom: true
  40.          },
  41.          highlighter: {
  42.           show: true,
  43.           showTooltip: true
  44.          },
  47.         }
  48.        );
  49.      });
  50.     $("#chart1" ).bind('jqplotMouseMove', function(ev, seriesIndex, pointIndex, neighbor, data){
  52.      var current_position_x = pointIndex.xaxis;
  53.      var index_x = -1;
  54.      var pos_index = 0;
  55.      // Pour chaque series
  56.      var low = 0;
  57.      var high = data.data[0].length-1; // Nombre totale de "point" de notre série
  58.      while(high - low > 1){
  59.       var mid = Math.round((low+high)/2); // La moitié du nombre de point de la serie ?
  60.       var current = data.data[0][mid][0]; // Position x du "point"   
  61.       if(current <= current_position_x) // Si ce x ce trouve avant le x de notre curseur
  62.        low = mid;
  63.       else
  64.        high = mid;
  65.      }
  66.      if(data.data[0][low][0] == current_position_x){
  67.       high = low;
  68.       index_x = high;
  69.      }else{
  70.       var c_low = data.data[0][low][0];
  71.       var c_high = data.data[0][high][0];
  72.       if(Math.abs(c_low - current_position_x) < Math.abs(c_high - current_position_x))
  73.        index_x = low;
  74.       else
  75.        index_x = high;
  76.      }
  79.      //Display marker and tooltip
  80.      $.each(data.series, function(i) {
  81.       if(data.series[i].data[index_x]){
  82.        var x = data.series[i].gridData[index_x][0];
  83.        var y = data.series[i].gridData[index_x][1];
  84.        var r = 5;
  85.        var highlightCanvas = $(".jqplot-lineRenderer-highlight-canvas" )[0];
  86.        var context = highlightCanvas.getContext('2d');
  88.        //context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
  89.        context.strokeStyle = data.series[i].color;
  90.        context.fillStyle = data.series[i].color;
  91.        context.beginPath();
  92.        context.arc(x,y,r,0,Math.PI*2,true);
  94.        context.fillText("Y :"+data.data[i][index_x][1],x + 3 ,y +15);
  96.        context.font="20px Georgia";
  97.        context.closePath();
  98.        context.stroke();
  99.        context.fill();
  100.        //Display tooltip on nearest point
  101.       }
  102.      });
  103.     });
  104.     </script>
  105.     </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
Reply

Marsh Posté le 10-05-2016 à 16:37:06   

Reply

Marsh Posté le 10-05-2016 à 16:38:01    

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
 
 
 
 

Message cité 1 fois
Reply

Marsh Posté le 12-05-2016 à 09:57:30    

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 :).

Reply

Marsh Posté le 13-05-2016 à 09:48:55    

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

Reply

Marsh Posté le 13-05-2016 à 15:31:45    

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>
  12.  <script language="javascript" type="text/javascript" src="excanvas.js"></script>
  13.  <link type="text/css" rel="stylesheet" href="style.css"></link>
  14. <body>
  15.  <div id="chart1"></div>
  16. </body>
  18. <script>
  19. plot1 = null;
  20. data = [];
  22.  mydata = [[-50,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
  23.  mydata2 = [[1,11],[2,2],[3,7],[4,4],[5,7],[6,4],[7,8],[8,7],[9,6]];
  24.  mydata3 = [[0,7],[1,1],[2,3],[3,8],[4,7],[5,4],[6,5],[7,7],[8,4]];
  25.  series=0;
  28.  addSeries = function(series) {
  29.    series++;
  30.   data.push(series);
  31. }
  33. addSeries(mydata);
  34. addSeries(mydata2);
  35. addSeries(mydata3);
  38. /*$(document).ready(function(){
  40.  $.jqplot.postDrawHooks.push(function(){
  41.   var swatches= $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch')
  42.   var labels=$('table.jqplot-table-legend tr td.jqplot-table-legend-label');
  43.   labels.each(function(index)){
  44.    var color= $(swatches[index]).find("div div" ).css('background-color');
  45.    $this.css('color', color);
  47.    $(this).css('color', color);
  48.    $this.css('white-space', 'nowrap');
  49.    $(this).html(types[index]);
  51.   }  
  52.    })*/
  54. $(document).ready(function() {
  55.     $.jqplot.postDrawHooks.push(function() {     
  56.         var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
  57.         var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
  58.         labels.each(function(index) {
  59.             //turn the label's text color to the swatch's color
  60.             var color = $(swatches[index]).find("div div" ).css('background-color');
  61.             $(this).css('color',color );
  62.             //set type name as the label's text
  63.             $(this).css('white-space', 'nowrap'); //otherwise Heavy Industry M12 will be in 3 lines
  64.             $(this).html(types[index]);
  65.         });
  66.     });
  67.    var types = ['rthdrt', 'trhdtrdh', 'hdrtrhd'];
  68.     var counts = [mydata, mydata2 , mydata3];
  69.     var total = 0;
  70.     for (var i = 0; i < counts.length; i++) {
  71.         total += counts[i];
  72.     }
  73.     var data = [];
  74.     var precision = 2;
  75.     var percentageSoFar = 0;
  76.    for (var i = 0; i < counts.length; i++) {
  77.         var count = counts[i];
  78.         var percentage = parseFloat((count / total * 100).toFixed(precision));
  79.         if (i == counts.length - 1) {
  80.             percentage = parseFloat((100 - percentageSoFar).toFixed(precision));
  81.             console.log("last count is = " + count + "; percentage is = " + percentage);
  82.         }
  83.         percentageSoFar += percentage;
  84.         var row = [percentage, count];
  85.         data.push(row);
  87.     }
  88.  plot1 = $.jqplot (
  89.   'chart1',data, {
  90.    seriesDefaults: {
  91.      showMarker: true,
  92.      xaxis: 'xaxis',
  93.    },
  94.    /*animate:true,
  95.    animateReplot:true,*/
  97.    series: [
  100.     { label : "MyLabel"},
  101.     { label : "Poivre"},
  102.     { label : "Cuivre"}
  103.    ],
  104.    legend:
  105.    {
  106.                  show: true,
  107.      location: 'se',
  108.      showSwatch : true,
  109.      renderer: $.jqplot.EnhancedLegendRenderer,
  110.      rendererOptions : {
  111.      seriesToggleReplot : {resetAxes: true},
  112.      disableIEFading : false,
  114.     }
  115.    },
  116.    cursor: {
  117.     show: true,
  118.      showVerticalLine: true,
  119.      xaxis: "red",
  120.      showHorizontalLine: false,
  121.      showTooltipDataPosition: true,
  122.      zoom: true,
  123.     intersectionThreshold: 10,
  124.     followMouse: true,
  125.     useAxesFormatters:true,
  126.     tooltipAxisGroups:[],
  130.    },
  132.   }
  133.  );
  139. });
  142. $("#chart1" ).bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){
  143.    
  144.     var c_x = datapos.xaxis;
  146.     var index_x = -1;
  147.     var pos_index = 0;
  148.     var low = 0;
  150.  
  152.     var high = data.data[0].length-1;
  153.     while(high - low > 1){
  154.         var mid = Math.round((low+high)/2);
  155.         var current = data.data[0][mid][0];
  156.         if(current <= c_x)
  157.             low = mid;
  158.         else
  159.             high = mid;
  160.     }
  161.     if(data.data[0][low][0] == c_x){
  162.         high = low;
  163.         index_x = high;
  164.     }else{
  165.         var c_low = data.data[0][low][0];
  166.         var c_high = data.data[0][high][0];
  167.         if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){
  168.             index_x = low;
  169.         }else{
  170.             index_x = high; 
  171.         }
  172.     }
  173.     //Display marker and tooltip
  174.     if(data.series[0].data[index_x]){
  175.         var x = data.series[0].gridData[index_x][0];
  176.         var r = 5;
  177.         var highlightCanvas = $(".jqplot-highlight-canvas" )[0];
  178.         var context = highlightCanvas.getContext('2d');
  179.         context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
  180.         context.strokeStyle = 'rgba(47,164,255,1)';
  181.         context.fillStyle = 'rgba(47,164,255,1)';
  182.         context.beginPath();
  183.         context.arc(x,r,0,Math.PI*2,true);
  184.         context.closePath();
  185.         context.stroke();
  186.         context.fill();
  187.         //Display tooltip on nearest point
  188.         var highlightTooltip = $(".jqplot-highlighter-tooltip" );
  189.         var val_x = data.data[0][index_x][0];
  191.         highlightTooltip.html(val_x);
  192.         highlightTooltip.css({'bottom': -25, 'left': x+'px','display': 'block'});         
  193.     }
  194. });
  197. </script>
  198. </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
Reply

Marsh Posté le 20-05-2016 à 14:17:01    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed