I'm using highcharts to display data for over a period of one month so it it could be displaying anywhere form 1 data point to 31 data points (I'm using the jQuery Datepicker widget to select dates). My problem is with the x-Axis. When viewing between 2 and 7 data points the x-axis is automatically trying to adjust itself which works fine the more data points are being rendered but when there are less as previously mentioned there are problems.
I have captured some screenshots showing my perdicament as well as created a JSFiddle. I do have a specific size that I need to fit the chart in and I have used the same size in the JSfiddle.
What I would like ideally is for the x-axis to start on the first of the month (or at the lest NOT start on the end of the previous month) and avoid overlapping issues. I'm hoping it's a setting that I'm overlooking that controls how highcharts "automatically" calculates what is displayed on the x-axis and it's interval. I know there is a tick-interval setting but I've not had any luck with that in my situation.
Image: http://i.imgur.com/p0bQg6U.png
JSFiddle: http://jsfiddle.net/engemasa/sgKcB/
Here is the highcharts code:
$('.chart').highcharts({
chart: {
type: 'column'
},
xAxis: {
labels: {
enabled: true,
formatter: function() {
return Highcharts.dateFormat("%b %e, '%y", this.value);
}
}
},
title: {
text: null
},
tooltip: {
formatter: function() {
var date = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b><br />';
return date + this.y;
}
},
yAxis: {
labels: {
enabled: true
}
},
credits: {
enabled: false
}
});
Assistance is greatly appreciated!
Solution seems to be datetime xAxis and dateTimeLabelFormats option for Highcharts. For example: http://jsfiddle.net/sgKcB/26
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: "%b %e, '%y",
week: "%b %e, '%y"
}
},
You can use tickPositioner parameter, which allows your own function. You can calculate and return correct order of your ticks.
http://api.highcharts.com/highstock#xAxis.tickPositioner
Related
I coverted all the x value with Date.parse() function
How could I get my expectation
- change x label and x value as "%Y%m%d" in tooltip
- remove the strange 12:00 empties on x-axis
Thanks
Covert function
$.each($scope.flights, function() {
var current_flight_no = this
$.each(current_flight_no.data, function(){
this.x = Date.parse(this.x);
})
});
Chart option
options: {
chart: {
type: 'scatter'
},
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e (%a)',
},
tooltip: {
formatter: function () {
return 'Extra data: <b>' + this.point.price + '</b>';
}
},
To fix the tooltip issue, use the formatter option:
formatter: function() {
return this.y + '<br />' +Highcharts.dateFormat('%Y %M %d', this.x);
},
The x values are in milliseconds, Highcharts.dateFormat(...) is needed to change milliseconds to regular date
To fix the 12:00, just go with minTickInterval
http://api.highcharts.com/highcharts#xAxis.minTickInterval
It will be great if you can share the data to better assist you.
How to display highlighted graph's x-axis values only , on bar graph in
high chart?I have 6 graphs plotted, need to highlight selected graphs x-axis values only.
xAxis: {
categories: userArr,
title: {
text: 'Users'
},
},
You may do so by using formatter function in datalabel (See Fiddle here)
dataLabels: {
formatter: function(){
return this.point.name
},
enabled: true
}
I have a chart drawn using Highcharts API, which has two series and multiple levels of data shown using DrillDown feature of the API. When i tend to modify the default Axis label format using formatting property and by setting useHTML 'true', the labels are displayed with underline even in the last level which is not the expected behaviour.
xAxis: {
type: 'category',
labels: {
rotation: -45,
formatter: function (e) {
return '<div class="chartXAxisLabel" title="' + this.value + '" ><span>' + this.value + '</span></div>';
},
useHTML: true
},
title: {
enabled: true,
align: 'high'
}
},
The issue could be seen in the below fiddle link.
http://jsfiddle.net/6LXVQ/418/
I find it odd that only adding/removing useHTML: true causes this problem by itself. The formatter does not need to be involved (as shown in this minimal example).
I found that adding this minimal code fixes the problem (JSFiddle example with your code):
xAxis: {
labels: {
useHTML: true,
style: {
"text-decoration": "none"
}
}
}
I'm not exactly sure why, but it removes the underline from the span element that is causing it.
I have a data set where the series values are angles in degrees (0 to 360). Is it possible to plot a graph like the one illustrated here (ignore the green vertical line) in highcharts? Specifically, if any of the following criteria holds, the chart should avoid linking the two data points directly in the sense of passing through south (180), and should pass through north (0/360) instead:
A point is below 90 and the next one is above 270, or;
A point is above 270 and the next one is below 90.
Any help is appreciated.
What I would do to make this happen is to simply pre-process your data to create two series and then plot both of them onto the same plot. One series is for 0-179 and the other is for 180-359.
You may also want to consider a scatter plot instead of a line plot especially if your data in either of the series is not as smooth as the data in the example. Meaning that one data point is say 10 and the next one is 110 and then the next one after that is 12 or some such.
This code gives you an example, the data is provided by JSON but you should be able to just easily replace it with however your data comes in:
<script type="text/javascript">
$(document).ready(function () {
var chart = new Highcharts.Chart({
title: {
text: 'Wind Direction'
},
chart: {
renderTo: 'dataplot4',
borderWidth: 1,
defaultSeriesType: 'scatter',
zoomType: 'x'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
radius: 3,
states: {
hover: {
enabled: true
}
}
}
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 90,
min: 0,
max: 360,
title: {
text: 'Wind Direction (deg)'
}
},
tooltip: {
crosshairs: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) + ' AKST</b> ' +
this.series.name + ': ' + this.y + ' deg';
}
},
series: [
{
name: 'Wind Direction',
data: JSON.parse("[" + wind_dir + "]"),
pointStart: Number(startDateTime),
pointInterval: 3600000
}
]
});
});
</script>
I'd like to think that I have a jsfiddle for this somewhere, will update the answer when I dig it up.
EDIT: Here's a fiddle that shows the scatter plot in action. http://jsfiddle.net/Reality_Extractor/pNFYL/
I found out a problem with chart (highcharts 2.3.5) when i enter datetime series with only 1 data entry, it renders it with incorrect placement on x-axis and wrong point formatting.
here is the example: http://jsfiddle.net/LAcSw/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9]
]
}]
});
});
Is there a fix know or something(it was fine on 2.2.5)?
Since you only have a single point HighCharts is making its best guess as to the yAxis range as well as what the label is on the point for the xAxis.
You are not defining any sort of formatting for the xAxis datetime labels - and HighCharts only has one point to work with so it defaults to time. If you assign a formatter for the xAxis labels you can get it to do what you want.
Here is some rough code to show you what this does:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
}
}
},
yAxis: {
min: 0,
max:50
},
And here is your jsFiddle updated.