I've implemented a chart like this example, and I want to export the chart with the div which is located next to the chart and contains map help table. how is it possible?
<div id="container"></div>
<div id="map-help">
<p>
hello world
</p>
</div>
Highcharts.ganttChart('container', {
title: {
text: 'Gantt Chart with Progress Indicators'
},
xAxis: {
min: Date.UTC(2014, 10, 17),
max: Date.UTC(2014, 10, 30)
},
series: [{
name: 'Project 1',
data: [{
name: 'Start prototype',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 25),
completed: 0.25
}, {
name: 'Test prototype',
start: Date.UTC(2014, 10, 27),
end: Date.UTC(2014, 10, 29)
}, {
name: 'Develop',
start: Date.UTC(2014, 10, 20),
end: Date.UTC(2014, 10, 25),
completed: {
amount: 0.12,
fill: '#fa0'
}
}, {
name: 'Run acceptance tests',
start: Date.UTC(2014, 10, 23),
end: Date.UTC(2014, 10, 26)
}]
}]
});
Related
I have a gantt chart with milestones and pills, at the end I have the navigator which show all tasks (pills and milestones alike), we would like to know if there's a way to limit the navigator to show only milestones in the bar? in the image below, you can see the actual bar, we did read the docs but could not find anything like that or at least we could not find it... thank you for your help.
--------------- IMAGES FOR #SEBASTIAN ---------------
Am I missing something? Thank you for your help!
In case when you set the navigator.series options like pointPlacement and pointPadding with pointWidth inside series.gantt you will show milestones only at the navigator.
navigator: {
enabled: true,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.5,
},
yAxis: {
min: 0,
max: 4,
reversed: true,
}
},
series: [{
name: 'Project 1',
data: [{
name: 'Create prototype',
id: 'prototype',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 21)
}, {
name: 'Prototype done',
dependency: 'prototype',
start: Date.UTC(2014, 10, 21, 12),
milestone: true,
pointWidth: 10,
}, {
name: 'Develop',
id: 'develop',
start: Date.UTC(2014, 10, 20),
end: Date.UTC(2014, 10, 25)
}, {
name: 'Development done',
dependency: 'develop',
start: Date.UTC(2014, 10, 25, 12),
milestone: true,
pointWidth: 10,
}, {
name: 'Test prototype',
start: Date.UTC(2014, 10, 27),
end: Date.UTC(2014, 10, 29)
}, {
name: 'Run acceptance tests',
start: Date.UTC(2014, 10, 23),
end: Date.UTC(2014, 10, 26)
}]
}]
Demo: https://jsfiddle.net/BlackLabel/a94xkb0c/
https://jsfiddle.net/cavrzkwg/1/
here is the link for the gnatt highcharts i want to make it scrollable using mousewheel not the main scrollbar but the inbuilt scrollbar of highcharts
i tried the setextremes ec=vents but no luck
here is the link for the gnatt highcharts i want to make it scrollable using mousewheel not the main scrollbar but the inbuilt scrollbar of highcharts
i tried the setextremes ec=vents but no luck
Highcharts.ganttChart('container', {
title: {
text: 'Gantt Chart with Progress Indicators'
},
scrollbar: {
enabled: true
},
yAxis: {
min: 0,
max: 3,
scrollbar:{
enabled : true,
showFull: false
}
},
xAxis: {
min: Date.UTC(2014, 10, 17),
max: Date.UTC(2014, 10, 30),
grid: {
enabled: true,
borderColor: 'rgba(0,0,0,0.3)',
borderWidth: 1
}
},
legend: {
enabled: true
},
series: [{
name: 'Project 1',
data: [{
name: 'Start prototype',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 25),
completed: 0.25
},{
name: 'Start',
start: Date.UTC(2014, 9, 18),
end: Date.UTC(2014, 10, 25),
completed: 0.25
}, {
name: 'Test prototype',
start: Date.UTC(2014, 10, 27),
end: Date.UTC(2014, 10, 29)
}, {
name: 'Develop',
start: Date.UTC(2014, 10, 20),
end: Date.UTC(2014, 10, 25),
completed: {
amount: 0.12,
fill: '#fa0'
}
}, {
name: 'Run acceptance tests',
start: Date.UTC(2014, 10, 23),
end: Date.UTC(2014, 10, 26)
}]
},
{
name: 'Project 2',
data: [{
name: 'Start prototype2',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 25),
completed: 0.25
}, {
name: 'Test prototype2',
start: Date.UTC(2014, 10, 27),
end: Date.UTC(2014, 10, 29)
}]
}]
});
Try this custom functionality, which should allow scrolling the chart using the mouse wheel.
(function(H) {
//internal functions
function stopEvent(e) {
if (e) {
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble = true;
}
}
//the wrap
H.wrap(H.Chart.prototype, 'render', function(proceed) {
var chart = this,
mapNavigation = chart.options.mapNavigation;
proceed.call(chart);
// Add the mousewheel event
H.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function(event) {
var delta, extr, step, newMin, newMax, axis = chart.yAxis[0];
e = chart.pointer.normalize(event);
// Firefox uses e.detail, WebKit and IE uses wheelDelta
delta = e.detail || -(e.wheelDelta / 120);
delta = delta < 0 ? 1 : -1;
if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
extr = axis.getExtremes();
step = (extr.max - extr.min) / 20 * delta;
newMin = extr.min + step;
newMax = extr.max + step;
console.log('max', extr.max)
console.log('min', extr.min)
if (newMin > axis.dataMin && newMax < axis.dataMax) {
axis.setExtremes(newMin, newMax, true, false);
}
}
stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
return false;
});
});
}(Highcharts));
Demo: https://jsfiddle.net/BlackLabel/9jL68mk4/
I'm trying to show some tooltip on a particular time on the xrange Highcharts on chart render , but there is no existing feature for that, is there any possibilities to show a tooltip like below
From this example I found that annotation can be used to show some message, I tried to utilize this.
function annotateChart({
text,
value
}) {
const annons = this.annons;
const label = this.renderer.label(text, 0, 0).attr({
stroke: 'red',
'stroke-width': 2,
align: 'center',
zIndex: 99,
class: 'newText'
}).add();
annons.push({
label,
value
});
}
function redrawAnnons() {
const xAxis = this.xAxis[0];
const yAxis = this.yAxis[0];
this.annons.forEach(ann => {
ann.label.animate({
x: xAxis.toPixels(ann.value),
y: yAxis.toPixels(-2.0)
});
});
}
Highcharts.chart('container', {
chart: {
type: 'xrange',
marginTop: '55',
events: {
load: function() {
this.annons = [];
[{
text: ['min', 'time', 'data', 'bluetooth'],
value: Date.UTC(2014, 11, 2)
}, {
text: 'max',
value: Date.UTC(2014, 11, 21, 5)
}].forEach(obj => {
annotateChart.call(this, obj);
});
redrawAnnons.call(this)
},
redraw: redrawAnnons
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
minPadding: 0,
opposite: true
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true,
lineColor: '#2c2d39',
lineWidth: 1
},
series: [{
name: ' ',
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: false
}
}]
});
#container {
min-width: 300px;
max-width: 800px;
height: 190px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
I'm not sure whether this is the correct approach, if there is any other way to achieve this, also the tooltip is shown on the chart top margin
marginTop: '55'
Tooltip With more that 2 data is affecting the highchart responsiveness.
How can I have collapsible sub-tasks while using the table on the left? If I remove the table columns then it works fine. This is the example from the official website, unfortunately there is no demo for my case. Any guidance is appreciated.
Here is the fiddle I've played with: https://jsfiddle.net/sharvadze/4h80gdts/1/
Highcharts.ganttChart('container', {
title: {
text: 'Left Axis as Table'
},
xAxis: {
tickPixelInterval: 70
},
yAxis: {
type: 'category',
grid: {
enabled: true,
borderColor: 'rgba(0,0,0,0.3)',
borderWidth: 1,
columns: [{
title: {
text: 'Project'
},
labels: {
format: '{point.name}'
}
}, {
title: {
text: 'Assignee'
},
labels: {
format: '{point.assignee}'
}
}, {
title: {
text: 'Est. days'
},
labels: {
formatter: function () {
var point = this.point,
days = (1000 * 60 * 60 * 24),
number = (point.x2 - point.x) / days;
return Math.round(number * 100) / 100;
}
}
}, {
labels: {
format: '{point.start:%e. %b}'
},
title: {
text: 'Start date'
}
}, {
title: {
text: 'End date'
},
offset: 30,
labels: {
format: '{point.end:%e. %b}'
}
}]
}
},
tooltip: {
xDateFormat: '%e %b %Y, %H:%M'
},
series: [{
name: 'Project 1',
data: [{
id: 'test',
start: Date.UTC(2017, 10, 18, 8),
end: Date.UTC(2017, 10, 25, 16),
name: 'Start prototype',
assignee: 'Richards',
y: 0
}, {
parent: 'test',
start: Date.UTC(2017, 10, 20, 8),
end: Date.UTC(2017, 10, 24, 16),
name: 'Develop',
assignee: 'Michaels',
y: 1
}, {
start: Date.UTC(2017, 10, 25, 16),
end: Date.UTC(2017, 10, 25, 16),
name: 'Prototype done',
assignee: 'Richards',
y: 2
}, {
start: Date.UTC(2017, 10, 27, 8),
end: Date.UTC(2017, 11, 3, 16),
name: 'Test prototype',
assignee: 'Richards',
y: 3
}, {
start: Date.UTC(2017, 10, 23, 8),
end: Date.UTC(2017, 11, 15, 16),
name: 'Run acceptance tests',
assignee: 'Halliburton',
y: 4
}]
}]
});
I have created highcharts x-range chart with multiple series in one category. Tooltips are displaying above the middle of the category. I'd like it to display above each x-range point. How can I do it?
I've tried to override tooltip positioner. But the argument point contains values plotX and plotY like it is placed on the middle of y value and I can't calculate its real position.
this.tooltipPositioner = function(labelWidth, labelHeight, point){
return {
x: point.plotX,
y: point.plotY
};
};
Live Demo: https://jsfiddle.net/levra/mh7uj93r/
You can use tooltip.positioner but instead of the argument point, you can use hovered point object where you will find the correct point plot values. To get hovered point object use plotOptions.series.point.events.mouseOver callback. Check the code and demo posted below:
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
JS:
var hoveredPoint;
var chart = Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
tooltip: {
positioner: function(labelWidth, labelHeight) {
var x = hoveredPoint.shapeArgs.x,
y = hoveredPoint.shapeArgs.y,
width = hoveredPoint.shapeArgs.width,
tooltipOffsetTop = -10;
return {
x: x + chart.plotLeft + width / 2 - labelWidth / 2,
y: y + chart.plotTop - labelHeight + tooltipOffsetTop
}
}
},
plotOptions: {
xrange: {
point: {
events: {
mouseOver: function() {
hoveredPoint = this;
},
mouseOut: function() {
hoveredPoint = null;
}
}
}
}
},
series: [{
name: 'Project 1',
// pointPadding: 0,
groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
},
{
name: 'Project 2',
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 23),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}],
dataLabels: {
enabled: true
}
}
]
});
Demo:
https://jsfiddle.net/BlackLabel/51gybnew/1/