Gantt charts for Vue
We’ve recently built wrappers on top of our pure JavaScript Gantt chart components targeting Angular, React and also Vue.js, these being three of the most used client side Web frameworks worldwide — at least now, in 2020.
We must be honest however: our experience with Vue was simply the best!
Compared with the heavy framework that Angular insists to be, and with the mixed feelings that we sometimes had while we were up the learning curve for creating React components (see refs vs. forwarding refs or demo babeling JSXs vs. using React CLI, to only list two [important] examples), working with Vue just needed us to learn a bit about {{expressions}} and v-bind, and everything ran smooth, and everything ran well.
After setting up the DlhSoft scripts, Gantt charts, schedule charts, load charts, and PERT diagrams can now easily be created in Vue instances as shown below. Customization is a breeze as well: you can change everything, from colors to the algorithm used to generate SVG using special JavaScript.
For reference, here is how you can instantiate a <gantt-chart> element in HTML:
<div id="app">
<gantt-chart v-bind:items="items" v-bind:settings="settings"
v-on:change="onItemChanged"
style="min-height: 388px">
…
</gantt-chart>
</div>and below is the code that sets the app’s vue up and running:
var app = new Vue({
el: '#app',
data: {
items: […],
settings: { … }
},
methods: {
onItemChanged: function(args) {
var item = args.item, propertyName = args.propertyName,
isDirect = args.isDirect, isFinal = args.isFinal;
console.log(propertyName + ' changed for ' + item.content);
}
}
});A Vue-based demo is available on our Web site, and we’ve published some sample source code on GitHub as well. Don’t hesitate to try the components yourself either: for all of our products we offer free, full-featured, and time unlimited trial versions with free support offered directly by developers. We’ve also prepared and published a Vue-based setting up tutorial here.
With DlhSoft Gantt charts you can surely build project management apps, but you may also develop other timeline-based apps like custom schedulers and calendars with similar ease.
Schedule charts can show and allow end users to (re-)assign multiple bars into different resource rows, a load chart can show the assignments’ allocation units that a resource would have to handle over time, and PERT charts and network diagrams will complete your management apps in case you (or your customers) are into that [good] type of formal planning process of the twentieth century, turning them into a big success of the following one.
