I'm trying to implement a heatmap in highcharts with a logarithmic colorAxis, however, I keep getting highcharts error #10 (can't plot zero or subzero values on a logarithmic axis).
As I'm trying to apply the logarithmic property to the color axis and not the actual axis themselves, I believe my problem is caused by some of my bins having a frequency of zero (A heatmap colors by the frequency in each bin).
How can I get around this? Can I create a default function so that when a frequency is zero it assigns that bin a default color? I can't find any solutions in the docs.
Currently, my colorAxis object looks like this
colorAxis: {
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
}
My solution was to iterate through my data and change all the zeros to an extremely small number then set a min property on the colorAxis so the extremely small numbers would not interfere with the color scheme. This is obviously not the best solution because if the third dimension was measuring something other than frequency and this other thing could be a fraction less than 1 then the extremely small value could overlay with actual data and throw off the color scheme. Hopefully someone comes along and provides a better solution, but for now this is all the insight I have to give.
Logarithm doesn't have any value in 0 so your solution seems pretty neat. You need to apply some offset to the values that equal 0 - there's no other way.
If you want to be more consistent you can apply the offset to all the values. Then apply formatters(tooltip, data labels, color axis' labels) so that the user sees the value without the offset.
Live demo: http://jsfiddle.net/kkulig/jdf5wrdL/
Related
I am trying to build a waterfall chart which will have heavily skewed data(max 45000, min 4), to make the smaller values look significant amount and I am trying to break the yaxis to achieve that. However I am unable to find a generic logic as where exactly to break the yaxis so that the graph looks good for any data. Below is my code.
yAxis: {
title: {
text: 'USD'
},
// calculate percentage of first value for breaking
breaks: [{
from: data[0]*0.05, // break starts at 5% of 7311
to: data[0] * 0.97 // and ends at 97% of 7311
}],
events: {
pointBreak: pointBreakColumn
}
},
http://jsfiddle.net/Saibabu276/4cdrqnbj/61/
Also I am getting axis broken on the second bar in below case for the reason I couldn't figure out. Please Help!!
Setting the yAxis.type to logarithimic is the best way to work with skewed data.
Logarithmic axes can be useful when dealing with data with spikes or large value gaps, as they allow variance in the smaller values to remain visible.
More information with type scale use in charts, you can read on the Highcharts blog.
I have certain requirement where I need to override the auto calculated values for Y axis in highcharts. For eg.
Here, the gridlines plot area is equally divided into 100. I wanted to override this so that the negative plot area should be at a max of let's say 50 and the positive ones can remain the same. Even if I try the max, min, softMax, softMin, ceiling and floor properties, the result is the same. I was thinking of using a secondary axis but then there is only one data in the series which would render the second one useless. I don't think using setExtremes() will be helpful either. I'm hoping to avoid modifying the library itself to add a certain option but it'll be helpful if such an option already exists in highcharts. Any suggestions?
Use tickPositions or tickPositioner property:
yAxis: {
tickPositions: [-50, 0, 100, 200, 300, 400]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4883/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositions
https://api.highcharts.com/highcharts/yAxis.tickPositioner
I have two x-y datasets that form two potentially related scatter plots.
The first dataset has an approximate domain of 0 to 25,000 and range of 0 to 0.3.
The second dataset has an approximate domain of 0 to 550 and range of 0 to 4.5. The first dataset is much more precise and can be considered correct, so I am trying to compaire the second set to the first to find out if the two sets correlate. The second set is also an inverse of the first.
Visualization of first dataset:
Visualization of second dataset:
The data is stored in the form of data: { xAxis: [0,1,2,3,4...], yAxis: [0.20779456198215485, 0.20824825763702393, 0.20915564894676208, 0.20960935950279236...] } for each dataset.
Approach:
I am having trouble figuring out how to approach this problem. My initial thoughts are to reduce the first dataset by making it less precise in terms of data points, so removing ~20,000 data points with even spacing or something. I could split the graphs into periodic fragments and then use something like regression-js to do a 3rd degree polynomial regression with regression.polynomial(data[, options]) and compare the regression constants of the two functions to see how much they correlate. However, this could be a completely incorrect approach by someone more experienced.
Any advice would be greatly appreciated.
I'm looking for a javascript chart library where I can set custom step size.
I want a bar chart, where certain values are more important than others.
I'd like to have the ticks like [0, 50, 90, 99, 100]. And have the space between those values the same. I've tried Google Charts and Chartist, but they all put 99 and 100 very close to eachother, but I want it equally divided.
This is the idea:
Anyone ideas how to achieve this?
If these are your domain values, then provide them as strings instead of numbers. Then they will be evenly distributed.
But if these are your target or range values, you'll have to do something trickier. You'll have to use integer values like 0 through 4, and then use the explicit ticks option for the vAxis to specify both the values and how to display them.
I am working on flot jquery library, and I used to use this code in order to tell flot to inference the x-axis itself
xaxis: {
},
now i have a case in which I need to show the values starting from zero in x-axis, i don't care about last value, so I need flot to calculate it dinamically. it is possible to set just the begining ?
what I tried
I couldn't find such an option using google so I calculated the max value my self and I set the x-axis manually between zero and that max value. that approaches works in some cases, but i do need to handle all the senarios so i thought let me ask here first to see if there is a built-in option for that
You can set the minimum or maximum extent of the axes like this:
xaxis: {min: 0, max: 999}
See https://github.com/flot/flot/blob/master/API.md#customizing-the-axes