Project Timeline in App Maker - google-app-maker

Question

My users are wanting to be able to see the status of various rooms (Y axis) across dates (X axis) in a project timeline format.
Some examples:
I was hoping to maybe utilize the bar chart widget, but it looks like that requires the fields to be numerical (dates won't work).
Like I said, I realize it is a long shot, but I figured I would try.

Answer 1

I was using this library https://docs.dhtmlx.com/scheduler/ to implement scheduler in App Maker project. But it can be switched to bar timeline widget. Here is an example: https://docs.dhtmlx.com/scheduler/samples/06_timeline/02_lines.html
To add the widget to your project, open project settings, find External resources and add to
JavaScript URLs:
https://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_timeline.js
//cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.js
Also you need to add library styles to CSS URLs:
//cdn.dhtmlx.com/scheduler/edge/dhtmlxscheduler.css
Now we can init this widget in a project. Add Html widget to your page. For example it has Projects datasource. Check allowUnsafeHtml property and put html code into it:
<div id="schedulerContainer" tabindex="0" aria-label="events calendar" class="dhx_cal_container" style="width:960px; height:555px;">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">Timeline is not loaded</div>
<div class="dhx_cal_data"></div>
</div>
And add widget initialization to onDataLoad event of the Html widget:
initTimeline(widget);
Now let's create client script and implementation of function initTimeline:
function initTimeline(widget) {
const datasource = widget.datasource;
// shceduler is a global variable
scheduler.locale.labels.timeline_tab = "Timeline";
scheduler.locale.labels.section_custom = "Section";
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
//===============
//Configuration
//===============
// sections can fetched from datasource items
var sections = [{
key: 1,
label: "James Smith"
},
{
key: 2,
label: "John Williams"
},
{
key: 3,
label: "David Miller"
},
{
key: 4,
label: "Linda Brown"
}
];
scheduler.createTimelineView({
name: "timeline",
x_unit: "minute",
x_date: "%H:%i",
x_step: 30,
x_size: 24,
x_start: 16,
x_length: 48,
y_unit: sections,
y_property: "section_id",
render: "bar"
});
//===============
//Data loading
//===============
scheduler.config.lightbox.sections = [{
name: "description",
height: 130,
map_to: "text",
type: "textarea",
focus: true
},
{
name: "custom",
height: 23,
type: "select",
options: sections,
map_to: "section_id"
},
{
name: "time",
height: 72,
type: "time",
map_to: "auto"
}
];
scheduler.init('schedulerContainer', new Date(2017, 5, 30), "timeline");
/*
this data also can be fetched from datasource and parsed
to proper format using code like this:
const data = datasource.items.map((item) => {
return {
start_date: item.start_date,
end_date: item.end_date,
text: item.name,
section_id: item.category_id
};
});
*/
scheduler.parse([{
start_date: "2017-06-30 09:00",
end_date: "2017-06-30 12:00",
text: "Task A-12458",
section_id: 1
},
{
start_date: "2017-06-30 10:00",
end_date: "2017-06-30 16:00",
text: "Task A-89411",
section_id: 1
},
{
start_date: "2017-06-30 10:00",
end_date: "2017-06-30 14:00",
text: "Task A-64168",
section_id: 1
},
{
start_date: "2017-06-30 16:00",
end_date: "2017-06-30 17:00",
text: "Task A-46598",
section_id: 1
},
{
start_date: "2017-06-30 12:00",
end_date: "2017-06-30 20:00",
text: "Task B-48865",
section_id: 2
},
{
start_date: "2017-06-30 14:00",
end_date: "2017-06-30 16:00",
text: "Task B-44864",
section_id: 2
},
{
start_date: "2017-06-30 16:30",
end_date: "2017-06-30 18:00",
text: "Task B-46558",
section_id: 2
},
{
start_date: "2017-06-30 18:30",
end_date: "2017-06-30 20:00",
text: "Task B-45564",
section_id: 2
},
{
start_date: "2017-06-30 08:00",
end_date: "2017-06-30 12:00",
text: "Task C-32421",
section_id: 3
},
{
start_date: "2017-06-30 14:30",
end_date: "2017-06-30 16:45",
text: "Task C-14244",
section_id: 3
},
{
start_date: "2017-06-30 09:20",
end_date: "2017-06-30 12:20",
text: "Task D-52688",
section_id: 4
},
{
start_date: "2017-06-30 11:40",
end_date: "2017-06-30 16:30",
text: "Task D-46588",
section_id: 4
},
{
start_date: "2017-06-30 12:00",
end_date: "2017-06-30 18:00",
text: "Task D-12458",
section_id: 4
}
], "json");
}
This answer is a general guide how to add this widget. But it may contain errors, so I'd advise you to take a look at the widget documentation as well

Answer 2

Unfortunately, there is no native timeline chart support in App Maker. I would suggest trying to find a JS library that can draw a timeline and use that in your App Maker application. The Google visualization library has a timeline chart I believe and the library is included by default in App Maker applications.