We Keep Coding

How do I change the x-axis datetime format to a mixture of time and date?

I have been trying to replicate an ADCP Graph using the Heatmap chart by Highcharts but I am finding difficulties in changing the x-axis format.
Example of an ADCP Graph
How do i replicate the x-axis as shown in the example above?
I am also hoping for the format to be date(dd/mm/yyyy), time(00:00), depth(m), velocity(m/s) in the small popup that appears as you hover around the graph.
Here's a link to my code:
https://jsfiddle.net/6hzq3o12/6/
xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 11, 31, 23, 59, 59),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
}

To achieve expected effect you need to define your own xAxis.labels.formatter function, which recognizes labels on first, middle and last position, and then set its value format to DD/MM/YY. Otherwise (for all other labels) return the HH:MM value:
xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 11, 31, 23, 59, 59),
labels: {
formatter: function() {
var timestamp = this.value
var ticks = this.axis.tickPositions
var isMiddle = ticks.length % 2 && ticks.indexOf(this.value) === Math.floor(ticks.length / 2)
var labelFormat
labelFormat = this.isFirst || this.isLast || isMiddle ? '%d/%m/%y' : '%H:%M'
return Highcharts.dateFormat(labelFormat, timestamp)
}
},
tickLength: 16
}
However, in order to make it work correctly, you need to provide the chart with appropriate data (with hours), as #ewolden says in his comment below your main post.
Live example: https://jsfiddle.net/25cwrqen/

HIghcharts Heatmap Overload with Too Much Data?

$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 0.5
},
title: {
text: 'Number'
},
xAxis: {
categories: [ .......... ]
},
yAxis: {
categories: [ .......... ],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function() {
return '' +
this.series.xAxis.categories[this.point.x] +
'<br>' +
this.series.yAxis.categories[this.point.y] +
'<br>' + this.point.value;
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ .......... ],
http://jsfiddle.net/Slate_Shannon/0mvgmhLb/6/
This is a heatmap chart. The chart looks okay as-is, but should have more data. However, if I add any additional data, the chart breaks.
Note that a large part of the data is commented out. This starts with the data that begins with
[50,0,null],
[50,1,8380],
[50,2,37430],
(note that I removed the axis labels and the data in the code shown above.)
If you change the position of the beginning of the comment tag to so that the "50" data gets charted, then the chart fails.
Is this just too much data, or is there a way to create a heatmap that needs to be approx 20 x 90 cells?

Set turboThreshold to 0, from the Highcharts API:
When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series. Set it to 0 disable. Defaults to 1000.
http://api.highcharts.com/highcharts/plotOptions.heatmap.turboThreshold
Example: http://jsfiddle.net/0mvgmhLb/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
turboThreshold: 0,
...

Try loading the Highcharts Boost module.
The boost.js module is a module to allow quick loading of hundred
thousands of data points in Highcharts.
Instead of relying solely on SVG to display the graph, this module does the following to boost performance:
... drawing the graph on a canvas, then copying over the contents to
an image tag inside the SVG, using a data URL.
Link to official blog post.
Just load the module after highcharts.js (lib/modules/boost.js).

This can be solved by providing the colorAxis with a min and max value. Highcharts has issues with calculating the max value with extremely large data sets.

Don't interpolate between missing values in Highcharts line chart?

UPDATE: My question is the opposite of this one, which it's been suggested might be a duplicate. I want not to use interpolation.
I am using Highcharts 4.1.7. I have a line chart with two time series. One series has a missing (not null, missing) data point.
By default in Highcharts, the line chart joins the points on either side and ignores the missing value. Is there any way to tell Highcharts not to join points where they are missing a value present in the other series?
I know that I can manually insert null values (and the default setting of connectNulls: false will do the rest), but it seems odd that Highcharts would interpolate between missing values by default - it's definitely visually misleading.
Code:
$('#container').highcharts({
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b \'%y'
}
},
series: [{
data: [{ x: 1362096000000, y: 29.9}, { x: 1364774400000, y: 71.5}, { x: 1367366400000, y: 106.4}, { x: 1370001600000, y: 99.9}, { x: 1372636800000, y: 108.4}]
},
{
data: [{ x: 1362096000000, y: 19.9}, { x: 1364774400000, y: 44.5}, { x: 1367366400000, y: 88.4}, { x: 1372636800000, y: 76.4}]
}]
});
JSFiddle here: http://jsfiddle.net/rnshabuf/
Renders like this:

