From a5cb3ca5c058903bcf68fb24d3fdcf1eecb1e5a8 Mon Sep 17 00:00:00 2001 From: Topi Reinio Date: Tue, 16 Sep 2014 12:51:24 +0200 Subject: 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 Reviewed-by: Diana de Sousa Reviewed-by: J-P Nurmi --- examples/quick/demos/stocqt/content/StockChart.qml | 24 +++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) (limited to 'examples/quick/demos') diff --git a/examples/quick/demos/stocqt/content/StockChart.qml b/examples/quick/demos/stocqt/content/StockChart.qml index 2b97863f76..625a91e6f9 100644 --- a/examples/quick/demos/stocqt/content/StockChart.qml +++ b/examples/quick/demos/stocqt/content/StockChart.qml @@ -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(); -- cgit v1.2.3