I'm trying to implement highcharts with multiple y-axis and need to set yAxis.tickPositioner callback function for each of the y-axis. So instead of writing the duplicate code in each callback I need to create a util function to which I can pass values like dataMin and dataMax which is only accessible in the tickPositioner callback function.
chartOptions {
xAxis: {
tickPositions: [0, 1, 2, 4, 8]
},
yAxis: {
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}
},
}
instead I want something like this which has all the values like this.dataMin and this.dataMax available in the util function
chartOptions {
xAxis: {
tickPositions: [0, 1, 2, 4, 8]
},
yAxis: {
tickPositioner: this.utilFunction();
},
}
utilFunction() {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}
You have access to an axis by this in utilFunction, if you assign it in this way:
yAxis: {
tickPositioner: this.utilFunction
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4958/
If you need to use some other context in the function, you can pass the reqired values through arguments:
yAxis: {
tickPositioner: function() {
utilFunction(this.dataMin, this.dataMax);
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4959/
Related
I use Highcharts to plot the graph, but there is a problem I am facing. data contains the values from 1 to n. So I want the yAxis column to start at 1. I set yAxis min = 1 but it doesn't fix my problem.
Here is a jsfiddle that illustrates the problem I am having:
Link
yAxis: {
title: null,
endOnTick: false,
min: 1
}
Is there any way to solve my problem? I expect it like this:
I expect it like this
The simplest solution is to use tickPositioner function and modify the first tick. For example:
yAxis: {
title: null,
tickPositioner: function() {
const tickPositions = [...this.tickPositions];
tickPositions[0] = 1;
return tickPositions;
},
endOnTick: false,
startOnTick: false,
min: 1
}
Live demo: https://jsfiddle.net/BlackLabel/rf3cm8Lw/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner
Thanks for ppotaczek answer. I find it pretty cool, can ignore blanks, starting from the smallest element. I have a solution for this and am posting it here for anyone who needs it.
tickPositioner: function () {
var positions = [],
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
if (this.dataMax !== null && this.dataMin !== null) {
for (tick; tick - increment <= this.dataMax; tick += increment) {
positions.push(tick);
}
}
return positions;
}
How to set/supply value (default to 0) for blank data in hours as shown in attached image below.
The target result should have all graphs even for blank hours.
You can create a loop and add points to your data array with some default y value (50 in the example below) and x value with the same interval as tickInterval:
var data = [
[1561593600000, 102.5],
[1561658400000, 177.45],
[1561723200000, 115.5]
],
interval = 2 * 60 * 60 * 1000,
j = 1,
i = data[0][0] + interval;
for (j; j < data.length; j++) {
for (i; i < data[j][0]; i += interval) {
data.push([i, 50])
}
i += interval;
}
Highcharts.chart('container', {
chart: {
type: 'column'
},
series: [{
data: data.sort(function(a, b) {
return a[0] - b[0]
})
}],
xAxis: {
type: 'datetime',
tickInterval: interval
},
});
Live demo: http://jsfiddle.net/BlackLabel/m0zfeyd4/
I have a Flot Chart that is live and generates random numbers that displays on the chart. It is used only as a dummy so I don't need real live data. I want the chart to start at 0 on yaxis and 100 on xaxis to make it look as real as possible. Below is my code in the js file.
var data = [], totalPoints = 100
h = 0
function getRandomData() {
//h = h + 1
//return h
//data.push(h)
if (data.length > 0)
data = data.slice(1)
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5,
if (y < 0) {
y = 0
} else if (y > 100) {
y = 100
}
data.push(y)
}
// Zip the generated y values with the x values
var res = []
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res
}
var interactive_plot = $.plot('#interactive', [getRandomData()], {
grid : {
borderColor: '#f3f3f3',
borderWidth: 1,
tickColor : '#f3f3f3'
},
series: {
shadowSize: 0, // Drawing is faster without shadows
color : '#3c8dbc'
},
lines : {
fill : true, //Converts the line chart to area chart
color: '#3c8dbc'
},
yaxis : {
min : 0,
max : 100,
show: true
},
xaxis : {
show: true
}
})
var updateInterval = 500 //Fetch data ever x milliseconds
var realtime = 'on' //If == to on then fetch data every x seconds. else stop fetching
function update() {
interactive_plot.setData([getRandomData()])
// Since the axes don't change, we don't need to call plot.setupGrid()
interactive_plot.draw()
if (realtime === 'on')
setTimeout(update, updateInterval)
}
//INITIALIZE REALTIME DATA FETCHING
if (realtime === 'on') {
update()
}
//REALTIME TOGGLE
$('#realtime .btn').click(function () {
if ($(this).data('toggle') === 'on') {
realtime = 'on'
}
else {
realtime = 'off'
}
update()
})
/*
* END INTERACTIVE CHART
*/
There is a button that calls the Flot chart into action and it works great but it looks too much like a staged chart. I need it start at 0 on the y-axis and 100 on the x-axis. Any information on how to go about this would be great and very much appreciated.
Fill your data array with zeroes before you start, then your update function starts adding random points one at a time instead of starting with 100 random data points:
for (var i = 0; i < totalPoints; i++) {
data.push(0);
}
See this fiddle for a full example.
PS: Please end your code lines with a semicolon!
I have this y axis labels formatter
yAxis: {
title: {
text: null
},
labels: {
formatter: function(){
return (Math.abs(this.value) / 1000000) + 'M';
}
}
},
but I need the formater to check if the values is more than million 1000000 then format it accordingly..
I've tried this but it didn't work properly
yAxis: {
title: {
text: null
},
labels: {
formatter: function(){
if (this.value > 999999) {
return (Math.abs(this.value) / 1000000) + 'M';};
}
}
},
it displayed the labels on one side only..
I'm using the Stacked bar chart pyramid
here is it on JSFiddle
http://jsfiddle.net/chGkK/
The issue is the formatter function only returns a label if the value is greater or equal to 1 million. You need to use the absolute value in this comparison and move the return statement outside the if block:
var absValue = Math.abs(this.value);
if (absValue >= 1000000) {
absValue = (absValue / 1000000) + 'M';
};
return absValue;
How do i make the value of y-axis into integer?
i currently have this value 0.0 1.0 1.5 2.0 2.5 3.0. i want to change it to some thing like this 0 1 2 3 etc....
thank you! cheers!
if i understand what you want, is to display in y axis integer values.
Try this,
axesDefaults:
{
min: 0,
tickInterval: 1,
tickOptions: {
formatString: '%d'
}
}
Override createTicks function and introduce new axis bool property - integersOnly.
// jqplot adding integersOnly option for an axis
var oldCreateTicks = $.jqplot.LinearAxisRenderer.prototype.createTicks;
$.jqplot.LinearAxisRenderer.prototype.createTicks = function (plot) {
if (this.integersOnly == true) {
var db = this._dataBounds;
var min = ((this.min != null) ? this.min : db.min);
var max = ((this.max != null) ? this.max : db.max);
var range = max - min;
if (range < 3) {
if (this.min == null) {
this.min = 0;
}
this.tickInterval = 1;
}
}
return oldCreateTicks.apply(this, plot);
}
Just to build on the top answer.
axes: {
yaxis: {
min: 0,
tickInterval: 1,
tickOptions: {
formatString: '%d'
}
}
}
Would just apply this to the yaxis. Helpful, if you have a bar chart or some other chart and you want to isolate the axis.
Try parseInt(y_axis)
(filler text, answer too short)