How would I make it so that when hovering over a plotly graph, the displayed value in the hoverbox can be divided by 1000 and have a "K" appended to it?
For instance, when hovering over "$10,000,000" in a plotly graph, what could be done so that "$10,000K" is displayed in the box?
Specifically, can anything be done with the "hoverformat" property? It currently looks like this:
hoverformat: ",.0f"
I'm aware that this prints a float with 0 decimal places...but how would I specify the displayed value to be divided by 1000 and then have a "K" appended?
Thanks.
You might consider using numeral for that purpose. Numeral is a library used to format numbers and you can find it here:
http://numeraljs.com/
You then could do something like
const number = 10000;
const formattedNumber = numeral(10000).format('$ 0.00 a');
Related
Currently when using numeral(1000000).format('0a') will return 1m, however is it possible to set a scale, for example thousands, so any number will get converted to a number in thousands?
For instance 1000000 will become 1000k, and 100 would become 0,1k and so on.
console.log(
numeral(1000000).format('0a')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
Try 0ak format
https://github.com/adamwdraper/Numeral-js/blob/master/src/numeral.js#L143
console.log("1000000:",numeral(1000000).format('0ak'),"\n100:",numeral(100).format('0ak'))
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
I have a number that increases every second by addition. The problem is that it contains way too many decimals. An example of an output which I do not want would be something like 1.5999999999999999 or 1.600000000001. I have tried using the toFixed method, passing in 2 as it's value, and I am still getting the issue. I have also tried using the Math.round(number * 100) / 100 and am still getting uggly decimals.
How can I get an output that only contains a specified number of decimal points? I want to be able to choose how the number rounds. The function to round should be something like this:
function round(numberToRound, afterDecimals){
//Rounding code which takes into the account the number of decimal values I wish to display should go here
}
Thank you.
I am so sorry, I didn't call the function in the right place. The function works as expected, I just wasn't updating the innerHTML correctly.
Again, I am sorry for overlooking this.
I'm making a map with dc.js and the crossfilter function reduceSum() introduces some rounding errors.
simplified example :
group = dimension.group().reduceSum(function(e) { return 0.01; });
group.all() will contain a value of 32.21000000000216 when the number of records is 3221. It should be 32.21 (the sum of 3221 times 0.01).
You can see the effect I'm talking about here : https://epistat.wiv-isp.be/
(just hover your mouse over the map to see very long decimal numbers)
How can you round the values of a crossfilter group ?
The group has only these methods available:
all
dispose
order
orderNatural
reduce
reduceCount
reduceSum
remove
size
top
Can you change the value of a group ?
I'm thinking of doing it with a loop but I can't find anything in the docs for changing the value of a group :
https://github.com/square/crossfilter/wiki/API-Reference
I found a workaround, it's not the a real answer I was looking for, but it's the best I found so far:
I get the closest floating number (closest to the real number) by having the biggest numbers in the data (before dimensions and groups) as possible.
(I'm multiplying incidence with bigMultiplicator=99999999 ; from my tests the bigger the better)
then in the reduceSum I divide by that big number:
group = dimension.group().reduceSum(function(e) { return e.incidence / bigMultiplicator; });
And I finish by rounding the number in the title display of dc.js:
.title(function(d) {
return d.key + ' : ' + Math.round(d.value * 100)/100 ;
})
I hope it helps someone else.
I am trying to make a javascript program that calculates the area of a trapezoid. So far below is my js code:
var lol=prompt("Please enter which 2d polygon you would like this awesome calculator to calculate.")
if(lol==="trapezoid"){
var tr1=prompt("Enter the top base.")
var tr2=prompt("Enter the bottom base.")
var tr3=prompt("Now enter the height.")
confirm((tr1+tr2)*(tr3)/2)
}
But when I put 4,5,6 in my calculator, it spits out 135 instead of 27.
Why?
You can use parseInt to set the values as integers.
var lol=prompt("Please enter which 2d polygon you would like this awesome calculator to calculate.")
if(lol==="trapezoid"){
var tr1=Number(prompt("Enter the top base."))
var tr2=Number(prompt("Enter the bottom base."))
var tr3=Number(prompt("Now enter the height."))
confirm((tr1+tr2)*(tr3)/2)
}
Here's a JSFiddle with Benjamine's Number point
http://jsfiddle.net/cXWnk/
The values you are getting back from the prompt are strings and, as Ryan P says, "1" + "1" = "11".
What you need to do is cast the strings to integers before using their values in the calculation.
You can do this with the Number() function.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
So, your code might be:
confirm((Number(tr1) + Number(tr2)) *(Number(tr3))/2)
or, using the unary plus shorthand:
confirm((+tr1 + +tr2)*(+tr3)/2)
I'm using d3 to animate text to show a user's progress towards completing a task. For example, if they've completed 32.51% of the task, the text will animate from 0% to 32.51% over 2 seconds or so.
To do this, I'm using d3's attrTween method on an svg text element in conjunction with d3.interpolate. The interpolation is working great, but I'm having a little trouble formatting the text. I'd like the text to always display 4 digits, so 0% = 00.00%, 4.31% = 04.31% etc. It would be nice to be able to do this without necessarily having to post process what the interpolator returns. In other words, without having to take the returned percentage and check to see if there are 4 digits and add zero padding on either side before placing it in the DOM.
As a test, I tried specifying the format that I would like by setting the a and b values to the interpolator like so d3.interpolate("00.00", "30.00"), but the final text is "30" with the trailing zeros cut off.
Any suggestions?
You can add a custom interpolator to d3.interpolators - see the docs. The example given in the docs is very close to yours - the only real change is specifying the output format, which in your case should be:
d3.format('05.2f'); // 0-padding, string width 5, 2 decimal places
Plugging this into the doc example (note that I also changed the regex appropriately and added the percentage sign):
d3.interpolators.push(function(a, b) {
var re = /^(\d\d\.\d\d)%$/, ma, mb, f = d3.format('05.2f');
if ((ma = re.exec(a)) && (mb = re.exec(b))) {
a = parseFloat(ma[1]);
b = parseFloat(mb[1]) - a;
return function(t) {
return f(a + b * t) + '%';
};
}
});
d3.interpolate("00.00%", "30.00%")(1/5); // "06.00%"
d3.interpolate("00.00%", "30.00%")(1/3); // "10.00%"