StocQt example: Display trading volume scale for stock charts

Similar to how the example already shows scale of the stock price
on the right-hand side margin, this change adds a scale for the
trading volume.

Large volume values are shortened to a more readable format, using
symbols for units of thousand/million/billion etc.

Task-number: QTBUG-38254
Change-Id: I068bba1622d2a586a5dd14dddd4b832c8b112d2d
Reviewed-by: Venugopal Shivashankar <venugopal.shivashankar@digia.com>
Reviewed-by: Diana de Sousa <diana.desousa@digia.com>
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>
This commit is contained in:
Topi Reinio 2014-09-16 12:51:24 +02:00 committed by Topi Reiniö
parent 0c17d92cda
commit a5cb3ca5c0
1 changed files with 21 additions and 3 deletions

View File

@ -168,7 +168,7 @@ Rectangle {
property int pixelSkip: 1
property int numPoints: 1
property int tickMargin: 32
property int tickMargin: 34
property real xGridStep: (width - tickMargin) / numPoints
property real yGridOffset: height / 26
@ -214,6 +214,21 @@ Rectangle {
ctx.restore();
}
// Returns a shortened, readable version of the potentially
// large volume number.
function volumeToString(value) {
if (value < 1000)
return value;
var exponent = parseInt(Math.log(value) / Math.log(1000));
var shortVal = parseFloat(parseFloat(value) / Math.pow(1000, exponent)).toFixed(1);
// Drop the decimal point on 3-digit values to make it fit
if (shortVal >= 100.0) {
shortVal = parseFloat(shortVal).toFixed(0);
}
return shortVal + "KMBTG".charAt(exponent - 1);
}
function drawScales(ctx, high, low, vol)
{
ctx.save();
@ -229,8 +244,11 @@ Rectangle {
ctx.text(price, x, canvas.yGridOffset + i * yGridStep - 2);
}
// highest volume
ctx.text(vol, 0, canvas.yGridOffset + 9 * yGridStep + 12);
// volume scale
for (i = 0; i < 3; i++) {
var volume = volumeToString(vol - (i * (vol/3)));
ctx.text(volume, x, canvas.yGridOffset + (i + 9) * yGridStep + 10);
}
ctx.closePath();
ctx.stroke();