Improved tooltip/hover-over bit. Now has easier to read formatting with unit signs!

analyser.js

@@ -191,7 +191,14 @@ function drawGraph() {
                 pointRadius: 4,
                 pointHoverRadius: 7,
                 yAxisID: 'y',
-                tension: 0
+                tension: 0,
+                tooltip: {
+                    callbacks: {
+                        label: function(tooltipItem, d){
+                            return "ROA: " + Number(tooltipItem.formattedValue).toFixed(2) + "%";
+                        },
+                    },
+                },
             },{
                 data: dataElong,
                 label: "Elongation",
@@ -201,7 +208,14 @@ function drawGraph() {
                 pointRadius: 5,
                 pointHoverRadius: 8,
                 yAxisID: 'y',
-                tension: 0
+                tension: 0,
+                tooltip: {
+                    callbacks: {
+                        label: function(tooltipItem, d){ // Add a % sign to the elongation value
+                            return "Elong: " + Number(tooltipItem.formattedValue).toFixed(2) + "%";
+                        },
+                    },
+                },
             },{
                 data: dataDelta,
                 label: "Δ Factor",
@@ -230,7 +244,38 @@ function drawGraph() {
                     labels: {
                         usePointStyle: true
                     }
-                }
+                },
+                tooltip: {
+                    callbacks: {
+                        title: function(tooltipItem, d){
+                            var i = Number(tooltipItem[0].label); // Grab the label (or die number) and use it for start/finish
+                            
+                            // We need our start and finish sizes...
+                            inSize = document.getElementById("die" + (i - 1)).value; // the input size
+                            outSize = document.getElementById("die" + i).value; // output size
+                    
+                            if (i == 1 && document.getElementById("metric").checked == true) {
+                                // If this is the first die in the setup, check if it's a metric/rod start and convert it
+                                inSize = toInches(inSize);
+                            }
+                                
+                            // Format our numbers to prevent maximum user stupidity
+                            if (inSize < 10.0 && inSize > 0) {  // If we have a 'proper' number i.e. ".130"
+                                inSize = Number(inSize);
+                            } else {  // re-format the number if it's 'wrong' i.e. "130"
+                                inSize = inSize / 1000;
+                            }
+                            if (outSize < 10.0 && outSize > 0) {  // If we have a 'proper' number i.e. ".130"
+                                outSize = Number(outSize);
+                            } else {  // re-format the number if it's 'wrong' i.e. "130"
+                                outSize = outSize / 1000;
+                            }
+
+                            // Finally write the new header
+                            return "Draft #" + tooltipItem[0].label + "\n" + inSize.toFixed(3) + "\" -> " + outSize.toFixed(3) + "\"";
+                        },
+                    },
+                },
             },
             scales: {
                 y: {