user3675188
user3675188

Reputation: 7419

How could I sort each group of columns from low to high

How could I sort each group of columns from low to high?

Also, could I make the number in tooltip in $ currency format and remove the floats?

Thanks so much

inline

JS

  $scope.chartConfig = {
    options: {
      chart: {
        type: 'column'
      },
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            day: '%b %e (%a)',
        },
    },

Upvotes: 0

Views: 413

Answers (1)

mustapha mekhatria
mustapha mekhatria

Reputation: 3929

I used some if else tricks to select the min and max:

  for (i = 0; i < y1.length; i++) {
   if (y1[i] < y2[i])                  
      if (y1[i] < y3[i])               
         if (y2[i] < y3[i])   { 

            pushfct(yObj1,y1[i],color1, name1);
            pushfct(yObj2,y2[i], color2, name2);
            pushfct(yObj3,y3[i], color3, name3);

            }
         else                          
             {  

            pushfct(yObj1,y1[i], color1, name1);
            pushfct(yObj2,y3[i], color3, name3);
            pushfct(yObj3,y2[i], color2, name2);

             }
      else                         
          { 

            pushfct(yObj1,y3[i], color3, name3);
            pushfct(yObj2,y1[i], color1, name1);
            pushfct(yObj3,y2[i], color2, name2);
            }
   else                            
      if (y2[i] < y3[i])               
         if (y1[i] < y3[i])            
             {            
            pushfct(yObj1,y2[i], color2, name2);
            pushfct(yObj2,y1[i], color1, name1);
            pushfct(yObj3,y3[i], color3, name3);

             }
         else                      
             {            

            pushfct(yObj1,y2[i], color2, name2);
            pushfct(yObj2,y3[i], color3, name3);
            pushfct(yObj3,y1[i], color1, name1);
             }
      else                         
          {

            pushfct(yObj1,y3[i],color3, name3);
            pushfct(yObj2,y2[i], color2, name2);
            pushfct(yObj3,y1[i], color1, name1);
          }

  }

To show the $, just use formatter options under tooltip:

tooltip: {

    formatter:function(){
        return this.key +': $'+ this.y;
    }
},

Please check the example (jsfiddle):

$(function() {
  var y1 = [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
  var y2 = [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3];
  var y3 = [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 151.2];
  var color1="yellow", color2="green", color3="red";
  var name1="Montreal",name2="Paris",name3="Mostaganem";

    var yObj1=[],yObj2=[],yObj3=[];

function pushfct(tempObj,x,y,z){
 var temp={y:0,color:"xxxx", name:"xxxx"};
    temp.y=x;
    temp.color=y;
    temp.name=z;     
    tempObj.push(temp);
}
  for (i = 0; i < y1.length; i++) {
   if (y1[i] < y2[i])                  
      if (y1[i] < y3[i])               
         if (y2[i] < y3[i])   { 

            pushfct(yObj1,y1[i],color1, name1);
            pushfct(yObj2,y2[i], color2, name2);
            pushfct(yObj3,y3[i], color3, name3);

            }
         else                          
             {  

            pushfct(yObj1,y1[i], color1, name1);
            pushfct(yObj2,y3[i], color3, name3);
            pushfct(yObj3,y2[i], color2, name2);

             }
      else                         
          { 

            pushfct(yObj1,y3[i], color3, name3);
            pushfct(yObj2,y1[i], color1, name1);
            pushfct(yObj3,y2[i], color2, name2);
            }
   else                            
      if (y2[i] < y3[i])               
         if (y1[i] < y3[i])            
             {            
            pushfct(yObj1,y2[i], color2, name2);
            pushfct(yObj2,y1[i], color1, name1);
            pushfct(yObj3,y3[i], color3, name3);

             }
         else                      
             {            

            pushfct(yObj1,y2[i], color2, name2);
            pushfct(yObj2,y3[i], color3, name3);
            pushfct(yObj3,y1[i], color1, name1);
             }
      else                         
          {

            pushfct(yObj1,y3[i],color3, name3);
            pushfct(yObj2,y2[i], color2, name2);
            pushfct(yObj3,y1[i], color1, name1);
          }

  }

  $('#container').highcharts({
    chart: {
      type: 'column'
    },
    tooltip: {

        formatter:function(){
            return this.key +': $'+ this.y;
        }
    },
    series: [{
        showInLegend:false,
      data: yObj1,
    }, {
        showInLegend:false,
      data: yObj2,
    }, {
        showInLegend:false,
      data: yObj3,
    }]
  });
});

Upvotes: 1

Related Questions