Today’s goal was to come up with a reasonably automated way to specify formatting for the numeric values associated with the major tickmarks on each axis. I chose to implement settings for decimal places, overall precision width, and whether or not trailing zeros would be stripped. If the formatted string with decimal places is used unless it is longer than the formatted string at the specified precision, in which case the latter is used. Trailing zeroes are then stripped from each string.
This may result in different strings having different formats. First there’s always that one string that has fewer decimal places than all the others because it happens to end in a zero. Alternatively, some strings might be in fixed decimal while others may be in scientific notation. I therefore made a second pass that involved assigning consistent formatting based on the “worst” format of the bunch. If any value was in scientific notation I applied the toPrecision function to all values. If that didn’t apply, I applied the toFixed function so they all matched the value with the most decimal places. That could be annoying when a floating point operation leaves one string with a value like 12.0000001, as sometimes happen, but the extraneous digit would probably be to the right of whatever place the used specified to begin with. If all values were successfully stripped to the decimal point, the values are all displayed as whole numbers.
The first sieve, applied to individual values, is fairly quick. Remember that for the time being these functions are object methods. Once I get everything working I’ll clean it all up to hide the elements that should be private.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
this.stripZero = function(s,strip) { if (strip) { while ((s.charAt(s.length-1) == '0') && (s.length > 1)) { s = s.slice(0,s.length-1); } if (s.charAt(s.length-1) == '.') { s = s.slice(0,s.length-1); } } return s; } this.formatString = function(value,decimals,fixed,strip) { var sd = value.toFixed(decimals); var ld = sd.length; var sf = value.toPrecision(fixed); var lf = sf.length; if (ld > lf) { return this.stripZero(sf,strip); } else { return this.stripZero(sd,strip); } } |
The next bit of code does the same thing to either the y- or the y-axis. It cycles through the values to generate a formatted string, then determines whether any string uses scientific notation using by search for the letter ‘e’, or whether any string includes trailing decimals by searching for the ‘.’ character. The latter search term is formatted as it is because the search function actually takes a regular expression as its parameter and the decimal point has a special meaning in regular expressions. Again, a second pass is made to apply the “worst” format consistently. The pixel with of each string is then calculated based on the prevailing font (which should be set just prior to this call) along with a value for the widest string in the group.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
this.generateTickValues = function(axis) { //find pixels needed for axis labels var increment = 0; var ticks = 0; if (axis == "y") { increment = (this.yvalMaxOuter - this.yvalMinOuter) / (this.ymajorTicks); ticks = this.ymajorTicks; } else { increment = (this.xvalMaxOuter - this.xvalMinOuter) / (this.xmajorTicks); ticks = this.xmajorTicks; } var width = 0.0; var height = 0.0; var vList = new Array(); //list of numeric values var sList = new Array(); //list of strings var dList = new Array(); //list of decimal places var wList = new Array(); //list of widths by pixel var scientific = false; var dMax = 0; var wMax = 0; for (var i=0; i<=ticks; i++) { //generate the labels formatted per settings if (axis == "y") { vList[i] = this.yvalMinOuter + (increment * i); } else { vList[i] = this.xvalMinOuter + (increment * i); } sList[i] = this.formatString(vList[i],this.yaxisDecimals,this.yaxisFixed,this.yaxisStrip); //find format characteristics if (sList[i].includes('e')) { //scientific notation: fixed scientific = true; dList[i] = 0; } else if (sList[i].search("[.]") > 0) { //decimals exist: decimals dList[i] = sList[i].length - sList[i].search("[.]"); if (dList[i] > dMax) { dMax = dList[i]; } } else { dList[i] = 0; } } //if anything is in scientific notation, format everything using toPrecision if (scientific) { dMax = 0; for (var i=0; i<=ticks; i++) { sList[i] = vList[i].toPrecision(this.yaxisFixed); dList[i] = sList[i].length; wList[i] = this.ctx.measureText(sList[i]).width; if (wList[i] > wMax) { wMax = wList[i]; } if (dList[i] > dMax) { dMax = dList[i]; } } } else if (dMax > 0) { //at least one number has decimals, make them all use same for (var i=0; i<=ticks; i++) { sList[i] = vList[i].toFixed(dMax); wList[i] = this.ctx.measureText(sList[i]).width; if (wList[i] > wMax) { wMax = wList[i]; } } } else { //already stripped of decimals for (var i=0; i<=ticks; i++) { wList[i] = this.ctx.measureText(sList[i]).width; if (wList[i] > wMax) { wMax = wList[i]; } } } //wMax now holds max width in pixels, sList holds list for strings |
I experimented with the graphing tools in Excel to see how it formatted axis values under different combinations of conditions and found that, without going into an extreme amount of coding, it produces similar results in most cases. There is always more one could do, but this first pass is reasonably quick and effective. It often takes human intervention to get decent-looking labels anyway, this this approach seems good enough for now.
If you look carefully at the second block of code you might notice that it’s missing its ending brace. Tomorrow I’ll describe how the information I calculated today, along with the height and angle information, are used to figure out how much space is needed to draw all of the values.