Simply put Highstocks seems to be rounding all of the data that I put into it, I need up to two decimal places shown which I have set up in the tooltip however at the moment all I am receiving for the two places are 0's. So instead of 1.5 its 1.
$.getJSON('mkjson.php?device=<?echo $device_name;?>&sensor=<?echo $sensor_name;?>&pin=<?echo $pin;?>&user=<?echo $_SESSION['user'];?>', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container',
zoomType: 'x'
},
rangeSelector : {
selected : 1
},
title : {
text : 'Device:<?echo $device_name;?>'
},
subtitle : {
text : 'Sensor:<?echo $sensor_name;?>'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis : {
title : {
text : '<?echo $unit;?>'
}
},
rangeSelector : {
buttons : [{
type : 'minute',
count : 10,
text : '10m'
}, {
type : 'hour',
count : 1,
text : '1H'
}, {
type : 'day',
count : 1,
text : '1D'
},
{
type : 'day',
count : 3,
text : '3D'
}],
selected : 3,
inputEnabled : false
},
series : [{
name : 'Voltage',
data : data,
tooltip: {
valueDecimals: 2
},
dataGrouping: {
enabled: false
}
}]
});
});
You can format numbers using Highcharts.numberFormat().
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}
}
Demo: http://jsfiddle.net/em7h6/
Btw according to this sample: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/valuedecimals/
using valueDecimals should also work, don't know whats missing in your case.
It should works http://jsfiddle.net/rbr23/ without using numberFormat();
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
data: [29.92, 71.51, 106.433, 129.12, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.61, 54.43]
}]
Related
We are using spline graph : https://api.highcharts.com/highcharts/series.spline.xAxis
In our code we have 2 xAxis:
xAxis: [
{
categories: formattedValues,
},
{
categories: axisFiltered,
},
],
My series :
series: [
{
name: `Satisfaction`,
data: formattedValues,
},
{
name: `Bottom`,
data: formattedBottomValues,
},
{
name: `Top`,
data: formattedTopValues,
},
{
name: `$Average`,
data: formattedAverageValues,
},
],
Into our series i want to refer to the 2 xAxis and not only one. In documentation it says we can refer to only one xAxis by series :
For example in my series i would like to do that :
series: [
{
name: `Satisfaction`,
data: formattedValues,
xAxis: [0, 1]
},
{
name: `Bottom`,
data: formattedBottomValues,
xAxis: [0, 1]
},
{
name: `Top`,
data: formattedTopValues,
xAxis: [0, 1]
},
{
name: `$Average`,
data: formattedAverageValues,
xAxis: [0, 1]
},
],
But the problem is currently we are allow only to do this :
series: [
{
name: `Satisfaction`,
data: formattedValues,
xAxis: 1
},
{
name: `Bottom`,
data: formattedBottomValues,
xAxis: 0
},
{
name: `Top`,
data: formattedTopValues,
xAxis: 1
},
{
name: `$Average`,
data: formattedAverageValues,
xAxis: 0
},
],
The problem with that is, when i click on the legend to hide a serie, it will hide the xAxis associated. But me i don't want this xAxis to be hide because it's usefull for other series.
Settings that give the possibility to adjust xAxis are xAxis.min and xAxis.max then they will stick to the second axis and the extremes will not change depending on the series.
xAxis: [{
title: {
text: 'Data'
},
}, {
title: {
text: 'Histogram'
},
alignTicks: false,
opposite: true,
min: 0,
max: 11
}],
Demo: https://jsfiddle.net/BlackLabel/hymjs0wL/
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.
How can i use Highstock rangeSelector get the yAxis Max_value and Min_Value ??
http://jsfiddle.net/r2wm5dyj/
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
subtitle: {
text: 'Using ordinal X axis'
},
xAxis: {
events: {
setExtremes: function(e) {
$('#Sdate').html( Highcharts.dateFormat(null, e.min));
$('#Edate').html( Highcharts.dateFormat(null, e.max));
}
}
},
rangeSelector : {
buttons : [{
type : 'hour',
count : 1,
text : '1h'
}, {
type : 'day',
count : 1,
text : '1D'
}, {
type : 'all',
count : 1,
text : 'All'
}],
selected : 1,
inputEnabled :false
},
series : [{
name : 'AAPL',
type: 'area',
data : data,
gapSize: 8,
tooltip: {
valueDecimals: 1
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [
[0, Highcharts.getOptions().colors[5]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null[enter link description here][1]
}]
});
});
});
i find a solution in myself
xAxis: {
events: {
setExtremes: function(e) {
$('#Sdate').html( Highcharts.dateFormat(null, e.min));
$('#Edate').html( Highcharts.dateFormat(null, e.max));
},
afterSetExtremes:function(e)
{
var chart = $('#container').highcharts(),
extremes = chart.yAxis[0].getExtremes();
$('#HiestTemp').html(extremes.dataMax);
$('#LowestTime').html(extremes.dataMin);
}
}
},
If you group by day only the first series is grouped. How can I make it so it groups both series?
In the above example, both series have the same data, but my current situation consists of two series with the same x value in every point but different y values.
Example: http://jsfiddle.net/6751x0yj/1/
$('#container').highcharts('StockChart', {
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'
},
series : [{
name : 'Series 1',
data : data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
},{
name : 'Series 2',
data : data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
}]
});
Thanks!
Looks like a bug, which you already reported here.
Workaround is to update series in descending order:
var H = Highcharts;
H.wrap(H.Axis.prototype, "setDataGrouping", function (p, dg, r) {
if (!dg) {
dg = {
forced: false,
units: null
};
}
if (this instanceof H.Axis) {
for(var i = this.series.length - 1; i >= 0; i--) {
this.series[i].update({
dataGrouping: dg
}, false);
};
}
p.call(this, dg, r);
});
And demo: http://jsfiddle.net/6751x0yj/2/
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
}
}]
});
});