Post
Ask Question
Ritendra Mall

Ritendra Mall

  • NA
  • 316
  • 33.4k

How to use redraw events

May 7 2020 8:09 AM
Hello ,
Please help how i can use redraw function after i do any update, below are the code:-
js.file:--
var today = new Date(),
day = 1000 * 60 * 60 * 24,
each = Highcharts.each,
reduce = Highcharts.reduce,
btnShowDialog = document.getElementById('btnShowDialog'),
btnRemoveTask = document.getElementById('btnRemoveSelected'),
btnAddTask = document.getElementById('btnAddTask'),
btnCancelAddTask = document.getElementById('btnCancelAddTask'),
addTaskDialog = document.getElementById('addTaskDialog'),
inputName = document.getElementById('inputName'),
start = document.getElementById('start'),
end = document.getElementById('end'),
selectDepartment = document.getElementById('selectDepartment'),
selectDependency = document.getElementById('selectDependency'),
chkMilestone = document.getElementById('chkMilestone'),
isAddingTask = false;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
// Update disabled status of the remove button, depending on whether or not we
// have any selected points.
function updateRemoveButtonStatus() {
var chart = this.series.chart;
// Run in a timeout to allow the select to update
setTimeout(function () {
btnRemoveTask.disabled = !chart.getSelectedPoints().length ||
isAddingTask;
}, 10);
}
// Create the chart
var chart = Highcharts.ganttChart('container', {
chart: {
spacingLeft: 1
},
title: {
text: 'Interactive Gantt Chart'
},
subtitle: {
text: 'Drag and drop points to edit'
},
plotOptions: {
series: {
animation: false, // Do not animate dependency connectors
dragDrop: {
draggableX: true,
draggableY: true,
dragMinY: 0,
dragMaxY: 2,
dragPrecisionX: day / 3 // Snap to eight hours
},
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
cursor: 'default',
pointerEvents: 'none'
}
},
allowPointSelect: true,
point: {
events: {
select: updateRemoveButtonStatus,
unselect: updateRemoveButtonStatus,
remove: updateRemoveButtonStatus
}
}
}
},
yAxis: {
type: 'category',
categories: ['Tech', 'Marketing', 'Sales'],
min: 0,
max: 2
},
xAxis: {
currentDateIndicator: true
},
tooltip: {
xDateFormat: '%a %b %d, %H:%M'
},
series: [{
name: 'Project 1',
data: [{
start: today + 2 * day,
end: today + day * 5,
name: 'Prototype',
id: 'prototype',
y: 0
}, {
start: today + day * 6,
name: 'Prototype done',
milestone: true,
dependency: 'prototype',
id: 'proto_done',
y: 0
}, {
start: today + day * 7,
end: today + day * 11,
name: 'Testing',
dependency: 'proto_done',
y: 0
}, {
start: today + day * 5,
end: today + day * 8,
name: 'Product pages',
y: 1
}, {
start: today + day * 9,
end: today + day * 10,
name: 'Newsletter',
y: 1
}, {
start: today + day * 9,
end: today + day * 11,
name: 'Licensing',
id: 'testing',
y: 2
}, {
start: today + day * 11.5,
end: today + day * 12.5,
name: 'Publish',
dependency: 'testing',
y: 2
}]
}]
});
/* Add button handlers for add/remove tasks */
btnRemoveTask.onclick = function () {
var points = chart.getSelectedPoints();
each(points, function (point) {
point.remove();
});
};
btnShowDialog.onclick = function () {
// Update dependency list
var depInnerHTML = '<option value=""></option>';
each(chart.series[0].points, function (point) {
depInnerHTML += '<option value="' + point.id + '">' + point.name +
' </option>';
});
selectDependency.innerHTML = depInnerHTML;
// Show dialog by removing "hidden" class
addTaskDialog.className = 'overlay';
isAddingTask = true;
// Focus name field
inputName.value = '';
inputName.focus();
var points = chart.getSelectedPoints();
each(points, function (point) {
document.getElementById("inputName").value = point.name;
document.getElementById("selectDepartment").value = point.Department;
document.getElementById("selectDependency").value = point.Dependency;
});
};
btnAddTask.onclick = function () {
var elements=chart.series[0].data;//Get all the points
var points = chart.getSelectedPoints();
each(points, function (point) {
var name=document.getElementById("inputName").value;
var Department=document.getElementById("selectDepartment").value;
var Dependency=document.getElementById("selectDependency").value;
each(elements, function(element){
if(point.id==element.id){
element.name=name;
element.Department=Department;
element.Dependency=Dependency;
}
});
});
series.addPoint({
start: maxEnd + (milestone ? day : 0),
end: milestone ? undef : maxEnd + day,
y: Department,
name: name,
dependency: Dependency ? Dependency.id : undef,
milestone: milestone
});
// Hide dialog
addTaskDialog.className += ' hidden';
isAddingTask = false;
};
btnCancelAddTask.onclick = function () {
// Hide dialog
addTaskDialog.className += ' hidden';
isAddingTask = false;
};
 
 
HTML CODE:-
 
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/draggable-points.js"></script>
<div class="main-container">
<div id="container"></div>
<div id="buttonGroup" class="button-row">
<button id="btnShowDialog">
<i class="fa fa-plus"></i>
Update task
</button>
<button id="btnRemoveSelected" disabled="disabled">
<i class="fa fa-remove"></i>
Remove selected
</button>
</div>
<div id="addTaskDialog" class="hidden overlay">
<div class="popup">
<h3>Add task</h3>
<label>Task name <input id="inputName" type="text" /></label>
<label>Department
<select id="selectDepartment">
<option value="0">Tech</option>
<option value="1">Marketing</option>
<option value="2">Sales</option>
</select>
</label>
<label>Dependency
<select id="selectDependency">
<!-- Filled in by Javascript -->
</select>
</label>
<label>
Milestone
<input id="chkMilestone" type="checkbox" />
</label>
<div class="button-row">
<button id="btnAddTask">Add</button>
<button id="btnCancelAddTask">Cancel</button>
</div>
<div class="clear"></div>
</div>
</div>
</div>
CSS:-
 
#container, #buttonGroup {
max-width: 1200px;
min-width: 320px;
margin: 1em auto;
}
.hidden {
display: none;
}
.main-container button {
font-size: 12px;
border-radius: 2px;
border: 0;
background-color: #ddd;
padding: 13px 18px;
}
.main-container button[disabled] {
color: silver;
}
.button-row button {
display: inline-block;
margin: 0;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
transition: opacity 500ms;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 300px;
position: relative;
}
.popup input, .popup select {
width: 100%;
margin: 5px 0 15px;
}
.popup button {
float: right;
margin-left: 0.2em;
}
.popup .clear {
height: 50px;
}
.popup input[type=text], .popup select {
height: 2em;
font-size: 16px;
}
thank you