How to set Highchart datetime format to minute? - highcharts
Here's the code I wrote!, I want to display x Axis to only up to minute without Y/M/D?
$(function () {
$('#container').highcharts({
chart: { renderTo:'container', spacingRight: 20, zoomType: 'x' },
subtitle: { text: 'Click and drag in the plot area to zoom in' },
title: { text: 'Login Trend' },
xAxis: { categories: ['2/13/2016 1:25:00 AM', '2/13/2016 1:30:00 AM', '2/13/2016 1:35:00 AM', '2/13/2016 1:40:00 AM', '2/13/2016 1:45:00 AM', '2/13/2016 1:50:00 AM', '2/13/2016 1:55:00 AM', '2/13/2016 2:00:00 AM', '2/13/2016 2:05:00 AM', '2/13/2016 2:10:00 AM', '2/13/2016 2:15:00 AM', '2/13/2016 2:20:00 AM', '2/13/2016 2:25:00 AM', '2/13/2016 2:30:00 AM', '2/13/2016 2:35:00 AM', '2/13/2016 2:40:00 AM', '2/13/2016 2:45:00 AM', '2/13/2016 2:50:00 AM', '2/13/2016 2:55:00 AM', '2/13/2016 3:00:00 AM', '2/13/2016 3:05:00 AM', '2/13/2016 3:10:00 AM', '2/13/2016 3:15:00 AM', '2/13/2016 3:20:00 AM', '2/13/2016 3:25:00 AM', '2/13/2016 3:30:00 AM', '2/13/2016 3:35:00 AM', '2/13/2016 3:40:00 AM', '2/13/2016 3:45:00 AM', '2/13/2016 3:50:00 AM', '2/13/2016 3:55:00 AM', '2/13/2016 4:00:00 AM', '2/13/2016 4:05:00 AM', '2/13/2016 4:10:00 AM', '2/13/2016 4:15:00 AM', '2/13/2016 4:20:00 AM', '2/13/2016 4:25:00 AM', '2/13/2016 4:30:00 AM', '2/13/2016 4:35:00 AM', '2/13/2016 4:40:00 AM', '2/13/2016 4:45:00 AM', '2/13/2016 4:50:00 AM', '2/13/2016 4:55:00 AM', '2/13/2016 5:00:00 AM', '2/13/2016 5:05:00 AM', '2/13/2016 5:10:00 AM', '2/13/2016 5:15:00 AM', '2/13/2016 5:20:00 AM', '2/13/2016 5:25:00 AM', '2/13/2016 5:30:00 AM', '2/13/2016 5:35:00 AM', '2/13/2016 5:40:00 AM', '2/13/2016 5:45:00 AM', '2/13/2016 5:50:00 AM', '2/13/2016 5:55:00 AM', '2/13/2016 6:00:00 AM', '2/13/2016 6:05:00 AM', '2/13/2016 6:10:00 AM', '2/13/2016 6:15:00 AM', '2/13/2016 6:20:00 AM', '2/13/2016 6:25:00 AM', '2/13/2016 6:30:00 AM', '2/13/2016 6:35:00 AM', '2/13/2016 6:40:00 AM', '2/13/2016 6:45:00 AM', '2/13/2016 6:50:00 AM', '2/13/2016 6:55:00 AM', '2/13/2016 7:00:00 AM', '2/13/2016 7:05:00 AM', '2/13/2016 7:10:00 AM', '2/13/2016 7:15:00 AM', '2/13/2016 7:20:00 AM', '2/13/2016 7:25:00 AM', '2/13/2016 7:30:00 AM', '2/13/2016 7:35:00 AM', '2/13/2016 7:40:00 AM', '2/13/2016 7:45:00 AM', '2/13/2016 7:50:00 AM', '2/13/2016 7:55:00 AM', '2/13/2016 8:00:00 AM', '2/13/2016 8:05:00 AM', '2/13/2016 8:10:00 AM', '2/13/2016 8:15:00 AM', '2/13/2016 8:20:00 AM', '2/13/2016 8:25:00 AM', '2/13/2016 8:30:00 AM', '2/13/2016 8:35:00 AM', '2/13/2016 8:40:00 AM', '2/13/2016 8:45:00 AM', '2/13/2016 8:50:00 AM', '2/13/2016 8:55:00 AM', '2/13/2016 9:00:00 AM', '2/13/2016 9:05:00 AM', '2/13/2016 9:10:00 AM', '2/13/2016 9:15:00 AM', '2/13/2016 9:20:00 AM', '2/13/2016 9:25:00 AM', '2/13/2016 9:30:00 AM', '2/13/2016 9:35:00 AM', '2/13/2016 9:40:00 AM', '2/13/2016 9:45:00 AM', '2/13/2016 9:50:00 AM', '2/13/2016 9:55:00 AM', '2/13/2016 10:00:00 AM', '2/13/2016 10:05:00 AM', '2/13/2016 10:10:00 AM', '2/13/2016 10:15:00 AM', '2/13/2016 10:20:00 AM', '2/13/2016 10:25:00 AM', '2/13/2016 10:30:00 AM', '2/13/2016 10:35:00 AM', '2/13/2016 10:40:00 AM', '2/13/2016 10:45:00 AM', '2/13/2016 10:50:00 AM', '2/13/2016 10:55:00 AM', '2/13/2016 11:00:00 AM', '2/13/2016 11:05:00 AM', '2/13/2016 11:10:00 AM', '2/13/2016 11:15:00 AM', '2/13/2016 11:20:00 AM', '2/13/2016 11:25:00 AM', '2/13/2016 11:30:00 AM', '2/13/2016 11:35:00 AM', '2/13/2016 11:40:00 AM', '2/13/2016 11:45:00 AM', '2/13/2016 11:50:00 AM', '2/13/2016 11:55:00 AM', '2/13/2016 12:00:00 PM', '2/13/2016 12:05:00 PM', '2/13/2016 12:10:00 PM', '2/13/2016 12:15:00 PM', '2/13/2016 12:20:00 PM', '2/13/2016 12:25:00 PM', '2/13/2016 12:30:00 PM', '2/13/2016 12:35:00 PM', '2/13/2016 12:40:00 PM', '2/13/2016 12:45:00 PM', '2/13/2016 12:50:00 PM', '2/13/2016 12:55:00 PM', '2/13/2016 1:00:00 PM', '2/13/2016 1:05:00 PM', '2/13/2016 1:10:00 PM', '2/13/2016 1:15:00 PM', '2/13/2016 1:20:00 PM', '2/13/2016 1:25:00 PM', '2/13/2016 1:30:00 PM', '2/13/2016 1:35:00 PM', '2/13/2016 1:40:00 PM', '2/13/2016 1:45:00 PM', '2/13/2016 1:50:00 PM', '2/13/2016 1:55:00 PM', '2/13/2016 2:00:00 PM', '2/13/2016 2:05:00 PM', '2/13/2016 2:10:00 PM', '2/13/2016 2:15:00 PM', '2/13/2016 2:20:00 PM', '2/13/2016 2:25:00 PM', '2/13/2016 2:30:00 PM', '2/13/2016 2:35:00 PM', '2/13/2016 2:40:00 PM', '2/13/2016 2:45:00 PM', '2/13/2016 2:50:00 PM', '2/13/2016 2:55:00 PM', '2/13/2016 3:00:00 PM', '2/13/2016 3:05:00 PM', '2/13/2016 3:10:00 PM', '2/13/2016 3:15:00 PM', '2/13/2016 3:20:00 PM', '2/13/2016 3:25:00 PM', '2/13/2016 3:30:00 PM', '2/13/2016 3:35:00 PM', '2/13/2016 3:40:00 PM', '2/13/2016 3:45:00 PM', '2/13/2016 3:50:00 PM', '2/13/2016 3:55:00 PM', '2/13/2016 4:00:00 PM', '2/13/2016 4:05:00 PM', '2/13/2016 4:10:00 PM', '2/13/2016 4:15:00 PM', '2/13/2016 4:20:00 PM', '2/13/2016 4:25:00 PM', '2/13/2016 4:30:00 PM', '2/13/2016 4:35:00 PM', '2/13/2016 4:40:00 PM', '2/13/2016 4:45:00 PM', '2/13/2016 4:50:00 PM', '2/13/2016 4:55:00 PM', '2/13/2016 5:00:00 PM', '2/13/2016 5:05:00 PM', '2/13/2016 5:10:00 PM', '2/13/2016 5:15:00 PM', '2/13/2016 5:20:00 PM', '2/13/2016 5:25:00 PM', '2/13/2016 5:30:00 PM', '2/13/2016 5:35:00 PM', '2/13/2016 5:40:00 PM', '2/13/2016 5:45:00 PM', '2/13/2016 5:50:00 PM', '2/13/2016 5:55:00 PM', '2/13/2016 6:00:00 PM', '2/13/2016 6:05:00 PM', '2/13/2016 6:10:00 PM', '2/13/2016 6:15:00 PM', '2/13/2016 6:20:00 PM', '2/13/2016 6:25:00 PM', '2/13/2016 6:30:00 PM', '2/13/2016 6:35:00 PM', '2/13/2016 6:40:00 PM', '2/13/2016 6:45:00 PM', '2/13/2016 6:50:00 PM', '2/13/2016 6:55:00 PM', '2/13/2016 7:00:00 PM', '2/13/2016 7:05:00 PM', '2/13/2016 7:10:00 PM', '2/13/2016 7:15:00 PM', '2/13/2016 7:20:00 PM', '2/13/2016 7:25:00 PM', '2/13/2016 7:30:00 PM', '2/13/2016 7:35:00 PM', '2/13/2016 7:40:00 PM', '2/13/2016 7:45:00 PM', '2/13/2016 7:50:00 PM', '2/13/2016 7:55:00 PM', '2/13/2016 8:00:00 PM', '2/13/2016 8:05:00 PM', '2/13/2016 8:10:00 PM', '2/13/2016 8:15:00 PM', '2/13/2016 8:20:00 PM', '2/13/2016 8:25:00 PM', '2/13/2016 8:30:00 PM', '2/13/2016 8:35:00 PM', '2/13/2016 8:40:00 PM', '2/13/2016 8:45:00 PM', '2/13/2016 8:50:00 PM', '2/13/2016 8:55:00 PM', '2/13/2016 9:00:00 PM', '2/13/2016 9:05:00 PM', '2/13/2016 9:10:00 PM', '2/13/2016 9:15:00 PM', '2/13/2016 9:20:00 PM', '2/13/2016 9:25:00 PM', '2/13/2016 9:30:00 PM', '2/13/2016 9:35:00 PM', '2/13/2016 9:40:00 PM', '2/13/2016 9:45:00 PM', '2/13/2016 9:50:00 PM', '2/13/2016 9:55:00 PM', '2/13/2016 10:00:00 PM', '2/13/2016 10:05:00 PM', '2/13/2016 10:10:00 PM', '2/13/2016 10:15:00 PM', '2/13/2016 10:20:00 PM', '2/13/2016 10:25:00 PM', '2/13/2016 10:30:00 PM', '2/13/2016 10:35:00 PM', '2/13/2016 10:40:00 PM', '2/13/2016 10:45:00 PM', '2/13/2016 10:50:00 PM', '2/13/2016 10:55:00 PM', '2/13/2016 11:00:00 PM', '2/13/2016 11:05:00 PM', '2/13/2016 11:10:00 PM', '2/13/2016 11:15:00 PM', '2/13/2016 11:20:00 PM', '2/13/2016 11:25:00 PM', '2/13/2016 11:30:00 PM', '2/13/2016 11:35:00 PM', '2/13/2016 11:40:00 PM', '2/13/2016 11:45:00 PM', '2/13/2016 11:50:00 PM', '2/13/2016 11:55:00 PM', '2/14/2016 12:00:00 AM', '2/14/2016 12:05:00 AM', '2/14/2016 12:10:00 AM', '2/14/2016 12:15:00 AM', '2/14/2016 12:20:00 AM', '2/14/2016 12:25:00 AM', '2/14/2016 12:30:00 AM', '2/14/2016 12:35:00 AM', '2/14/2016 12:40:00 AM', '2/14/2016 12:45:00 AM', '2/14/2016 12:50:00 AM', '2/14/2016 12:55:00 AM', '2/14/2016 1:00:00 AM', '2/14/2016 1:05:00 AM', '2/14/2016 1:10:00 AM', '2/14/2016 1:15:00 AM', '2/14/2016 1:20:00 AM', '2/14/2016 1:25:00 AM', '2/14/2016 1:30:00 AM', '2/14/2016 1:35:00 AM', '2/14/2016 1:40:00 AM', '2/14/2016 1:45:00 AM'], type: 'datetime' },
series: [{ data: [45, 122, 134, 138, 105, 153, 121, 110, 160, 170, 110, 144, 121, 136, 146, 134, 142, 143, 139, 136, 144, 148, 155, 148, 143, 148, 143, 152, 152, 152, 159, 145, 164, 169, 155, 155, 152, 148, 156, 146, 152, 162, 134, 148, 153, 148, 164, 147, 156, 142, 155, 157, 151, 143, 147, 147, 156, 163, 139, 155, 157, 172, 150, 158, 143, 169, 132, 147, 152, 162, 141, 169, 132, 142, 141, 142, 130, 133, 119, 110, 110, 149, 121, 128, 117, 135, 116, 126, 116, 134, 102, 123, 120, 130, 143, 122, 134, 119, 122, 132, 142, 121, 129, 127, 106, 143, 138, 128, 125, 121, 130, 119, 128, 126, 124, 137, 125, 145, 148, 130, 142, 137, 118, 135, 124, 132, 134, 133, 148, 157, 154, 168, 161, 130, 163, 159, 169, 155, 162, 140, 166, 167, 131, 161, 142, 124, 147, 145, 141, 157, 142, 139, 149, 166, 140, 158, 149, 125, 151, 139, 119, 136, 142, 125, 171, 140, 144, 152, 133, 143, 132, 145, 121, 124, 144, 104, 161, 141, 139, 137, 148, 135, 145, 139, 766, 139, 147, 108, 162, 132, 124, 138, 152, 138, 149, 135, 127, 135, 139, 138, 156, 140, 152, 152, 160, 130, 137, 147, 133, 148, 122, 128, 177, 145, 152, 123, 154, 121, 152, 136, 123, 134, 124, 100, 152, 154, 136, 146, 147, 117, 157, 142, 160, 156, 144, 134, 169, 185, 146, 139, 162, 118, 144, 140, 126, 136, 134, 103, 151, 147, 164, 137, 138, 138, 151, 159, 128, 161, 139, 124, 162, 138, 145, 138, 152, 146, 161, 163, 144, 140, 157, 121, 178, 173, 158, 147, 154, 146, 145, 152, 141, 146, 138, 120, 149, 171, 573, 186, 162, 142, 152, 149, 108], name: 'Total Logins' }, { data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 260, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name: 'Failed Logins Due to System Error' }, { data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], name: 'Failed Logins Due to User Error' }]
});
});
One way to set it up is by using Highcharts.dateFormat, check the following link for more details http://api.highcharts.com/highcharts#Highcharts.dateFormat.
labels: {
formatter: function() {
return Highcharts.dateFormat('%M', this.value * 1000); // milliseconds not seconds
},
}
Check the example jsfiddle.
FYI: I had to change the structure of your code to make it a little bit easier to maintain by processing the data in arrays instead of copy/past within the JScripts.
Related
how to place heat-map tick label at top of the y-axis instead of middle
I have created heat-mp using High-charts.But tick marks which are generated are placed in the middle of the row instead of top of the row on Y-axis, please have a look at the below image
Y-axis configuration
xAxis: {
tickmarkPlacement: 'on',
"tickWidth":1,
"tickPositions":[0,2,4,6,8,10,12,14,16,18,20,22,24],
categories: ['12 am', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', 'Noon', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm'],
"min":0,"startOnTick":false,"maxPadding":0,"endOnTick":false,"minPadding":0,
},
Please let me know how can I fix this.
You can use tickmarkPlacement: 'between' to achieve the desired tick positions. To position the label you can use labels.y property:
labels: {
y: -25
}
Live working example: http://jsfiddle.net/kkulig/2q50sdbc/
API references:
http://api.highcharts.com/highcharts/yAxis.labels.y
http://api.highcharts.com/highcharts/yAxis.tickmarkPlacement
HighChart Heatmap with JSON data
I am trying to integrate JSON specific data into a heatmap offered by highmaps/highcharts. The example on Link to HeatMap Demo shows how to use CSV approach to load the data. But I was not able to get it running with a JSON array. Can anyone provide an equivalent to the CSV from the example to get the same heatmap chart, or show me the way to another example based on JSON? Thx in advance. Cheers Peter
You need to convert that to the col/row point instead of date string. You are going to have 2 category axis: x and y. Then the index of x/y axis becomes the [x, y, value]. So, if your data starts on "2013-04-01" then it is your first index such that [ ["2013-04-01",0,-0.7], ["2013-04-02",0,-3.4], ["2013-04-03",0,-1.1] ] becomes:
[ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ]
Note that this is just one row's worth of data. What is your y component?
EDIT:
If your yAxis component will be the hour of the day then you would set up your axii like so:
xAxis: {
categories: ['2013-04-01', '2013-04-02', '2013-04-03'],
labels: {
rotation: 90
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
categories: ['Midnight', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', 'Noon', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm'],
min: 0,
max: 23,
reversed: true
},
Then you series would look something like:
series: [{
borderWidth: 0,
nullColor: '#EFEFEF',
data: [ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ]
}]
Live demo.
There are other items I added there that I will let you figure out (why do I set reversed: true, what is the colorAxis, etc). The important thing to note is that the series.data format is different from any other highchart setup.
OpenCV Flann index save and load does not work
I am trying this simple test to check if I can store prepopulated indices to file and load them at later times. The saved and loaded mats are different. Also, knnSearch throws segfaults during the matching. I am seeing this issue only when using LSHIndexParams (for binary features).
void flannSaveAndLoadTest(Mat descriptor) {
// construct an index
flann::LshIndexParams lshIndexParams(20,10,2);
flann::Index kdtree(descriptor, lshIndexParams, cvflann::FLANN_DIST_HAMMING);
// save descriptors to file
writeMatToFile(descriptor, "before_index_save.dat");
// save index to file
kdtree.save("index.dat");
// load index from file
Mat mat = Mat(descriptor.rows, descriptor.cols, CV_8UC1);
flann::Index kdtree1(mat, flann::SavedIndexParams("index.dat"), cvflann::FLANN_DIST_HAMMING);
// save loaded mat
writeMatToFile(mat, "after_index_save.dat");
// search in this tree
Mat dists = Mat(descriptor.rows, 2, CV_32S);
Mat indices = Mat(descriptor.rows, 3, CV_32S);
kdtree1.knnSearch(descriptor, indices, dists, 2);
}
before_index_save:
%YAML:1.0
mat: !!opencv-matrix
rows: 60
cols: 32
dt: u
data: [ 10, 157, 16, 137, 81, 214, 178, 39, 45, 5, 74, 1, 172, 30, 38,
196, 144, 59, 131, 33, 84, 152, 17, 223, 39, 52, 10, 67, 18, 6,
141, 206, 11, 91, 50, 141, 119, 86, 190, 48, 45, 76, 94, 167, 236,
30, 183, 228, 246, 125, 151, 231, 197, 144, 49, 236, 39, 125, 138,
131, 14, 63, 61, 223, 15, 95, 35, 135, 119, 30, 190, 168, 45, 232,
91, 231, 204, 94, 159, 228, 246, 93, 147, 231, 197, 144, 125, 238,
38, 60, 143, 135, 14, 55, 57, 213, 10, 149, 16, 129, 81, 214, 178,
39, 45, 5, 74, 1, 172, 30, 6, 196, 144, 27, 131, 33, 22, 152, 17,
207, 39, 52, 10, 67, 18, 6, 141, 206, 124, 236, 196, 30, 137, 161,
70, 207, 210, 179, 169, 24, 99, 225, 105, 158, 9, 226, 104, 26,
58, 111, 142, 51, 184, 134, 85, 124, 243, 123, 210, 8, 10, 0, 16,
129, 81, 214, 176, 3, 45, 5, 66, 1, 140, 30, 38, 196, 128, 25,
131, 1, 4, 152, 17, 196, 7, 20, 26, 67, 2, 4, 13, 206, 244, 172,
157, 122, 137, 237, 69, 206, 210, 179, 161, 24, 115, 241, 73, 27,
9, 226, 104, 26, 58, 111, 218, 51, 217, 131, 85, 124, 240, 121,
198, 34, 197, 36, 157, 103, 128, 46, 103, 184, 112, 162, 43, 88,
215, 115, 9, 123, 17, 68, 104, 106, 49, 212, 217, 10, 237, 166,
101, 20, 192, 115, 2, 32, 252, 188, 189, 118, 137, 124, 85, 158,
179, 247, 166, 24, 223, 247, 75, 59, 129, 214, 236, 26, 56, 103,
251, 32, 219, 251, 85, 63, 194, 113, 198, 114, 196, 64, 157, 39,
1, 78, 38, 8, 40, 178, 35, 8, 214, 115, 73, 27, 144, 84, 104, 98,
96, 212, 217, 8, 197, 178, 65, 20, 0, 115, 3, 34, 11, 91, 50, 141,
119, 86, 191, 48, 13, 76, 94, 167, 236, 30, 183, 228, 246, 125,
after_index_save:
%YAML:1.0
mat: !!opencv-matrix
rows: 60
cols: 32
dt: u
data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 110, 100, 101,
120, 95, 115, 97, 118, 101, 46, 100, 97, 116, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 241, 1, 0, 0, 0, 0, 0, 0, 152, 169, 51, 241, 97, 127,
0, 0, 152, 169, 51, 241, 97, 127, 0, 0, 0, 0, 0, 0, 98, 101, 102,
111, 114, 101, 95, 105, 110, 100, 101, 120, 95, 115, 97, 118, 101,
46, 100, 97, 116, 0, 0, 0, 0, 0, 0, 0, 64, 0, 0, 0, 0, 0, 0, 0,
176, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 192, 188, 45, 1,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
Highcharts 12hr time format of x-axis labels
I have a Highcharts column chart that is fed with 24 different y-values corresponding to x values from 0-23 representing the hour of the day.
Does Highcharts have a built in format for hours 0-23 such that I can have the X-axis show time labels like this:
12am, 1am ...... 12pm, 1pm.....11pm ??
I tried this but Highcharts ignored the x-values:
series: [{
name: 'Time of Day',
data: [['12am', 6],['1am', 1],['3am', 1],['5am', 1],['7am', 2],['8am', 19],['9am', 54],['10am', 80],['11am', 73],['Noon', 92],['1pm', 105],['2pm', 87],['3pm', 100],['4pm', 74],['5pm', 59],['6pm', 38],['7pm', 24],['8pm', 7],['9pm', 10],['10pm', 4],['11pm', 8],]
}]
EDIT:
The data may not include a value for every hour, as you can see in this sample data.
You can specify the format of date/time to be displayed using the php strftime format, http://php.net/manual/en/function.strftime.php.
So for example if you want to change the hours(when and if they are displayed) and minutes(when and if they are displayed) to 12 hour format use %I instead of %H.
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b',
minute: '%I:%M',
hour: '%I:%M'
}
}
jsfiddle - http://jsfiddle.net/xya6kato/
You can define your x-axis captions and series separately.
xAxis: {
categories: ['12 am', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', 'Noon', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm']
}
series: [{
name: 'Time of Day',
data: [6, 1, 3, 1, 1, 3, 2, 19, 30, 54, 80, 73, 92, 105, 87, 100, 59, 38, 24, 7, 10, 4, 8, 10]
}]
Edit--
If you don't have data for all hours, you can define your xAxis as datetime and provide values in the series for specific hours.
xAxis: {
type: 'datetime',
},
series: [{
name: 'Time of Day',
data: [
[Date.UTC(2014, 2, 28, 10), 5 ],
[Date.UTC(2014, 2, 28, 12), 33 ],
[Date.UTC(2014, 2, 28, 13), 20 ],
[Date.UTC(2014, 2, 28, 15), 26 ]
]
}]
show two different series with different start intervals with the same xAxis highcharts
http://jsbin.com/enotab/39/editI want to show data from 2 different years on the same XAxis without using 2 x axes. In which case i get the following result
I want to have an overlay graph with the 2 series where 2012 series becomes a shadow graph. How is it possible? this is my static code:
var mychart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
title: {
text: 'Chart Title'
},
xAxis: [{
type: 'datetime',
minRange: 31 * 24 * 3600000,
labels: {
formatter: function () {
return Highcharts.dateFormat('%e %b %y', this.value);
}
}
}],
yAxis: {
title: {
text: 'Current Values'
},
gridLineColor: 'transparent',
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'longdashdot',
width: 1
}, {
value: 30,
color: 'orange',
dashStyle: 'longdashdot',
width: 1
}, {
value: 60,
color: 'red',
dashStyle: 'longdashdot',
width: 1
}, {
value: 80,
color: 'black',
dashStyle: 'longdashdot',
width: 1
}]
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
series: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0.1)']
]
},
lineWidth: 1,
shadow: false,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5,
fillColor: 'red'
}
}
},
states: {
hover: {
lineWidth: 1
}
},
threshold: null
} //area
}, //plotoptions
series: [{
type: 'area',
//color:'#89a54e',
color: '#4572a7',
lineWidth: 0.1,
name: '2012',
// xAxis: 0,
zIndex: -1,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2013, 0, 1),
data: [
[Date.UTC(2013, 0, 1), 3],
[Date.UTC(2013, 0, 2), 12],
[Date.UTC(2013, 0, 3), 30],
[Date.UTC(2013, 0, 4), 22],
[Date.UTC(2013, 0, 5), 12],
[Date.UTC(2013, 0, 8), 13],
[Date.UTC(2013, 0, 9), 12],
[Date.UTC(2013, 0, 11), 13],
[Date.UTC(2013, 0, 12), 22],
[Date.UTC(2013, 0, 15), 1],
[Date.UTC(2013, 0, 16), 25],
[Date.UTC(2013, 0, 18), 43],
[Date.UTC(2013, 0, 19), 26],
[Date.UTC(2013, 0, 20), 23],
[Date.UTC(2013, 0, 21), 12],
[Date.UTC(2013, 0, 22), 13],
[Date.UTC(2013, 0, 23), 22],
[Date.UTC(2013, 0, 24), 1],
[Date.UTC(2013, 0, 25), 25],
[Date.UTC(2013, 0, 26), 43],
[Date.UTC(2013, 0, 27), 26],
[Date.UTC(2013, 0, 28), 23],
[Date.UTC(2013, 0, 29), 12],
[Date.UTC(2013, 0, 30), 13],
[Date.UTC(2013, 0, 31), 22],
[Date.UTC(2013, 1, 1), 1],
[Date.UTC(2013, 1, 2), -5],
[Date.UTC(2013, 1, 3), 43],
[Date.UTC(2013, 1, 4), 26],
[Date.UTC(2013, 1, 5), 23],
[Date.UTC(2013, 1, 6), 25],
[Date.UTC(2013, 1, 7), 43],
[Date.UTC(2013, 1, 8), 26],
[Date.UTC(2013, 1, 9), 23],
[Date.UTC(2013, 1, 10), 35],
[Date.UTC(2013, 1, 11), 38],
[Date.UTC(2013, 1, 14), 36],
[Date.UTC(2013, 1, 15), 3],
[Date.UTC(2013, 1, 16), 55],
[Date.UTC(2013, 1, 17), 43],
[Date.UTC(2013, 1, 18), 22],
[Date.UTC(2013, 1, 19), -3]
]
}, {
type: 'line',
name: '2013',
color: '#89a54e',
lineWidth: 3,
zIndex: 3,
// xAxis:1,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2012, 0, 1),
data: [
[Date.UTC(2012, 0, 1), 13],
[Date.UTC(2012, 0, 2), 52],
[Date.UTC(2012, 0, 3), 3],
[Date.UTC(2012, 0, 4), 12],
[Date.UTC(2012, 0, 5), 2],
[Date.UTC(2012, 0, 6), 35],
[Date.UTC(2012, 0, 7), 12],
[Date.UTC(2012, 0, 8), 35],
[Date.UTC(2012, 0, 9), 22],
[Date.UTC(2012, 0, 11), 3],
[Date.UTC(2012, 0, 12), 32],
[Date.UTC(2012, 0, 15), 41],
[Date.UTC(2012, 0, 16), 45],
[Date.UTC(2012, 0, 18), 63],
[Date.UTC(2012, 0, 19), 16],
[Date.UTC(2012, 0, 20), 83],
[Date.UTC(2012, 0, 21), 1],
[Date.UTC(2012, 0, 22), 75],
[Date.UTC(2012, 0, 23), 52],
[Date.UTC(2012, 0, 24), 1],
[Date.UTC(2012, 0, 25), 65],
[Date.UTC(2012, 0, 26), 13],
[Date.UTC(2012, 0, 27), 76],
[Date.UTC(2012, 0, 28), 56],
[Date.UTC(2012, 0, 29), 12],
[Date.UTC(2012, 0, 30), 13],
[Date.UTC(2012, 0, 31), 22],
[Date.UTC(2012, 1, 1), 1],
[Date.UTC(2012, 1, 2), 25],
[Date.UTC(2012, 1, 3), 43],
[Date.UTC(2012, 1, 4), 26],
[Date.UTC(2012, 1, 5), 23],
[Date.UTC(2012, 1, 6), 25],
[Date.UTC(2012, 1, 7), 43],
[Date.UTC(2012, 1, 8), 26],
[Date.UTC(2012, 1, 9), 23],
[Date.UTC(2012, 1, 10), 35],
[Date.UTC(2012, 1, 11), 48],
[Date.UTC(2012, 1, 14), 86],
[Date.UTC(2012, 1, 15), 73],
[Date.UTC(2012, 1, 16), 55],
[Date.UTC(2012, 1, 17), 43],
[Date.UTC(2012, 1, 18), 22],
[Date.UTC(2012, 1, 19), -3]
]
}]
});
});
It depends on what you want shown on the x axis. If you just want to keep the first axis labels, then simply remove the labels from the second x axis and offset it over the first:
xAxis:[ {type: 'datetime', minRange:31*24 *3600000 , offset:10,
labels: {formatter: function() {return Highcharts.dateFormat('%e %b', this.value);
}
} },
{type: 'datetime', minRange:31*24 *3600000 , offset:10,
labels: {enabled:false}
}],