Photo with faulty chart | Zooming in (less data points) plots correctlyWhen charting a boolean value over time (as stepped), Highstock 7.2.0 is introducing interpolated values between 0 and 1. I would like the result to just plot 0s and 1s in a stepped fashion. See attached photos. The one marked up is showing interpolated values.
I'm looking at the difference between series.data and series.processedYData and while series.data is a mix of 0s and 1s as expected, series.processedYData contains some interpolated values between 0 and 1. If I zoom in on the affected time range, it renders correctly. It is only happening when pulling in larger set of data (over 100 or so).
scope.CreateChart = function () {
if (scope.chart) scope.chart.destroy();
scope.chart = new Highcharts.stockChart('trend', {
rangeSelector: {
enabled:false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
enabled:true
},
plotOptions: {
connectNulls: false
},
chart: {
zoomType: 'xy',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%b %e',
week: '%b %e',
month: '%b \'%y',
year: '%Y'
}
},
yAxis: [{ id: GuidSvc.Create(), title: { text: 'Default' }, opposite: false }],
series: [
{name: 'Series 1',
step: true,
type: 'line',
data: [[1568293051542,0],[1568293352761,0],[1568293652277,0]
],
credits: { enabled: false },
lang: {
noData: "No tags selected. Click on a tag to trend"
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '15px',
color: '#ccc'
}
}
});
};
This is happening probably because of series dataGrouping. It is the concept of sampling the data values into larger blocks in order to ease readability and increase performance.
So the solution could be to disable it or change the approximation method so that it shows not group average but one of its points (so that it will be 0 or 1).
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
}
API reference:
https://api.highcharts.com/highstock/series.line.dataGrouping
https://api.highcharts.com/highstock/series.line.dataGrouping.approximation
Related
I'm building an Angular app where I use higcharts. The issue I have is the size of the exporting dialog box. I have several graphs on the page, but only one graph has this problem, the dialog box is way too large than the boxes on the others graphs. Below some screenshots so you can observe the difference.
Noramal size:
The large one:
Of course the graphs have the same height and width.
For exporting the graphs, I'm using:
import * as Highcharts from 'highcharts';
import exporting from 'highcharts/modules/exporting';
import exportingData from 'highcharts/modules/export-data';
exporting(Highcharts);
exportingData(Highcharts);
The configuration of all graphs has the same structure like below:
this.chartOptionsAvg = {
colors: ['#0026ff', '#ff0000', '#000000', '#229e00'],
chart: {
type: "scatter",
zoomType: 'x'
},
title: {
enabled: true,
text: '',
verticalAlign: 'top',
align: 'center'
},
xAxis: {
type: 'datetime',
title: {
text: this.translate.instant('map.time')
},
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
yAxis: {
title: {
text: this.translate.instant('map.graph-measurements-title-yaxis')
},
type: 'logarithmic',
minorTickInterval: 0.1,
},
credits: {
enabled: false
},
tooltip: {
valueSuffix: " V/m",
pointFormat: '<b>{point.x:%d/%m/%Y %H:%M}</b> </br> <b>{point.y}</b>',
dateTimeLabelFormats: {
minute: '%H:%M',
hour: '%H:%M',
month: '%d/%m/%Y',
year: '%Y'
}
},
plotOptions: {
series: {
marker: {
radius: 2
}
},
scatter: {
threshold: this.wb_threshold
}
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
exporting: {
enabled: true,
},
series: [
{
name: '100 KHz - 7 GHz',
data: avg_data1
},
{
name: '925 MHz - 960 MHz',
data: avg_data2
},
{
name: '1805 MHz - 1880 MHz',
data: avg_data3
},
{
name: '2110 MHz - 2170 MHz',
data: avg_data4
}
]
}
Have you any idea what is going wrong? Or, there is any way to style the box so I can change the font size maybe? Thank you.
I'm trying to use a stacked bar to represent up/down status over time. For some reason, I'm not able to get the start date to work correctly.
This is what I'm going for, but the start date won't update past epoch start.
http://jsfiddle.net/t5d72ka5/4/
Highcharts.chart('container', {
chart: {
type: 'bar',
backgroundColor:'transparent',
zoomType:'y'
},
title: {
text: ''
},
xAxis: {
},
yAxis: {
//min: 1502236800000 or min: Date.UTC(2011, 4, 31)
type: 'datetime',
"tickInterval": 86400000,
"minTickInterval": 86400000,
dateTimeLabelFormats: {
day: '%Y %b %e'
},
title: {
enabled: false
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name: 'down',
data: [83621000],
color: 'red'
}, {
name: 'up',
data: [83621000],
color: 'green'
}, {
name: 'down',
data: [83621000],
color: 'red'
}, {
name: 'up',
data: [83621000],
color: 'green'
}]
});
I've tried to add the start date in min: 1502236800000 or with UTC and while it sets the start date right, the data doesn't render.
Also tried a few other things with the data values, pointStart, etc. but can't this to work.
I suppose that threshold option is what you're looking for:
plotOptions: {
series: {
stacking: 'normal',
threshold: 1502236800000
}
},
Live demo: http://jsfiddle.net/BlackLabel/jyjfvoac/
API reference: https://api.highcharts.com/highcharts/series.column.threshold
I am using high charts lib to render date time column chart. But x-axis is not taking the exact starting value for the chart. In below example we need to set the bar width before 12th NOV x-axis value
chart: {
type: 'column',
width : 709,
marginTop : 100,
reflow: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
colors: ["#00ACE6", "#EA8939", "#2D8093", "#EB5C6A", "#D9A300", "#1B7CDE", "#8D69E0", "#378A4E", "#4F5A65"],
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
},
},
yAxis: {
allowDecimals: false,
min: 0,
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
animation: false
}
},
series:[{"name":"sent","data":[],"stack":"sent","_colorIndex":0},{"name":" received","data":[],"stack":"received","_colorIndex":1},{"name":"1 sent","data":[[1511136000000,1],[1510531200000,1],[1510444800000,1]],"stack":"sent","_colorIndex":2},{"name":"1 received","data":[],"stack":"received","_colorIndex":3},{"name":" made","data":[[1510531200000,1],[1510444800000,2]],"stack":"sent","_colorIndex":4},{"name":" received","data":[],"stack":"received","_colorIndex":5}], //Server data
loading: {
style: {
marginTop: "-25px"
}
}
});
js fiddle link : http://jsfiddle.net/L94731ge/5/
Could you please help me on this.
adding startOnTick for xAxis maybe correct your chart
xAxis: {
type: 'datetime',
startOnTick:true,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
},
},
please check this fiddle
I'm working with highcharts char. I need to show the yaxis labels H:i:s time format(for ex. yaxis - 00:00:00, 00:05:00, 00:10:00 and etc.).
Here is my code (full code in this fiddle):
LiveFeeds = {
init: function(tab)
{
var tab = tab || '#calling-intensity';
$(tab+'-chart').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: ''
},
xAxis: {
type: 'datetime'
},
yAxis: {
min: 0,minRange: 0.1,
title: {
text: chartYaxis
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
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')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
tooltip: tooltipData,
series: seriesData
});
}
};
This is a example but on Flot chart https://jsfiddle.net/p41d165j/14/.
Use http://api.highcharts.com/highcharts#xAxis.labels.formatter to format the labels as you wish.
To change date format of labels you could use dateTimeLabelFormats like:
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
},
Example: https://jsfiddle.net/hzjbb848/10/
Axis by default will display labels for each day, because of axis range, but if you zoom in - you will see hours.
You could consider using different format for day or use tickPositioner to set ticks not on days.
To fully control what is displayed in axis labels set up formatter function.
I want to add a dash like in the red circle from the first point(blue). Is it possible?
Here is my code
function graph(graph_id, value_array,tool_tip_title, max, min){
$('#'+graph_id).highcharts({
chart: {
type: 'areaspline',
backgroundColor:'transparent'
},
title: {
text: false
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return moment(this.value).format("HH:mm:ss");
}
}
},
yAxis: {
title: {
text: false
},
gridLineColor: 'transparent',
labels:{enabled: true},
gridLineWidth: 0,
minorGridLineWidth: 0,
min: min,
max: max
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 1
},
series: {
tooltip: {
dateTimeLabelFormats: {
second:"%A, %b %e, %H:%M:%S"
}
},
marker: {
fillColor: '#3D84B1',
lineWidth: 2,
lineColor: 'white',
radius: 6
}
}
},
series: [{
showInLegend: false,
name: tool_tip_title,
color: "#EC615F",
data: value_array
}]
});
}
I have also tried setting up the startOnTick to true and min to the least dateTime of x axis but nothing is happening.
Highcharts by default calculates some nice dates and sometimes the first possible label/datapoint is not fitting into that 'nice labels' algorithm. In case you want to display specific labels, use xAxis.tickPositioner. In your case, I think you can simply add two extra dates, like this:
tickPositioner: function() {
var tp = this.tickPositions; // get default positions
tp.splice(0, 1, this.min); // replace first label
tp.splice(tp.length - 1, 1, this.max); // replace last label
return tp;
}
Simple demo: http://jsfiddle.net/p98rggva/
you can use startOnTick and min as per your minimum data.
startOnTick: true,
min: your smallest data of xAxis/in date use first timestamp of sorted data