My highstock chart isn't rendering properly. It shows some gap when my 2nd series start in the area chart. Even when zoomed in it's not showing properly. The timestamps are in UTC and have a value.
To clarify it a bit here some screenshots:
Normally not zoomed in:
Zoomed in a bit, and showing mouseover. Has only 1 series:
Zoomed in more, showing bigger gap, but has only 1 series:
Zoomed in more, showing bigger gap, but has only 1 series on same date:
I have the following options enabled on the graph:
chart: {
zoomType: 'x',
type: 'area'
},
plotOptions: {
area: {
stacking: 'normal'
},
series: {
turboThreshold: 0,
dataGrouping: {
approximation: "high",
smoothed: true,
groupPixelWidth: 10,
units: [['day', [1]], ['week', [1]], ['month', [1]]]
}
}
}
Any suggestions how to resolve this?
Thanks!
Seems that disabling
plotOptions.series.dataGrouping.smoothed
does the trick.
So then a bug-report:
When
plotOptions.series.dataGrouping.smoothed = true
the graph renders gaps, where I would expect a line.
Related
highstock data grouping is wrong while zooming. I am grouping data for each hour in a day.
data grouping without zoom
data grouping with zoom
as you can see from the image hour 3 and 16 not having the previous yAxis sum value anymore.
Can someone please let me know what's wrong here?
fiddle - highstock data grouping with zoom
{
type: 'column',
name: 'Stock Volume',
color: 'red',
data: data,
dataGrouping: {
forced: true,
units: [['hour', [1]]],
approximation: 'sum',
}
}
setting series.getExtremesFromAll to true solved my issue.
In general, only points in the visible range are grouped, points that are outside the extremes are not taken into calculations. In the docs they have mentioned only yAxis extremes, but it affects data Grouping too.
series: [{
type: 'column',
name: 'AAPL Stock Volume',
color: 'red',
data: data,
getExtremesFromAll: true,
dataGrouping: {
forced: true,
units: [['hour', [1]]],
approximation: 'sum',
}
}]
fiddle
github issue link
I have a highstock area spline chart with categories on the Y-axis. No points on the chart will ever go over the Top category, but I have an unwanted space above the top category 'Alarm'.
My Y-axis contains min and max which I use to always display all of the categories. If I set the max to 8 I lose the Alarm Category and the empty line is still there.
Here is my Y-Axis code
yAxis: {
categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
min: 0,
max: 9,
title: {
useHTML: true,
text: 'Alert Type'
},
opposite: false,
labels: {
x: 0,
y: 8
},
},
Is there anyway which I can only display enough 'lines' for my Y-axis categories and no unwanted lines which will never be used?
All help is appreciated.
Here I am getting gradient color at top of the chart area by reversing y-Axis. check the image below .
yAxis: {
reversed: true,
showFirstLabel: false,
showLastLabel: true
}
I don't want to reverse the y-Axis, if i am reversing the y-Axis my chart also reversed. I want the gradient color which is in top of the chart line without using this Reversed Y-axis. Suggest me to if any other options in highcharts.
Could any one help me to solve this.
I am working live random data. In this case only the area traveled by the data should get the gradient color , empty space other than the data in chat shouldn't get gradient color.
As per #DaMaxContent answer , the output will act like below image.
I don't want that gradient which filled in other area of the chart data. Could you please help me to resolve this.
The break down:
You can use gridZindex and backgroundColor/fillColor properties to
produce the desired effect. Only issue is that the grid has to be
displayed over graph. Here is the solution: DEMO
Here is the code behind it:
chart: {
type: 'area',
backgroundColor: { //<<--that is what you are using as fill color
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
yAxis: {
reversed: false,
showFirstLabel: false,
showLastLabel: true,
gridZIndex: 1000 //<<--grid Z index is used to display grid lines over the graph instead of under it
},
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : "#fff", //<<--fill color under the line to simulate effect
zIndex: 1000,
tooltip: {
valueDecimals: 2
}
}]
If you wish to get rid of the marginal color areas, you can get rid off the graphs margin with chart: { [... ,] margin: 0 [, ...] } and then use the container's padding as the graph margin.
more info:
highcharts styling guides:
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
grid Z index:
http://www.java2s.com/Tutorials/highcharts/Example/Axis/Set_grid_line_z_index.htm
background color:
Changing HighCharts background color?
(alternative to bg color) plot background color (bg color of main plot only)
http://api.highcharts.com/highcharts#chart.plotBackgroundColor
I have an application that needs to plot at least over 5k data points and the size can nearly be limitless.
The plot goes:
X-Axis -> DateTime
Y-Axis -> Temperature
This is my current plot
var plot1 = $.jqplot('chartdiv', dataArray, {
title: 'Default Date Axis',
axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } },
series: [{ lineWidth: 4, markerOptions: { style: 'square' } }],
numberTicks: 10
});
with data array containing at least 5k points in the ['Date', 'Temperature'] format.
The problem with this is that it'x extremely inefficient and makes the browser freeze up. I don't need it to literally put a label on every datapoint, maybe a few. Can anyone give me tips on how to optimize this?
You can get better performance by changing your marker types and removing shadows. I've been using these options in my plots with pretty good success:
seriesDefaults: {
lineWidth: 1, shadow: false,
rendererOptions: { smooth: false },
markerOptions: { show: true, shadow: false, size: 2 }
}
Here's an example which adds 50k points to a jqplot: http://jsfiddle.net/xf8d36kc/
We have a project where we are consistently plotting 20-30k points fairly quickly. Once we start getting towards around 100k points it's still quick to display but zooming and interacting with the plot starts to have lag times of 1-3 seconds but still doesn't freeze up the browser. We experience more delay in bringing the data in from our database then actual draw time for jqplot.
I haven't looked much in to plotting sets much bigger than 100k, but after that you may want to start grouping the data serverside to limit the number of points and then expand them as you zoom in for more detail.
If working with Primefaces 5, do this:
<p:chart id="lineChart" type="line" model="#{managedBean.lineModel}" />
<h:outputScript>
function chartExtender() {
// this = chart widget instance
// this.cfg = options
this.cfg.seriesDefaults = {
lineWidth: 2, shadow: false,
rendererOptions: { varyBarColor: true, smooth: false },
markerOptions: { show: true, shadow: false }
};
}
</h:outputScript>
On Managedbean:
LineChartModel lineModel = new LineChartModel();
//...
lineModel.setExtender("chartExtender");
//...
Greatly improved the performance for me.
Others options here.
I'm using the HighCharts graphing software and am trying to show the date labels on the x axis below the stock graph; it currently shows below the volume graph only.
How can I do this?
Here are the chart options I am using (removed irrelevant ones to save space)
JSFiddle link below
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
JSFille Link
You can use two xAxis, like in the example: http://jsfiddle.net/sbochan/phtd7r1t/2/
xAxis: [{
offset: 15
},{
linkedTo:0,
offset: -76
}],
You could use some of the positioning options to achieve this. If the height is dynamic it might be a bit difficult, but for static height charts this approach should work fine.
First edit the yAxis[1].top to be '73%' (moving the "Volume" chart further down to create a gap).
Then offset your x-axis with xAxis: { offset: -81 } to move it in between the two charts.
See this JSFiddle demonstration of the result.