I've get a problem using a bubble chart and specifying min and max values on the x axis. In this example, no points are plotted:
$('#container').highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Highcharts bubbles problem'
},
xAxis: {
min:20,
max:80
},
yAxis: {
min:-80,
max:80
},
series: [{
data: [ {"x":23,"y":22,"z":200}, {"x":43,"y":12,"z":100} ]
}]
});
As you can see in the jsfiddle http://jsfiddle.net/6Qhh3/, the chart doesn't plot any bubbles.
If you remove the min parameter from the x axis, it works If you change it to a scatter chart, it also works. It only seems to fail if it's a bubble chart AND you specify a min on the xAxis.
Am I missing something, or is this a bug in v3.0Beta?
UPDATE: I am getting a console error: 'radii is undefined' on line 1905 of highcharts-more.js
UPDATE: I've emailed this to highcharts support.
UPDATE: Confirmed as a bug by highcharts support.
Indeed it looks like a bug, so I've reported it to our devs https://github.com/highslide-software/highcharts.com/issues/1578
Confirmed as a bug in v3.0Beta by highcharts support.
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/
I created a line diagram with multiple lines with the Chart Builder in SPSS.
Within the Chart Editor I changed the line style from "color" to "dash". I saved the style as a template to apply it to further similar line charts. However the template doesn't seem to be applied, the lines are still colored and not dashed.
Is there a way to tell SPSS in the Syntax to apply a dashed line style from template?
Yes, you have to tell SPSS inside the GPL statement that you want to use a dashed style.
So lets assume you created the following chart from the 'breakfast.sav' sample file:
GGRAPH
/GRAPHDATASET NAME="graphdataset" VARIABLES=BT COUNT()[name="COUNT"]
gender[LEVEL=NOMINAL] MISSING=LISTWISE REPORTMISSING=NO
/GRAPHSPEC SOURCE=INLINE TEMPLATE = "$HOME/SPSS/linediagram.sgt".
BEGIN GPL
SOURCE: s=userSource(id("graphdataset"))
DATA: BT=col(source(s), name("BT"), unit.category())
DATA: COUNT=col(source(s), name("COUNT"))
DATA: gender=col(source(s), name("gender"), unit.category())
GUIDE: axis(dim(1), label("Buttered toast"))
GUIDE: axis(dim(2), label("Percent"))
GUIDE: legend(aesthetic(aesthetic.color.interior), label("Gender"))
SCALE: linear(dim(2), include(0))
SCALE: cat(aesthetic(aesthetic.color.interior), include("1", "2"))
ELEMENT: line(position(summary.percent(BT*COUNT,
base.aesthetic(aesthetic(aesthetic.color.interior)))),
color.interior(gender), missing.wings())
END GPL.
Now within the ELEMENT statement you need to change both color.interior functions into shape.interior. So the statement would look like this.
ELEMENT: line(position(summary.percent(BT*COUNT,
base.aesthetic(aesthetic(aesthetic.shape.interior)))),
shape.interior(gender), missing.wings())
This turns the colored lines into black dashed lines.
If you want colored and dashed lines, just add the shape.interior(gender) function to the existing ELEMENT statement:
ELEMENT: line(position(summary.percent(BT*COUNT,
base.aesthetic(aesthetic(aesthetic.color.interior)))),
color.interior(gender), shape.interior(gender), missing.wings())
I thought the point was to add these settings. But if you don't want them, just delete the aesthetic, color, and shape function references.
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'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.