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.
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 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 am struggling to solve this issue where I have a Highcharts graph with temperature and humidity.
It has two y-axis, one for temperature and one for humidity.
I have specified that humidity should go to the y-axis id 1, but it does not.
It puts the line in, but it is 'plotted' to the temperature axis values.
See this jsfiddle
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
type: 'spline'
},
title: {
text: 'Temperatures - Vdrivhus'
},
subtitle: {
text: 'last hour'
},
xAxis: {
type: 'datetime',
// dateTimeLabelFormats.setOption("minute", "%H:%M");
dateTimeLabelFormats: { // don't display the dummy year
day: '%e %b',
week: '%e %b %y',
month: '%b %y',
year: '%Y'
}
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Humidity',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
min: 50,
max: 100,
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Temperature',
// Define the data points.
marker: {
enabled: false
},
yaxis: 0,
tooltip: {
valueSuffix: '°C'
},
data: [
[1387521917000, 5],
[1387522299000, 5.2],
[1387522531000, 5.1],
[1387522809000, 5.1],
[1387523536000, 4.8],
[1387523745000, 4.7],
[1387524008000, 4.7],
[1387524303000, 4.8],
[1387524667000, 4.9],
[1387524904000, 4.9],
[1387525245000, 5]
]
}, {
name: 'Humidity',
marker: {
enabled: false
},
yaxis: 1,
tooltip: {
valueSuffix: '%'
},
data: [
[1387521917000, 74.4],
[1387522299000, 73.6],
[1387522531000, 74],
[1387522809000, 74],
[1387523536000, 82.5],
[1387523745000, 82.4],
[1387524008000, 78.7],
[1387524303000, 75.9],
[1387524667000, 74.6],
[1387524904000, 74.5],
[1387525245000, 74.2]
]
}, ]
});
});
//]]>
Can anyone help me solve this?
It is very simple, yaxis option should be yAxis since JS is case-sensitive.
I think that's it: jsFiddle
I have two panes (yAxis:0 and yAxis:1) for two different sets of data series. When I use plotOptions Compare set to Percent, the second pane (yAxis:1) becomes blank (or actually I think the curve is pushed to the very top, but still not visible). If I remove the plotOptions section, then the second pane comes out just like I want it. But then I don't get the first pane the way I want it (normalized so I can see the percentage difference rather than absolute value).
Is there a way to apply the plotOptions only to the first pane / yAxis:0?
window.chart = new Highcharts.StockChart({
chart: {
renderTo : 'container'
},
title: {
text : 'Relative rates for <?=$stock1?>, <?=$stock2?>, and OMX30, and positions taken'
},
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 4,
text: '4y'
}, {
type: 'all',
text: 'All'
}],
selected: 5
},
yAxis: [{
title: {
text: 'Normalized rates'
},
height: 250,
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}, {
title: {
text: 'Positions taken'
},
top: 300,
height: 100,
offset: 0,
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
}],
xAxis: {
type: 'datetime',
minRange: 1728000000 //Minimibredden på grafen i ms
},
plotOptions: {
series: {
compare: 'percent'
}
},
series: [{
name : '<?=$stock1?>',
data : json_data,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : '<?=$stock2?>',
data : json_data2,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : 'OMX30',
data : json_data3,
yAxis : 0,
tooltip: {
yDecimals: 2
}
},{
name : '<?=$stock1?>',
data : json_data4,
yAxis : 1,
tooltip: {
yDecimals: 1
}
},{
name : '<?=$stock2?>',
data : json_data5,
yAxis : 1,
tooltip: {
yDecimals: 1
}
}]
});
});
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)