I'm trying to display some data using HighStock. Everything works quite fine beside the fact that I cannot display less than 6 days.
As you can see below, I have selected 3 days as range but the chart still shows 6 columns.
Moreover, if I try to select any day after April 18 as "from" value, the value is ignored and April 18, 2013 is considered. Finally, I have the same behavior if I try to pinch the navigator, I cannot display less than 6 days.
I have looked into HighStock API Reference but I cannot find any reference to the fact that 6 is de default number of days/values shown.
Below I report my js:
$('#container').highcharts('StockChart', {
chart: {
backgroundColor: '#E5E7EB'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
count: 1,
text: 'Ytd'
},{
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000 // daily
},
yAxis: {
offset: 8,
title: {
text: yAxisTitle
},
labels: {
align:'right'
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: seriesOptions
});
Am I missing anything? How may I display less than 6 days/values?
Thanks and have a nice day.
You should set minRange http://api.highcharts.com/highstock#xAxis.minRange
In your example: 3 * 24 * 3600 * 1000 (which means 3 days)
Related
Have a highstock chart with a large number of data around 60-80 thousand timestamp and sum. The problem is that none of the data which i give to highstock contains decimal but highstock shows some values that are decimals like 1.5 but my data does not have any 1.5. Does the highstock averages the data if timestamp is more than 1hour or anything? If it does averages the data than how to stop this averaging as i dont need decimal data
var chart = Highcharts.stockChart('container', {
chart: {
height: 400
},
title: {
text: 'Tweets Count'
},
xAxis: {
gapGridLineWidth: 0,
events: {
afterSetExtremes: function (e) {
min=e.min
max=e.max
src="http://34.66.198.6/"+id+"/map/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("map",src)
src="http://34.66.198.6/"+id+"/hashtags/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("hashtags",src)
src="http://34.66.198.6/"+id+"/mentions_screen_name/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("mentions_screen_name",src)
src="http://34.66.198.6/"+id+"/screen_name/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("screen_name",src)
src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/"
loadIframe("sentiments",src)
src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/All/all"
loadIframe("twitter",src)
src="http://34.66.198.6/"+id+"/sentiments/"+parseInt(min).toString()+"/"+parseInt(max).toString()+"/All/all/word"
loadIframe("word-cloud",src)
}
}
},
yAxis:{
text:'Tweets Count'
}
,
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1H'
}, {
type: 'day',
count: 1,
text: '1D'
},
{
type: 'month',
count: 1,
text: '1M'
},
{
type: 'year',
count: 1,
text: '1Y'
},
{
type: 'all',
count: 1,
text: 'All'
}],
selected: 1,
inputEnabled: false
},
series: [{
name: 'Tweets Count',
data: {{data}},
type: 'area',
gapSize: 5,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 300
},
subtitle: {
text: null
},
navigator: {
enabled: false
}
}
}]
}
});
Highstock provides dataGrouping feature, which is enabled by default.
Please check the docs below and compare the result with:
disabled dataGrouping: http://jsfiddle.net/BlackLabel/tokz3aum/
enabled dataGrouping http://jsfiddle.net/BlackLabel/co16j85p/
You can disable dataGrouping or define your own approximation function which will round the result, for example:
series: [{
data: [...],
dataGrouping: {
approximation: function(arr) {
var len = arr.length,
ret = Highcharts.approximations.sum(arr);
if (Highcharts.isNumber(ret) && len) {
ret = ret / len;
}
return Math.round(ret);
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/q6ukvrp9/
API Reference: https://api.highcharts.com/highstock/series.line.dataGrouping.approximation
Docs: https://www.highcharts.com/docs/advanced-chart-features/data-grouping
I want create a bar line graphs with navigator,range selector, y axis from both side and graph sector. I implement it using Highcharts.Chart() but it's x-axis not comes properly. when i create x-axis properly after change categories to ["2017-2-3'] then range selector goes to 1970 (default value) so i convert date to milliseconds. Now in the x-axis have unwanted values. I want to show only x-axis values which shows in category array. currently 1m,3m,6m not worked i think it happen because of this x-axis issue.
jsfiddle : http://jsfiddle.net/m05sgk3j/1/
$(document).ready(function() {
var categories = [1551420000000,1549000800000,1546322400000,1543644000000,1541052000000, 1538373600000, 1535781600000,1533103200000, 1530424800000, 1527832800000, 1525154400000, 1522562400000, 1519884000000, 1517464800000,1514786400000];
new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'In March 2019, the average CT_HOURS is 10.55 hours.'
},
rangeSelector: {
enabled: true,
buttons: [{
type: 'millisecond',
count: 1,
text: '1m'
}, {
type: 'millisecond',
count: 3,
text: '3m'
}, {
type: 'millisecond',
count: 6,
text: '6m'
}, {
type: 'all',
text: 'All'
}],
selected: 4,
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d'
},
navigator: {
enabled: true,
xAxis: {
tickInterval: 15,
labels: {
/* formatter: function() {
return categories[this.pos]
} */
}
}
},
scrollbar: {
enabled: true
},
xAxis: {
// categories: categories,
type: 'datetime',
tickInterval : 2,
// tickInterval: {_tickInterval},
/* labels: {
step:10
}, */
/* maxZoom: 30 * 24 * 3600000, */
dateTimeLabelFormats : {
day: '%Y-%m'
}
// crosshair: true,
// minRange: 1
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}h',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'AVERAGE CT_HOURS',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'REQUEST COUNT',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
series: [{
name: 'REQUEST COUNT',
type: 'column',
yAxis: 1,
data: [
[1551420000000, 49.9],
[1549000800000, 71.5],
[1546322400000, 106.4],
[1543644000000, 129.2],
[1541052000000, 144.0],
[1538373600000, 176.0],
[1535781600000, 135.6],
[1533103200000, 148.5],
[1530424800000, 49.9],
[1527832800000, 71.5],
[1525154400000, 106.4],
[1522562400000, 129.2],
[1519884000000, 144.0],
[1517464800000, 176.0],
[1514786400000, 135.6]
],
tooltip: {
valueSuffix: ''
}
}, {
name: 'AVERAGE CT_HOURS',
type: 'spline',
data: [[1551420000000, 56.6],
[1549000800000, 46.3],
[1546322400000, 32.8],
[1543644000000, 43.4],
[1541052000000, 40.8],
[1538373600000, 43.0],
[1535781600000, 43.1],
[1533103200000, 44.6],
[1530424800000, 45.7],
[1527832800000, 27.8],
[1525154400000, 39.9],
[1522562400000, 29.3],
[1519884000000, 27.9],
[1517464800000, 27.4],
[1514786400000, 17.6]],
tooltip: {
valueSuffix: 'h'
}
}]
});
});
Just comment the tickInterval for the xAxis
//tickInterval : 2,
Fiddle
First of all, you have unsorted data. If you want to invert your data, use reversed option.
Also, the rangeSelector and the tickInterval are wrong. If you use datetime axis, then the basic unit is one millisecond.
However, to show dates only from the categories array, use the tickPositions option and formatter function for labels:
xAxis: {
reversed: true,
minRange: 1,
type: 'datetime',
tickPositions: categories,
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m', this.value);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/a6Lphq4k/
API Reference:
https://api.highcharts.com/highcharts/xAxis.reversed
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.labels.formatter
(1) First always make sure that you are injecting timestamps in your categories, and formatting them in :
(1-1) xAxis.labels.formatter function [for x axis labels]
(1-2) navigator.xAxis.labels.formatter function [for navigation labels format)
(2) Second make sure that you are clearing your (xAxis.categories) if you push data into it. because highcharts don't sort your array. if you just assign new array that's ok.
(3) Note : Based on values on your categories array, navigation gets some values like xAxis min and xAxis Max. when you change your data these values remain and that's why your navigation collapses. so when changing data make sure to update. you can use 0 for minimum of navigator and categories.length for maximum value of navigator.
you can access updated values also in dataMin and dataMax.
Hope this answer help you.
Recently I found my pages with Highstock breaks. When clicking the range selector button, which I had defined the dataGrouping function, the series before grouping is still shown in the chart.
img: the overlapping series
so I went back to find the API reference. It turned out that the example given in the API doc has the same issue with mine:
the jsfiddle of the official example
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
Highcharts.stockChart('container', {
chart: {
height: 300
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
subtitle: {
text: 'Custom data grouping tied to range selector'
},
_navigator: {
enabled: false
},
series: [{
name: 'AAPL',
data: data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
}]
});
});
So I'm wondering if it's a bug with the new updated highstock.js code.
I am having some difficulty getting pointRange to work for a HighStock combination chart I've written.
You can see the issue here, the bars should be 28 days wide but they are not. I can get this code to work on a non-HighStock chart but something is preventing it from working in HighStock and I've been unable to figure it out.
http://jsfiddle.net/3fnfy434/
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 450
},
credits: {
enabled: false
},
rangeSelector : {
inputEnabled: false,
selected : 2,
buttons: [{
type: 'month',
count: 3,
text: '3m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
labelStyle: {
color: '#40C6CE',
fontWeight: 'bold'
}
},
title : {
text : 'test'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
allowDecimals: false,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#25408F'
}
},
title: {
text: 't',
style: {
color: '#25408F'
}
}
}],
navigator: {
baseSeries: 1
},
series : [{
name: 's1',
data: d1,
type: 'column',
visible: true,
pointRange: 28 * 24 * 3600 * 1000,
tooltip: {
valueDecimals: 0,
valueSuffix: ''
}
},
{
name : 's2',
data : d2,
color: '#25408F',
dataGrouping: {
enabled: false
},
pointRange: 24 * 3600 * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: ''
}
}]
});
Any help greatly appreciated.
I tried to make a line chart with highstock but I got a problem with aligning points with ticks on X-axis.
Here are some of my code snippets for the chart.
jQuery('#chart-area').highcharts('StockChart', {
xAxis: {
minRange: 7 * 24 * 3600000,
minTickInterval: 24 * 3600000
},
rangeSelector: {
inputEnabled: true,
selected: 1,
buttons: [
{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'week',
count: 2,
text: '2w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 2,
text: '2m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'month',
count: 6,
text: '6m'
}
]
},
title: {
text: 'Test Execution Trend'
},
subtitle: {
text: $scope.currentStream
},
series: [
{
name: 'Test Success Percentage',
pointInterval: 24 * 3600 * 1000,
data: $scope.data,
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 0
}
}
]
}
);
});
}
I don't even know why this could happen. Is there any problems in my codes?
Here is jsfiddle
http://jsfiddle.net/U85D6/
The problem is that your data isn't starting at specific day, but it's about 16:00. Highcharts ticks are placed at 00:00. That example should explain you better: http://jsfiddle.net/U85D6/1/
I have addeed
tooltip: {
xDateFormat: '%A, %b %e, %H:%M'
},
to show full date for points.