Is there any possibility to set the xAxis of the Highstock graph to display only the time?
Here it shows both date and time and I need to display only time:
Thanks in advance.
$(function () {
// Create the chart
Highcharts.stockChart('container1', {
chart: {
width: 500,
height: 300
},
title: {
text: 'AAPL Stock Price'
},
xAxis: {
tickInterval: 1
},
rangeSelector: {
selected: 4,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'AAPL Stock Price',
data: [45,90,90,45,50,90,39,50,90,39],
step: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
$(function () {
Highcharts.stockChart('container', {
chart: {
width: 500,
height: 300
},
title: {
text: 'AAPL Stock Price'
},
xAxis: {
type: 'datetime',
tickInterval : 1,
dateTimeLabelFormats : {
day: '%M min'
}
},
rangeSelector: {
selected: 0,
inputEnabled: false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'AAPL Stock Price',
data: [45,90,90,45,50,90,39,50,90,39],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 ,
step: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
Related
I am trying to create a single drag navigator over multiple highchart to highlight chart between ranges. like below attachment.
Can someone please let me know how can I do this? I explored highchart but could not find appropriate options to create this. Are there any other options?
Here is what I have tried:
(function(H) {
H.wrap(H.Chart.prototype, 'zoom', function(proceed, event) {
var navMin = event.xAxis[0].min,
navMax = event.xAxis[0].max;
H.each(Highcharts.charts, function(chart) {
if (chart.userOptions.chart.customNavigator) {
chart.xAxis[0].setExtremes(navMin, navMax);
}
});
});
}(Highcharts));
$.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
var newMin = data[0][0],
newMax = data[data.length - 1][0];
Highcharts.stockChart('container-main', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-main1', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-main2', {
chart: {
customNavigator: true,
type: 'area',
},
title: {
text: ''
},
credits: {
enabled: false
},
rangeSelector: {
selected: 1
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
xAxis: {
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
series: [{
name: 'AAPL',
data: data,
tooltip: {
valueDecimals: 2
}
}]
});
Highcharts.stockChart('container-navigator', {
chart: {
height: 600,
zoomType: 'x',
backgroundColor: 'transparent'
},
credits: {
enabled: false
},
navigator: {
enabled: true,
height:540,
opposite:true,
maskInside:false
},
rangeSelector: {
enabled: true
},
scrollbar: {
enabled: false
},
xAxis: {
min: newMin,
max: newMax,
labels:{
enabled:false
},
minorTickLength:0,
minorTicks:false,
tickLength:0
},
yAxis: {
visible: false
},
series: []
});
});
#container {
height: 200px;
min-width: 200px;
}
#container-navigator{ position:absolute; top:0; width:100%}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<div id="container-main" style="height: 200px; min-width:200px"></div>
<div id="container-main1" style="height: 200px; min-width:200px"></div>
<div id="container-main2" style="height: 200px; min-width:200px"></div>
<div id="container-navigator"></div>
also attached jsFiddle what I have tried: jsFiddle
I am also open to any other library achieving this type of result.
In the current solution you can create a timeline using SVGRenderer as below I show how I rendered the button. For visibility, I added them to the container navigator.
chart: {
events: {
load: function() {
const chart = this;
chart.renderer.button('Change visible time range', 100, 50)
.attr({
zIndex: 40,
})
.on('click', function() {
chart.xAxis[0].setExtremes(navMin, navMax))
})
.add()
}
}
}
In your solution with the navigator stretched to full height, the navigator covers all the charts and the tooltip cannot be shown that way, it's under the navigator container.
Demo: https://jsfiddle.net/BlackLabel/u6gjdzsn/2/
We are using Highcharts for the graphs in a dashboard web app. We are craeting the graph objects in javaScript. Most of the graphs share similar options. E.g. one graph is created by something like this:
Highcharts.chart('boiler-temp', {
chart: {
type: 'spline'
},
title: {
text: 'Boiler temperatures'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
title: {
text: 'Inner temperature'
}
}, {
title: {
text: 'Outer temperature',
},
opposite: true,
min: 0,
max: 100
}],
data: {
rowsURL: dataUrl,
},
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
Another graph is created very similarly like this:
Highcharts.chart('boiler-temp', {
chart: {
type: 'spline'
},
title: {
text: 'Boiler pressure'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
title: {
text: 'Inner pressure'
}
}, {
title: {
text: 'Outer outer pressure',
},
opposite: true,
min: 0,
max: 100
}],
data: {
rowsURL: dataUrl,
},
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
For maintainability I would like to define a default set of options as
{
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{
}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
}
and then, when I instantiate a graph, overwrite what changes. Is there a way to do this with Highcharts/JavaScript?
It can be done using Highcharts global options - set of options to all charts on the same page.
Highcharts.setOptions({
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
});
Demo:
https://jsfiddle.net/BlackLabel/ugsfoyeh/
Docs:
https://www.highcharts.com/docs/getting-started/how-to-set-options#2
Another approach is to create a defaultOptions somewhere in your app and merge them with chart options using eg. Highcharts.merge().
const defualtData = {
chart: {
type: 'spline'
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
yAxis: [{}, {
opposite: true,
min: 0,
max: 100
}],
series: [{
yAxis: 0,
}, {
yAxis: 1,
}],
plotOptions: {
series: {
connectNulls: true
}
},
exporting: {
fallbackToExportServer: false
}
};
Highcharts.chart('boiler-temp1', Highcharts.merge(defualtData, {
title: {
text: 'Boiler temperatures'
}
}));
Demo:
https://jsfiddle.net/BlackLabel/5epm4hqc/
API reference:
https://api.highcharts.com/class-reference/Highcharts#.merge
I just started using highcharts and I would like for my chart to display as something like the first image below, instead of the second image.
What I'd Like
What I have
Here is the code for what I have currently:
chart = new Highcharts.stockChart($('#' + tab + ' .chart')[0], {
chart: {
type: 'areaspline',
spacing: [10, 10, 15, 10],
events: {
load: function() {
setTimeout(function() {
interval = setInterval(function() {
requestData(asset, name)
}, 1000);
}, 1000);
}
},
},
rangeSelector: {
enabled: !1
},
navigator: {
enabled: false
},
title: {
text: name
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%d/%m",
week: "%Y<br/>%d-%m",
month: "%m-%Y",
year: "%Y"
}
//tickPixelInterval: 3600
},
yAxis: {
allowDecimals: true,
title: {
text: 'Values'
},
labels: {
style: {
backgroundColor: "#282828"
},
y: 12,
zIndex: 4,
formatter: function() {
return Highcharts.numberFormat(this.value, countDecimals(this.value))
}
},
opposite: false,
plotLines: [{
value: 0,
width: 1,
dashStyle: 'longdashdot',
color: '#2D2E2F'
}]
},
series: [{
name: 'Price',
dataGrouping: {
enabled: !1,
groupPixelWidth: 1
},
animation: !1,
threshold: null,
//color: '#2D2E2F',
data: []
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
},
subtitle: {
text: null
},
credits: {
enabled: false
}
}
}]
}
});
PS: The data from both charts are almost the same.
Thanks.
I have trouble with performance of my highstock. All works, but time of plotting of my data is too slow, about 30 seconds. JSON is about 30000 points. Maybe problem in how I draw this data ? I already turn off animation, shadow, marks etc.
And here is my JS code:
$(function() {
Highcharts.setOptions({
global: {
useUTC: false,
timezoneOffset: - 3 * 60
}
});
function requestData() {
$.ajax({
url: 'values.php',
success: function(series) {
chart.addSeries({name: 'Temp1', data: series[0], yAxis:0}, false);
chart.addSeries({name: 'Temp2', data: series[1], yAxis:0}, false);
chart.redraw();
},
cache: false
});
}
chart = new Highcharts.StockChart({
chart: {
animation: false,
zoomType: 'xy',
renderTo: 'container',
events: {
load: requestData
}
},
title: {
text: 'Temperatures from DS18B20',
x: -20
},
plotOptions: {
spline: {
turboThreshold: 50000
}
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 10,
text: '10min'
}, {
type: 'minute',
count: 30,
text: '30min'
}, {
type: 'all',
text: 'all'
}],
buttonTheme: {
width:60
},
selected: 2
},
xAxis: {
type: 'datetime',
categories: true,
ordinal: false,
// tickInterval: 100*3600,
minTickInterval:100000,
labels: {
align: 'center',
formatter:function(){
return Highcharts.dateFormat('%H:%M:%S',this.value);
}
}
},
yAxis: {
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: false
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#DBFFDB',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 200,
shadow: true
},
tooltip: {
shared: true
},
series: []
});
});
How can I limit showing ticks on X axis in Highcharts? The last one is outter of X axis:
My source:
var options = {
chart: {
renderTo: 'chart',
events: {
load: function(event) {
}
},
type: 'spline',
animation: false
},
title: {
text: ''
},
colors: [
'#499878','black'
],
rangeSelector: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Temperature (°C)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' °C'
},
yAxis: 0,
color: '#89A54E',
data: []
},{
name: 'Wind speed (m/s)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' m/s'
},
yAxis: 1,
color: '#4572A7',
data: []
},{
name: 'Humidity (%)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' %'
},
yAxis: 2,
color: '#910000',
data: []
},{
name: 'Wind direction (°)',
type: 'spline',
tooltip : {
valueDecimals: 2,
valueSuffix: ' °'
},
yAxis: 3,
color: '#000000',
dashStyle: 'shortdot',
data: []
}],
xAxis: {
type: 'datetime',
tickInterval: 10000,
min: 0,
max: 0
},
yAxis: [{
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
},
gridLineWidth: 1,
opposite: true
},{
labels: {
formatter: function() {
return this.value +' m/s';
},
style: {
color: '#4572A7'
}
},
title: {
text: 'Wind speed',
style: {
color: '#4572A7'
}
},
gridLineWidth: 1,
opposite: false,
min: 0
},{
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#910000'
}
},
title: {
text: 'Humidity',
style: {
color: '#910000'
}
},
gridLineWidth: 1,
opposite: true
},{
labels: {
formatter: function() {
return this.value +' °';
},
style: {
color: '#000000'
}
},
title: {
text: 'Wind direction',
style: {
color: '#000000'
}
},
opposite: false,
reversed: true,
min: 0,
max: 360,
minorGridLineDashStyle: 'longdash',
minorTickInterval: 'auto',
minorTickWidth: 0,
tickInterval: 90
}],
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
}
},
scatter: {
marker: {
enabled: true
}
}
}
};
I found out it's matter of oveflow: 'justify'. jsfiddle
What happens if you use 'spacingRight' (http://api.highcharts.com/highcharts#chart.spacingRight) as below:
chart: {
renderTo: 'chart',
events: {
load: function(event) {
}
},
type: 'spline',
animation: false,
spacingRight: 100 // you may change this for testing...
},