Is it possible to get the tickmark exactly on its value, and not in the middle of the hour? In my heatmap I have 1/4h values, so the tickmark position doesn't make sense. To illustrate this, I take a sample of Highcharts and make a little modification:
https://jsfiddle.net/wczo89Le/1/
Definition of the yAxis:
yAxis: {
title: {
text: null
},
labels: {
format: '{value}:00'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 6, 12, 18, 23],
tickWidth: 1,
min: 0,
max: 23
},
Consider the 2 first hours in the charts. There are 1/4 value. But the tick of 00:00 is on 00:30.
Antoher problem is the tooltip doesn't show the value where the mouse is. But it is offset. So it's not possible to get the last value (23:45) in the day shown in the tooltip.
Many thanks
I need to create a chart with fixed values xaxis although it contains no data to graph like this:
Is importante the min value for yaxis must be (0) but show 1 grid line
(The color does not matter, and I need to show minute by minute interval, eg 18:50, 18:51, 18: 52, 18:53 ... 10 Total ticks)
as it should be the format xaxis?
as it should enter data values?
You can use showEmpty parameter of your xAxis and yAxis to show them without any data. You can also add min and max values for calculating the extremes of your axes.
If you want to have an interval of your ticks equal to 1 min you can set it using tickInterval: http://api.highcharts.com/highcharts/xAxis.tickInterval
Here you can find code that may help you:
$('#container').highcharts({
xAxis: {
type: 'datetime',
min: Date.UTC(2016, 01, 01, 01),
showEmpty: true,
max: Date.UTC(2016, 01, 01, 01, 30),
tickInterval: 1000 * 60, // one minute
},
yAxis: {
min: 0,
max: 10,
showEmpty: true
},
series: [{
}]
});
And here you can find live example how it can work: http://jsfiddle.net/wys1duhq/1/
This is my chart
I need that tick start from the start of my chart, without padding left.
I tried read docs, but I couldn't find anything about it
Per the docs it should be doing this anyway with xAxis.startOnTick:
Whether to force the axis to start on a tick.
Use this option with the minPadding option to control the axis start.
Defaults to false.
So, perhaps you overwrote this in your chart code?
Update:
So, from your code what you have is a categorical xAxis and an area line chart. Stylistically* this does not make much sense as the entire category "bin" is one single value and you are putting in time values (I assume since they are ['00:00', '05:00', '05:00', '05:00', '05:00']). Why not make an actual time series xAxis? This would give discrete x positions based upon the time and you could see that area chart a bit clearer.
Sample time-based xAxis:
$(function() {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
startOnTick: false,
type: 'datetime'
},
series: [{
name: 'John',
data: [0, 3, 4, 7, 2],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}]
});
});
What I mean "stylistically" is that you have hard breaks from "00:00" to "05:00". So let's assume that is 5 hours between categories. Does an area plot really convey any information to the user since you have a 5 hour gap between points? Wouldn't a simply column chart make more sense here? If this is even 5 minutes between categories it seems a little iffy to make this an area chart.
Background
I was trying to show the average traffic with respect to the hours DYNAMICALLY using highchart. That is to say I want it show the traffic repeatedly like this, when the time comes to 23:00 next I want it back to 0:00.
I am doing this by setting 24 categories ['0:00', '1:00'...,'23:00'], and adding points when the data is updated by ajax, say every 1 second.
var chart = new Highcharts.Chart({
...//some options
xAxis: {
categories:['0:00','1:00','2:00',...,'23:00']
},
load: function() {setInterval(updateData,1000)}
series: [] //empty series here, adding dynamically by ajax
})
the updateData is defined as a function
function updateData(){
var data = $.ajax(...)// get the data
var series = chart.series[0];
if(series.data.length < 24){ //when data.length is < 24 add directly
chart.series[0].addPoint(data,true,false);
}else{
chart.series[0].addPoint(data,true,true);//set the 3rd option to true to remove the first data point, actually here this data is equal to the first one since this is a circle, when it comes to 24:00 it is actually 0:00, and I should update the xAxis.
//code updating the axis categories to [1:00, 2:00...23:00,0:00]
xAxis.setCategories(categories);
}
}
the x-axis turns out to be [2:00, 3:00, ...23:00, 0:00, 24], That is to say the point that I add this time does NOT correspond to the categories[24]:0:00, It is actually corresponding to the categories[25] which is not exist, so it is set to 24 in default.
A solution (quick and dirty)
do not ring shift the categories but push a new circle to it,like:
categories.push("time");//time is 0:00-23:00
xAxis.setCategories(categories);
but this will make the categories larger and larger..which is bad.
How can I fix this.
Another solution(also with some problems)
By using datetime as the type of x-axis, there is another problem. My data format is as follws
time count
8:00 23
9:00 56
... ...
and I can construct Points like [time, count], the question is I have time only. Even if I construct data by manually adding a date like
time = (new Date("2012-11-17 "+time)).getTime()
seems feasible. But when it got through 24 hours, the spline comes back to the left of the chart since the x-axis value here is equal to the first one.
BTW: how can I make the x-axis show only the time, the image above showed date at the left side, and the time interval is automatically display how to make it display all?
Thank You for your attention!!!
I followed your advice #Ruchit Rami and revised my code:
/*update part*/
var time = series.points.length > 0 ? series.points[series.points.length-1].category+3600 : 0;
//from 1970-1-1 0:00 And **add 1 hour everytime**
if (series.data.length < 24) {
series.addPoint([time, sum],true,false);
} else {
series.addPoint([time, sum],true,true);
}
/*chart part*/
xAxis: {
type: 'datetime',
dateTimeLabelFormat: {
second: '%H:%M',
minute: '%H:%M',
hour: '%H:%M',
day: '%H:%M',
week: '%H:%M',
month: '%H:%M',
year: '%H:%M'
}
tickInterval: 3600
}
The result
The date label format seems not affected though I specify it
And the time is not correct. Why? Thanks!
still didnt displayed right
To display only time on the X-axis you can use dateTimeLabelFormats property of xaxis and you can use tickInterval for setting tick interval on xaxis.
//Sets tickInterval to 24 * 3600 * 1000 if display is by day
tickInterval : 24 * 3600 * 1000,
dateTimeLabelFormats : {
hour : '%H:%M',
day : "%H:%M"
}
Now, for the issue of chart redraw from the first point, you will need to increase the date of the xaxis point. I am unable to come up with any elegant solution but you can check for time "0:00" while adding new points dynamically and before adding that point increase its date part by one compared to last point in the series.You can find the last point of the series by series.points[series.points.length-1]. Hope i haven't missed anything.
Now, this may not be what you are looking for but I am making some assumptions about what you want to show:
Data by hour for one "day" 0000-2300
Do not care to show the date just the time
Data fluctuates across "days" for a given time
I have created an example here of the chart iterating through 4 "days" of data. I did this by creating an empty data series first to draw the chart, then on load of the chart I iterate through an array of data sets every 1.5 seconds. It then loops back over to the beginning. I have it updating a DIV with what the "day" is. Please let me know if I have missed some condition you need.
Here is the looping code:
var data1 = [5, 8, 2, 5, 7, 4, 1, 2, 30, 20, 50, 30, 150, 130, 70, 50, 20, 47, 32, 18, 20, 15, 16, 8];
var data2 = [9, 15, 3, 4, 1, 1, 0, 0, 60, 75, 112, 190, 267, 365, 258, 164, 168, 190, 47, 16, 20, 18, 5, 8];
var data3 = [15, 18, 12, 5, 7, 4, 1, 2, 130, 20, 150, 130, 150, 130, 70, 50, 20, 47, 32, 18, 20, 15, 16, 8];
var data4 = [19, 15, 13, 4, 11, 11, 0, 0, 60, 175, 112, 190, 267, 365, 258, 164, 168, 190, 47, 16, 20, 18, 15, 18];
var dataSet = [data1, data2, data3, data4];
var dataIter = 0;
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: function() {
var series = this.series[0];
setInterval(function() {
if (dataIter >= dataSet.length) dataIter = 0;
series.setData(dataSet[dataIter], true);
$("#dayLabel").text("Day - " +dataIter.toString());
dataIter += 1;
}, 1500);
}
}
},
xAxis: {
categories: ['0000', '0100', '0200', '0300', '0400', '0500', '0600', '0700', '0800', '0900', '1000', '1100', '1200', '1300', '1400', '1500', '1600', '1700', '1800', '1900', '2000', '2100', '2200', '2300'],
labels: {
rotation: 90
}
},
yAxis: {
min: 0,
max: 500
},
series: [{
data: []}]
});
});
In my chart, I try to display end of month performances over one year (at 31 Jan, 29 Fev, ..., 31 Dec). X-axis is defined as follow:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %Y'
}
}
}
The issue is that the scale automatically adjust to the appropriate unit (Months) and display the first day of the Month. As a result, my first element (at 31 Jan) is displayed above "Feb 2012" (same issue for other elements).
I was wondering if I could rather display the end of month day on my x-axis. Any idea?
Thanks,
Example
You can define a custom xAxis.tickPositioner with the positions at which the tick should appear as follows
xAxis: {
type: 'datetime',
tickPositioner: function() {
var ticks = [
Date.UTC(2012, 0, 31),
Date.UTC(2012, 2, 31),
Date.UTC(2012, 4, 31),
Date.UTC(2012, 6, 31),
Date.UTC(2012, 8, 30),
Date.UTC(2012, 10, 30)];
//dates.info defines what to show in labels
//apparently dateTimeLabelFormats is always ignored when specifying tickPosistioner
ticks.info = {
unitName: "month", //unitName: "day",
higherRanks: {} // Omitting this would break things
};
return ticks;
}
}
Customize tick positions | Highchart & Highstock # jsFiddle