Reputation: 7419
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
$scope.chartConfig = {
options: {
chart: {
type: 'column'
},
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e (%a)',
},
},
Upvotes: 0
Views: 413
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