Highcharts - show only hours and minutes in xAxis - highcharts

I am trying to bring highcharts to show only hours and minues in xAxis, presently it's showing the full timestamp including the date. I am using the following code:
var chartT = new Highcharts.Chart({
chart:{ renderTo : 'chart-temperature' },
title: { text: 'Temperatur' },
series: [{
showInLegend: false,
data: IstTemp
}],
plotOptions: {
line: { animation: false,
dataLabels: { enabled: true }
},
series: { color: '#059e8a' }
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%H:%M' },
categories: reading_time
},
yAxis: {
title: { text: 'Temperatur (Celsius)' }
},
credits: { enabled: false }
});
Where is my mistake?

You can't use datetime and category axis type at the same time. As a solution you can:
Use datetime axis and preprocess your data to the format: [timestamp, y]
var IstTemp = [11.6, 12.5];
var reading_time = ["2021-02-12 14:35:52", "2021-02-12 14:38:52"];
var seriesData = IstTemp.map(function(dataEl, index){
return [new Date(reading_time[index]).getTime(), dataEl];
});
Live demo: http://jsfiddle.net/BlackLabel/7gdvzfo6/
Use categories with modified string
var IstTemp = [11.6, 12.5];
var reading_time = ["2021-02-12 14:35:52", "2021-02-12 14:38:52"];
var processedCategories = reading_time.map(function(dateStr){
return dateStr.split(' ')[1].split(':').slice(0, 2).join(':');
});
Live demo: http://jsfiddle.net/BlackLabel/2udw738c/

Related

How to sort order highchart pie jasperstudio by slice value min to max

I am working on jasper but i don't want to sort the data in the query as many other element of the report using the same query.
So i would like to sort it on the pie chart itself as example on this fiddle http://jsfiddle.net/highcharts/3bDMe/1/. How can it be done without button click? I meant as the chart load it automatically sort by slice value ascending.
$(function () {
$(document).ready(function () {
// Build the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 6.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 88.5],
['Opera', 26.2],
['Others', 30.7]
]
}]
});
$('#sort').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.y - a.y;
});
var newData = {};
for (var i = 0; i < chart.series[0].data.length; i++) {
newData.x = i;
newData.y = chart.series[0].data[i].y;
newData.color = Highcharts.getOptions().colors[i];
chart.series[0].data[i].update(newData, false);
// Workaround:
chart.legend.colorizeItem(chart.series[0].data[i], chart.series[0].data[i].visible);
}
chart.redraw({ duration: 2000 });
});
});
});
In the load event you can create a new data array with sorted values and use setData method to apply changes:
chart: {
...,
events: {
load: function() {
var data = this.series[0].data,
newData = [];
data.forEach(function(point) {
newData.push({
y: point.y,
name: point.name
})
});
newData.sort(function(a, b) {
return a.y - b.y;
});
this.series[0].setData(newData);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6vzd8ak7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData

HighCharts stackLabels visible with hidden yAxis

Is there a way to keep the stackLabels on a highcharts stacked column chart, but hide the yAxis?
I have borrowed this fiddle from the HC Author to show the issue. You can toggle the yAxis visibility and this also toggles the stackLabels.
My HighCharts code is:
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
stackLabels: {
enabled: true
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
$('#toggle-y').click(function() {
yVis = !yVis;
$('#container').highcharts().yAxis[0].update({
visible: yVis
});
});
$('#toggle-x').click(function() {
xVis = !xVis;
$('#container').highcharts().xAxis[0].update({
visible: xVis
});
});
});
Can stackLabels be visible with a hidden yAxis?
You can manipulate on elements in yAxis, instead of set the visibility.
$('#toggle-y').click(function() {
yVis = !yVis;
$('#container').highcharts().yAxis[0].update({
labels: {
enabled: yVis
},
gridLineWidth: yVis ? 1 : 0,
title:{
enabled: yVis
}
});
});
Example:
http://jsfiddle.net/hg1bcva7/

Highchart series did not draw

i create an empty highchart and add a series to the chart.
This is my code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'hccontainer',
zoomType: 'x'
},
title: {
text: 'Telegramme'
},
subtitle: {
text: 'Offline'
},
exporting: {
enabled: false
},
legend: {
enabled: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
}
});
And here for example i add a series:
$.ajax({
'url' : 'ajax.php',
'type': 'GET',
'data': {
'action' : 'eibmon_hctel',
'hsid': hsid,
'grp': grp,
'df': datefrom,
'dt': dateto
},
success: function(items) {
chart.addSeries({
name: series_name,
data: items
}, true);
},
cache: false
});
The ajax.php send this result:
{"1441614256000":"1","1441586308000":"0","1441523112000":"1","1441515496000":"0","1441360423000":"1"
,"1441344522000":"1","1441341118000":"0","1441254853000":"1","1441238297000":"0","1441094577000":"1"
,"1441086395000":"0","1441086143000":"1","1441085875000":"0","1441085622000":"1"}
The chart will be redrawn but the line is missing. In the legend the new series get displayed. Is it not possible to start with an empty chart?
Thanks
Looks like your JSON structure is icorrect. You should have a x/y fields and number values.
Example:
{
x:"1441614256000",
y:"1"
}
After loading data, you can convert your json into correct form, parsing data in preprocessing.

