I'm working on a project using google data visualization API and I'm trying to show a chart illustrating the numbers of visits of users during the last week .
the problem is that this number is always an integer and greater or equal to 0 but on my chart the Y-axis show decimal numbers .
how can I configure the options array to get only integers ?
From How to show only integers (no decimals) in chart API x/y-axis labels, user asgallant suggests this:
vAxis: {
format: '#'
}
In that same thread, user Daniel LaLiberte says this:
If you specify a format of '#' you will only see only whole integer values. But if a value that is rounded is not close to an integer, the tick will appear to be in the wrong position, or the label will be wrong for the tick.
The Google Charts API assumes you want 5 gridlines in many cases, and depending on where your data values fall, 5 gridlines may not work out to give you integer tick values.
The better thing to do is to turn on the variable number of gridlines feature by specifying:
gridlines: { count: -1}
Then it tries hard to give you nice round tick values.
You can also specify exactly what tick values you want by using the 'ticks' option.
gridlines: { ticks: [ -4, -2, 0, 2, 4 ] }
Finally, the official documentation: Customizing Axes: Number Formats
Related
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'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/
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'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},
In highcharts if there are two series, where the first series value is 20,0000 and the second series value is 20, then the second series becomes so small that it is almost invisible.
Is it possible to break the first bar so that second series become visible? Below is the desired output...
At this time there is not a way to do this.
See the HighCharts User Voice here.
I have used a mathematic calculation in the past to solve this kinds of problems. Here is a couple of different examples:
VALUES: 220, 110, 55, 5
Normal Format
Square Root Format
VALUES: 1100, 220, 110, 55, 5
Normal Format
Square Root Format
What I do in the above examples to get low value series to show more is use the square root of all values. The data is sent as the square root rounded to the third decimal. Then I use the formatter on the yAxis label and tooltip to display the proper values.
Also, in the above examples, I am using whole numbers. When formatting the yAxis label and tooltip I am adding 1 and forcing them to an integer to get them back to the original needed number. This works great for whole numbers. If your data is not a whole number, then you would have to pass the entire result from the square root. Then of course not force it to an int.