Just struggling a bit with the numeric notations in Highcharts.
I didn't like the default version with "k" for "thousands". So, while trying to change that, I stumbled over some inconsistencies (in my view; but perhaps/probably just a "I don't see the whole picture"-thing).
So, why does the zero value get the "k" extension too:
That doesn't make sense. There are no "0k", as there are no "0px" in HTML/CSS programming. It just should be "0".
Logically in that case, when I change the units to "thousands" or " 000"
Highcharts.setOptions({
lang: {
numericSymbols: [" 000", " 000 000"]
}
});
it looks like this:
Clearly: same thing, same false display.
So, I guess there is a solution to this, a work-around, or a misunderstanding. Can you help me? Thanks for any hints!
Here is a fiddle.
0px and 0 are both the same in CSS. 0k seems fine as well when it is consistent with other values, but I guess you can see it differently.
To change this display you could label.formatter like:
labels: {
formatter: function(){
return this.value === 0 ? 0 : this.axis.defaultLabelFormatter.call(this);
}
}
This will print "0" for 0 and same as without this code for the rest.
Working example: http://jsfiddle.net/yup311dv/
You can just pass null to the numericSymbols for the chart to display the full numbers:
Highcharts.setOptions({
lang: {
numericSymbols: null
}
});
Updated Fiddle
Related
I am trying to make the tool tip 'Percentage' be an actual percent and not a decimal. Even when I include alt.Tooltip('Percentage:Q',format='.2%'), it doesn't seem to work.
Also, I am trying to make the legend scale from 0-100% instead of 40-70%.
Any help would be appreciated!
import altair as alt
from vega_datasets import data
states = alt.topo_feature(data.us_10m.url, 'states')
variable_list = ['Percentage', 'State Name', 'state_id']
alt.Chart(states).mark_geoshape().encode(
color=alt.Color('Percentage:Q', title='Positive NFB', legend=alt.Legend(format=".0%"), scale=alt.Scale(scheme='yellowgreen')),
tooltip=['State Name:N', 'Percentage:Q', alt.Tooltip('Percentage:Q',format='.2%')]).properties(title="Percentage of People in Households with Positive NFB"
).transform_lookup(
lookup='id',
from_=alt.LookupData(states_positive_NFB, 'state_id', variable_list)
).properties(
width=500,
height=300
).project(
type='albersUsa'
)
Current map:
To change the domain of the color scale, you can pass the domain argument to alt.Scale(): e.g.
alt.Scale(scheme='yellowgreen', domain=[0, 1])
To make the tooltip format appear, you can remove the duplicated tooltip encoding, as the first one appears to be taking precedence. That is, rather than
tooltip=['State Name:N', 'Percentage:Q', alt.Tooltip('Percentage:Q',format='.2%')]
you should use
tooltip=['State Name:N', alt.Tooltip('Percentage:Q', format='.2%')]
Adapted from the README.md file in https://github.com/tevye/HighchartsXAxisSpecificationProblem:
Three example Highstocks HTML files, one working, one broken by making the data timestamps irregular, and the last shows a failed attempt to fix are in the github repository.
Background
The working version is a slightly modified version of the example Emerson entered for help with a javascript console error 15 (Sorting Scatter Highstock Chart with Multiple Series). Ignoring the console error, we want to the Highstocks navigator on a scatter plot with irregular data timestamps. The working version included in the repository has a large 2D-array 'points' with regular time intervals. The xaxis declaration has a 'data' definition mapping values from 'points'.
data: points.map(function(point) {
return [point[2]];
}),
The only changes in the broken version is a set of arbitrary deletes from the 'points' array to force the timestamps to be sufficiently irregular to break the date inference provided by Highcharts. (If you delete just a few lines from the working copy's 'points' 2D-array, it still works. Delete a few and it still works...which is cool).
In the repository's screen grab 'broken_badTickArray.html.png', you can see the dates are Dec 31, 1969 to Jan 1, 1970 and the tick array data is indecipherable.
The attempted fix (version uploaded only 'representative' of several tries)
Starting with the broken version, several attempts were made to overcome the erroneous date range problem. The screen grab 'works_goodTickArray.html.png' shows that Highcharts boiled down the large number of timestamps to a small set of midnight day boundaries. In the attempted fix version, the following code generators an explicit set of timestamps that are then given as the value for the x-axis data.
var xtd = [];
var apr222017 = 1492819200000;
var may162017 = 1494892800000;
var x = 0;
do {
xtd[x] = apr222017 + (x * 86400000);
x++
} while ((apr222017 + (x * 86400000)) < may162017);
When that didn't work, attempted to set 'floor' and 'ceiling'...
// ...
data: xtd,
floor: apr222017,
ceiling: may162017,
// ...
Having no luck with that added...
min: apr222017,
max: may162017,
which didn't help. Nor did removng the floor and ceiling definitions and going only with min/max.
Adding the following also failed:
tickPositioner: function() {
return xtd;
},
It's failing when the number of data points are less than 1001.
What seems to be happening here is that "turbo" mode kicks in by default at 1000 entries and seems to be interpreting the data correctly once in that mode.
set turboThreshold to 1 for "axis 0"
{
xAxis: 0,
turboThreshold: 1,
//min:0,
//max: 100,
data: points.map(function(point) {
return [point[0]];//, point[1]];
}),
showInNavigator: true,
enableMouseTracking: false,
color: '#FF0000',
showInLegend: false
}
],
StackOverflow Question
Referenced within the issues space for highcharts / albeit not an issue
I'm trying to use Highstock with numbers that are close to the maximum number (http://www.w3schools.com/jsref/jsref_max_value.asp) but I get error in highstock: Error: Invalid value for attribute d="M 0 -Infinity.
Here is an example:
$('#container').highcharts('StockChart', {
series : [{
data : [1.7976931348623157e+20,
1.7976931348623157e+30,
1.7976931348623157e+50,
1.7976931348623157e+100,
1.7976931348623157e+120,
1.7976931348623157e+150,
1.7976931348623157e+170,
1.7976931348623157e+200,
1.7976931348623157e+230,
1.7976931348623157e+260,
1.7976931348623157e+300,
1.7976931348623157e+308]
}]
});
Also you can see it at jsfiddle: http://jsfiddle.net/s6gscza2/2/
I guest the Highstock should show the maximum number or I'm missing some settings.
It means that you have too much digits, because javascrpt function toFixed() is limited to 20 digits.
I have a table defined in a gsp-file. The table has a column with numeric edited numbers. I want to rightAlign them, so that the decimalPoints are all in the same position one under the corresponding one in the preceeding line.
peter
Is this what you are looking for? Try it here.
[
'1.0',
'115.00',
'0.0',
'100.0',
'24.9',
'4.09',
'54.09',
'13452.098',
'134520.098',
'198.0',
'0.98'
].each {
def (whole, fraction) = it.tokenize(/./)
println ( [ whole.padLeft(6), fraction ].join(/./) )
}
//Output
1.0
115.00
0.0
100.0
24.9
4.09
54.09
13452.098
134520.098
198.0
0.98
Assumption:
All Decimal numbers
Max 6 digit whole number
You could use the padLeft method as dmahapatro suggested if you are using a fixed-width font, however, if you are not, you are going to have to use some CSS to format it correctly. I suggest putting everything to the right of the decimal place (including the decimal) in a span, giving it a fixed width and aligning it to the left. Check out the fiddle here: http://jsfiddle.net/fvp3obxr/. You might need to adjust the width depending on how many decimal places you have.
unfortunately with how lengthy this thing is I don't have a fiddle for it, as I didn't build it, but basically all I am trying to do is assure that these values get set to two decimal points, regardless of the value of it. If it's 100, I want it to read 100.00 and that is seemingly the issue I am having. The code for this section, which replaces a template value is this;
if (isLegend) {
if (legendFooterTemplate) {
legendFooterData = legendFooterTemplate.replace("highcharts.value", addCommasToLargeNumber(Math.round(totalValues * 100) / 100));
legendFooterData = legendFooterData.replace("highcharts.percent", Math.round(totalPercent));
legendTable.append("<tr>" + legendFooterData + "</tr>");
}
//make the legend visible
legendTable.css("visibility", "visible");
}
you can see it adds commas to larger numbers and takes that formatted number and plugs it into the template where highcharts.value and highcharts.percent live. I just want to know how I can manipulate the math.round() functions to make it have two decimal points no matter what.
Thank you for any and all help,
Nick G
For percentage use:
this.percentage.toFixed(2)
Example: http://jsfiddle.net/jugal/dTMWP/
For other:
Highcharts.numberFormat(this.y,0)
Example: http://jsfiddle.net/CAKQH/24227/