How do I get the current column width of a fleet map?
I am using a float chart for my chart ... and I am using the chart value indicator at the top like this ...
var p1 = $.plot($("#received-against-assigned"), data1, {
xaxis: {
ticks : ticks,
axisLabel: "Accounts",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 10
},
yaxis: {
axisLabel: "Emails",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 5
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
legend: {
// labelBoxBorderColor: "none",
// position: "left"
show: true,
noColumns: 5,
container: "#bar-legend-2"
},
series: {
shadowSize: 1
},
tooltip: true
});
This is the indicator code ...
$.each(p1.getData()[0].data, function(i, el){
var o = p1.pointOffset({x: el[0], y: el[1]});
$('<div class="data-point-label">' + el[1] + '</div>').css( {
position: 'absolute',
left: o.left - 32, // Notice here...
top: o.top - 20,
display: 'none'
}).appendTo(p1.getPlaceholder()).fadeIn('slow');
});
Now you can see what I am setting left: o.left - 32
, which is in a static way ... I have a variable number of bars ... Depends on the number of accounts ... So 32 is not enough ...
If I can somehow get the current bandwidth ... then I can calculate and align the indicators correctly ...
Thank...
+3
source to share
1 answer
You get the swath width (in axis units) from
var barWidthInUnits = p1.getOptions().series.bars.barWidth;
If you want to calculate the width in pixels, you also need to get the x-axis scale factor
var barWidthInPixels = barWidthInUnits * p1.getXAxes()[0].scale;
Half of that should be the offset needed for your value indicators.
+4
source to share