The chart has no way of knowing what you consider "missing".
There are any number of reasons that a data set may have very valid gaps of any size between points - not all data occurs at regular intervals.
You need to pre-process your data and fill in what's missing according to the definition of your specific data, and how you want to handle it (how missing values should be treated in a time series is a wide topic with a lot of varied opinions).

Dates on xaxis with highcharts

I need to have dates on my xaxis on my chart. I collect my data through a range datepicker where the user can enter a range of 14 days. I need the first value on the xaxis to be the start date of the range and the last value to be the end date of the range.
i want the the xaxis labels to read something like "27th Jan 2015" , "28th Jan 2015" or something in that direction and each tic to be 1 day. I've read the API-documentation and i've played around alot with the settings of the chart but for some reason i can not get it to work.
$('#graphColumn').highcharts({
title: {
text: '',
x: -20 //center
},
xAxis: {
categories: [dayArray[0], dayArray[1], dayArray[2], dayArray[3], dayArray[4], dayArray[5], dayArray[6], dayArray[7], dayArray[8], dayArray[9], dayArray[10], dayArray[11], dayArray[12], dayArray[13]]
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: ' ',
data: series,
color: '#77B7C5',
marker: {
symbol: 'circle'
}
}, {
showInLegend: false,
name: '1 år sedan',
data: series1yearago,
color: "#71C73E",
marker: {
symbol: 'circle'
}
}]
});
here is my chart. I know the xaxis has categories set now but thats only for the moment, i know it should be datetime. My series are regular int arrays with one number on each index. I would apreciate any help that could be given here!
Edit: Here is a working jsfiddle example: http://jsfiddle.net/g0p00tLv/1

Your data, and how it is formatted, is what we really need to see.
You need to do one of two things:
1) pass your data as an array of [x,y] pairs, where x is either the epoch time stamp (in miliseconds), or a date.UTC object
2) pass your data as a single array of y values, and use the pointStart and pointInterval properties to set the date axis properly.
reference:
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
If you need more info, set up a working fiddle example and post it here.

highstock issue : pointInterval property is not working when series data set contains date and value?

I used pointInterval property to set interval as 30 days but my data set contains daily data.
That method is not working. chart is displaying all the points.
please check below image for the chart i got
https://docs.google.com/file/d/0B1wfs7NUcZnGQkk2QWdEbE9ndmM/edit
What is needed is to draw only three points for three months in the above chart.
Following is the code i used to do this.
Note that 'options.data.points' has data set in format of [[date,value],[]....]
var stockChartData = {
chart: {
renderTo: 'container'
},
title: {
text: "Stock Chart"
},
credits: {
enabled: false
},
yAxis: [
{
labels: {
align: 'left',
x: 2
},
title: {
enabled: false
},
lineWidth: 2
}
],
navigation: {
buttonOptions: {
enabled: false
}
},
scrollbar: {
enabled: false
},
series: [{data: options.data.points, type: 'line', pointInterval: 24 * 3600 * 1000 *30}]
};
stockChart = new Highcharts.StockChart(stockChartData, function (chart) {
});
please help me to solve this issue

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/pointinterval-pointstart/
The data set this example uses is in the format of [value,value,...] (see http://www.highcharts.com/samples/data/large-dataset.js).
So when pointInterval for a month is used, for example the last two values will be used for the values of last two months. For the same data when pointInterval for a year is used, the same last two values is used for the last two years. So the chart doesn't ignore the between values, therefore you will not have for example an average value of the month for day values.
EDIT:
You can use plotOptions.series.dataGrouping for grouping the day values in a month:
http://jsfiddle.net/worhscy0/