Scenario: I have a heatmap (built with Angular) that is backed by a LARGE data set that is paginated. Each time I will only get a portion of that data and re-render the heat map for each 'page' load.
ex. The rendered heatmap will be 20x20 but the actual data set behind it is 400x400 or larger. Instead of loading all the data at once, each time I page the X or Y axis, I will re-render the heatmap.
This works great - however the color stops get adjusted based on the 'page' data each time.
I will know the minimum value and the max value of the 400x400 grid before I even render page x1,y1. How can I ensure the color stops are based on the min and max values on the 400x400 heatmap and not on data specific to the 20x20 heatmap?
I hope the explanation is straightforward enough.
Thanks!
You should be able to set the colorAxis.min and max if you know the values like you said like so:
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic',
gridLineWidth: 2,
gridLineColor: 'white',
minorTickInterval: 0.1,
minorGridLineColor: 'white',
tickLength: 0
},
Related
Consider my following example case.
dataset = [[1,5],[2,6],[3,7],4,8],[5,9],[6,10]].
I made this graph scrollable on x-axis. When the graph is first loaded, I can see y values from x=1 to 4 by scrolling. The next step is I want to set min and max x-ranges by setExtreme() method.
I want to set x-axis min value 2 and max value 5. The graph range for x-axis should be 2-3. But the graph should be able to scroll to see value of x=1 and also when x=10. Is this possible? I am new to highcharts. Thanks in advance.
I think that you can achieve your requirement by defining the xAxis.min and xAxis.max values.
Demo: https://jsfiddle.net/BlackLabel/2wjztbom/
xAxis: {
min: 2,
max: 4,
scrollbar: {
enabled: true
},
},
Be aware that scrollbar feature is available only for the Highcharts Stock module, not for basic Highcharts - https://www.highcharts.com/docs/chart-concepts/scrollbar
I have created a graph which is scaled according the value selected on the first slider.
As you can see in the second picture, the first slider is set to 50 and the values are all halved. My problem is that chart js auto rescales the y axis whenever chart.update() is called (which is called whenever I drag the slider).
How do I disable this?
When creating the chart, you could define min and max options for yAxes.ticks. This may be hard-coded value or you may derive them from the chart data.
yAxes: [{
ticks: {
max: 350,
min: 0
}
}]
In Highchartjs we can have grid lines based on series points. However I'd like to modify that by adding as many grid lines as I prefer.
In other words, I'd like to set this Grid-line as a background for this JsFiddle highchartjs line-graph
From looking at the docs, both the xAxis and yAxis support gridlines
The question really is; Is it possible to do this? If so please shed some light to this matter.
This can be set pretty much as you said:
xAxis: {
minorTickInterval: 0.25,
gridLineWidth: 1
},
yAxis: {
minorTickInterval: 0.25,
gridLineWidth: 1
}
The minorTickInterval governs how many "boxes" you have. Since the tick interval is 1 here, I set the minorTickInterval to 0.25, 1/0.25 = 4. Setting it to 0.2 would give 5 small boxes. Naturally if you change scale on the axes this will change as well.
Working example: http://jsfiddle.net/ewolden/t0bzyywe/1/
API refs: gridLineWidth and minorTickInterval
Demo
i'm using ChartJS and i've encountered a bizarre issue i can't figure out. it'd be awesome if someone could point out what's wrong here..
i got 2 datasets
the first one is OK. when displayed individually or when displayed with the second dataset, it remains the same (it looks identical, toggle "both" and "first" in the demo)
unlike the first dataset, the second dataset looks different when it is displayed by itself in opposed to being displayed along with the first dataset. (click "second" and "both' in the demo)
as a byproduct of this behavior (i think), i've also noticed that the second dataset's first point y position is wrong. the value is 8 yet the y position is 0. the first dataset also has 8 as its first data point and it is drawn correctly.
what am i missing..?
I'll recommend you to set a minimum and maximum display value to the Y Axis like:
yAxes: [{
gridLines: {
display: true,
drawTicks: false,
},
ticks: {
min:0,
max: 25
}
}]
If its not done, it auto-scales to the minimum and maximum value of the datasets, and it can be different in each display mode.
I got problems with an area chart to full the entire width when I have two datapoints. Here's a js-fiddle. http://jsfiddle.net/user1572526/dG2s5/1/
It has something to do with the min and max value on the xAxis.
xAxis: {
categories: ['2013', '2030'],
min: 0.5,
max: 1.5
},
I'm reading the docs but I cant figure out how to use theese when they are applied on the xAxis since I don't have any number values here. http://api.highcharts.com/highcharts#xAxis.min
Any ideas?
That is not related to min/max
Its related point placement with respect to tick
in plotOptions > area you have pointPlacement.
pointPlacement: null //default
pointPlacement: 'on' // on the tick
pointPlacement: 'between' //between the ticks
Updated your fiddle at http://jsfiddle.net/dG2s5/2/
I hope this is what you are looking for.