I'm working on a graph for runners, that chart must be scrollable like in Highstock. How can I show the laps with scroll function?
chart = Highcharts.stockChart({
chart: {
renderTo: 'container',
type: "line"
},
credits:{
enabled: false
},
series: data
});
Edit:
I have this
I wanne make a horizontal scroll like this
If I use Highcharts I can not make a scroll. If I use Highstock there are dates instead of laps. How can I fix it?
You can use Highstock code and chart constructor, which will allow you use Highstock features in standard chart:
Highcharts.chart('container', {
scrollbar: {
enabled: true
},
navigator: {
enabled: true,
xAxis: {
labels: {
formatter: function() {
return this.value
}
}
}
},
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/xf5ka8un/
API: https://api.highcharts.com/highstock/scrollbar
Related
I am new to working with HighCharts. I am working on a project that was started by someone else but not finished. In this project the user will have a chart that spans multiple days but only wants to use certain sections of it. The user wants to use the bottom navigation 1 bar which lets you zoom into certain time spans to move around the chart to save different version of the chart. They will press the save button to save the state of the chart which they are currently viewing. I need a to know if it is possible if you can access the labels in the x-axis of the line chart so I can save the time positions they are looking at? Do HighCharts provide any way of getting output from the Navigation 1 bar?
I have accessed the x-axis labels with jquery and can see the data I need using ('#fn.init').prevObject[0].all.chartContainer.innerText, but I am not sure if this is the correct way to go about it. Is there a better way to do this?
Chart Configuration:
Highcharts.stockChart('container',
{
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
zoomType: 'xy',
panning: true,
panKey: 'ctrl',
events: {
load() {
const chart = this;
chart.showLoading('Loading, Please Wait ...');
setTimeout(function() {
chart.hideLoading();
},
1500);
}
}
},
boost: {
useGPUTranslations: true,
turboThreshold: 1000
},
rangeSelector: {
buttons: [
$('#heatingStart').val(),
toDateAdd($('#heatingStart').val(), 1, 'H'));
graphicinfo(RecipeId, $('#heatingStart').val(), toDateAdd($('#heatingStart').val(), 8, 'H'));
graphicinfo(RecipeId, $('#heatingStart').val(), toDateAdd($('#heatingStart').val(), 1, 'D'));
{
text: 'All',
events: {
click: function() {
graphicinfo(RecipeId, $('#ReportStartDate').val(), $('#ReportEndDate').val());
}
}
}
]
},
legend: {
enabled: true
},
xAxis: {
title: {
text: 'Time (Hrs)'
},
categories: categoriesX
},
yAxis: {
tickWidth: 1,
title: {
text: 'Temperature (°F)'
},
labels: {
format: '{value:.0f} °F'
},
lineWidth: 1,
opposite: true
},
title: {
text: 'Thermocouples Temperature Data'
},
series: termocouplesdata
});
In short, I need to somehow enable groupPadding for stacked series. It looks a little bit odd, but this is what you can do in PowerPoint if you set series overlap to 0:
With series overlap set to 100, they would be on top of each other like in Highcharts with stacking set to e.g. normal.
To me, it seems you are not allowed to move stacking columns horizontally relative to each other in Highcharts. But maybe I am missing something or there is a workaround?
Thanks!
You can create an additional hidden series with the same stack as the upper series. Example:
Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
dataLabels: {
enabled: true,
format: '{point.y}%'
}
}
},
series: [{
data: data2,
color: 'gray'
}, {
data: data1,
color: 'rgba(0,0,0,0)',
linkedTo: 'data1',
dataLabels: {
enabled: false
}
}, {
id: 'data1',
data: data1,
stack: 'A',
color: 'green'
}]
});
Live demo: http://jsfiddle.net/BlackLabel/rkvs8cy7/
API Reference: https://api.highcharts.com/highcharts/series.column.stack
I've encounted a problem when updating data of pie chart by clicking on a button - the legend and title overlap pie chart. But what's interesting is that when I resize the browser, for example, maximize the browser, position of title and legend go back normal.
Problem example is shown at http://jsfiddle.net/HmmeX/3/.
Data is updated by
$('button').click(function() {
// var chart = $('#container').highcharts();
chart.setTitle({
text: 'Browser market shares at a specific website, 2010'
});
chart.series[0].setData(adata, true);/*update({
data: adata});*/
});
That looks like a bug to me. You can work around it by adding size : 300 to your pie options.
chart = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container',
type: 'pie'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
verticalAlign: 'bottom'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
size:300
}
},
series: [{
name: 'Browser share',
data: []
}]
});
http://jsfiddle.net/xNmLd/
When using a stacked colomn chart and xAxis type is datetime on the yAxis a lot of dates, although dispatched only 2 dates.
http://jsfiddle.net/jBxbe/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [[1367280000000,8],[1369872000000,26349]]
}, {
name: 'Ex2',
data: [[1367280000000,19196],[1369872000000,31213]]
},]
});
});
With such a minimal amount about data, you are probably better off using a category xaxis instead of datetime. This will give you better control on the display.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Apr 2013','May 2013']
},
yAxis: {
},
plotOptions: {
column: {
stacking: 'normal',
minPointLength: 3
}
},
series: [{
name: 'Ex1',
data: [8,26349]
}, {
name: 'Ex2',
data: [19196,31213]
},]
});
});
Fiddle here.
You can use pointRange parameter http://api.highcharts.com/highcharts#plotOptions.column.pointRange / tickInterval (http://api.highcharts.com/highcharts#xAxis.tickInterval) two categories http://api.highcharts.com/highcharts#xAxis.categories
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});