Highchart series mouseover

I´m trying to display a timeline using Highchart, my problem is that when you put the mouse over one element of the series, it highlight and shows the tool-tip of other element of the same series. What I´m doing wrong?
You can see a http://jsfiddle.net/ncdysafk/
var chart;
var options = {
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
renderTo: 'container',
type: 'columnrange',
inverted: true,
zoomType: 'y'
},
title: {
text: 'Portes de hoy'
},
xAxis: {
categories: ["SERIE1","SERIE2","SERIE3"]
},
yAxis: {
type: 'datetime',
title: {
text: 'Horas del día'
}
},
plotOptions: {
series: {
stickyTracking: true,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
series: [{"name":"SERIE2","data":[{"x":1,"low":1425538800000,"high":1425543300000},{"x":1,"low":1425567600000,"high":1425571200000},{"x":1,"low":1425584000000,"high":1425589100000}]},{"name":"SERIE3","data":[{"x":2,"low":1425538800000,"high":1425543300000},{"x":2,"low":1425567600000,"high":1425571200000}]}]
};
chart = new Highcharts.Chart(options);
This is bug in 4.1.3/2.1.3 version of Highcharts/Highstock. Bug reported is here. Already fixed, that means try https://github.highcharts.com/highstock.js and https://github.highcharts.com/highcharts-more.js files from master branch. Working demo http://jsfiddle.net/ncdysafk/1/

Highcharts - too many series are displayed

I want to manipulate the var series before I configure the highchart-code.
But I get 68 series!! instead of my 2 series I defined before.
What can be the error?
var series;
function refresher() {
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]";
$.getJSON(url,
function(data) {
chart = new Highcharts.StockChart
({
chart: { renderTo: 'container', zoomType: 'x', type: 'line', width: 900 },
legend: { enabled: true, verticalAlign:'bottom' },
title: { text: 'You see the data of the last measured hour!' },
credits: { enabled: false },
xAxis: { type: 'datetime', title: { text: 'time' } },
yAxis: { title: { text: 'hallo' } },
rangeSelector:{ enabled: false },
navigator : { enabled: false },
series: series,
tooltip: { xDateFormat: '%e. %b.%Y %H:%M:%S', valueDecimals: 2, },
exporting: { enabled: true },
});
// Format the y-data.
Highcharts.numberFormat(this.y, 2, '.', ',');
});
};
The problem is in the series variable.
1st of all, it's a string, and not an object.
I don't know why you are using it like that but if you really want it to be a string, you'll have to eval it when given it to the series object:
...
series: eval(series)
...
Also, it's not:
series = "[{ name = 'test1', data = data[0]},{ name = 'test', data = data[1]}]"
The equal signs are incorrect.
It has to be:
series = "[{ name: 'test1', data: data[0]},{ name: 'test', data: data[1]}]"
(I've replaced the equal signs by colons.)

Resources