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.
Related
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
If i enter 17.0for a data value, the datalabels displays only 17 (the ".0" is missing)
How to fix that?
Example:
Input: 17.1 -> ok, data.y = 17.1, dataLabel = 17.1
Input: 17.0 -> nok: data.y = 17, dataLabel = 17
(BTW: i do not mean do display always one number after dot, i need to have the exact value that i got, so it may also be 17.00 or 17.000, depending on the source)
In this example, in the tooltip of May, Serie 1, i need 144.0 displayed and in October, Series 2 in need 176.0, i mean the same "value" i see in the data-Array: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/formatter-shared/ (this is the second example linked here: http://api.highcharts.com/highcharts/tooltip.formatter )
You can create a simple condition inside tooltip's formatter, which will check if number have decimals. If not (e.g. 144), it will add one additional digit (0) as a decimal.
if (value.toString().indexOf('.') === -1) {
value = value.toFixed(1);
}
API Reference:
http://api.highcharts.com/highcharts/tooltip.formatter
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
Example:
http://jsfiddle.net/k4nvjm29/
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
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.
I'm implementing line charts of primefaces(3.0) , I'm trying to change the value of X-scale
The values which I'm using are minX="0" maxX="38" , since primefaces linecharts is using jqplot , I added this script
<script>
$(function(){
widget_category.plot.axes.xaxis._tickInterval = 1;
widget_category.plot.axes.xaxis.numberTicks = 38;
});
</script>
But still the coordinates is coming in decimals.
I would like to mention that for Y scale, the values I used are minY="40" maxY="110" with style="height:1005px;" , As i figured out for a scale value , which can be 10 if height is defined as 1005px i.e. 5 * 14 = 70 which means Y scale is of 5 intervals , with 14 values and the line height is 1005 as 5*14*14 = 980 + 25 (which is top-margin added) 1005.
Though the same is not working out for X-Scale.
Any help would be helpful.
The arithmetic in your Y values are all multiplication operations on whole numbers, which will always result in a whole number. These whole numbers correlate perfectly to pixels.
Your X range however involves a multiplication of 1.0 and 38, one being an integer value and the other being determined as a float or double number. When performing a multiplication operation where one number is a float then the result value will always be a float, and standard floating point artithmetic rules will apply. This is why the coordinates are coming in decimals which don't equate perfectly to pixels.
When using Javascript you need to be careful of these kinds of pitfalls because it is not a strongly typed language like Java and it will not point things like this out to you.