Horizontal time line Day view calendar

Support
#1

Is it possible to change Day view of calendar from vertical to horizontal.

#2

Hi,

Sorry for a long reply.

Calendar component doesn’t have the ability to change direction of day view as well as the other views (Week and Month)

Regards,

Gleb

#3

Ok. Thank you.

#4

But you can emulate such data representation with Gantt Chart, for example, see this sample. Or try to find any Vaadin/js add-ons that suitable for you and integrate it, see documentation.

#5

That is true.
But how can I show current time with line or color?

#6

For that purpose, you can use guides. For example, see this sample, in which two guides were added declaratively in XML:


...
<chart:guides>
	<chart:guide category="2001"
				 dashLength="2"
				 fillAlpha="0.2"
				 fillColor="#CC0000"
				 inside="true"
				 label="fines for speeding increased"
				 labelRotation="90"
				 toCategory="2003"/>
	<chart:guide category="2007"
				 dashLength="2"
				 inside="true"
				 label="motorcycle fee introduced"
				 labelRotation="90"
				 lineAlpha="1"
				 lineColor="#CC0000"/>
</chart:guides>
...

The first one looks like a bar and the second like a line. Of course, guides can be added and updated programmatically.

Regards,

Gleb

#7

Do I have to use parent/ child entities or is it possible to use Gnatt Chart with one Entity?
There is to little documentation of how to use charts.

#8

By design, Gantt chart expects a category item with an array of segments. But if your entity doesn’t have a list of child entities, you can bind chart with data using ListDataProvider by converting data from your entity to format suitable for Gantt chart. You can read more in the documentation and see this samples: MapDataItem, SimpleDataItem.

Regards,

Gleb

#9

Interesting, to be honest I haven’t used charts so much in Cuba-platform so this is new to me.
But that is not a problem. More to read, experiment with and more to learn :slight_smile:

#10

Is it possible to click on the lines and open the entity data?

#11

Do you have the opportunity to create an example to
show this idea?

#12

Charts have a number of listeners, one of them GraphItemClickListener. See this sample, and the documentation. So it doesn’t open entity data itself, but you will have information to do it by yourself.

#13

I will prepare some sample in the next couple of days.

#14

Hi
I have a Gantt chart where I have used the listener to open the edit UI and update. That works well except that it doesn’t refresh the display. While Gleb you are working on a sample, could you also consider adding a table/tree table with the Gantt chart to show some additional data of the bars?

Any possibility of drag n drop?

#15

As Mortoza says. This would have been great.
Please, with sugar on top. :slight_smile:

#16

You may also try this one from vaadin. It’s drag-n-drop capable

Mortoza

#17

How must the format be to present DataItem to GnattChart through ListDataProvider?

#18

Hi,

As I promised, I’ve prepared the sample project with ‘GraphItemClickListener’, it can be found at github. We also have the sample of adding data to Gantt chart using ListDataProvider here. Unfortunately, chart item listeners work only with entities (for other item types, like MapDataItem, a listener doesn’t return clicked item) - it’s a bug and we created the issue for that.

Regards,

Gleb

#19

Nice!
If I want to zoom in to hours and minutes, is it enough to include time in start and en time?

#20

To zoom value axis to certain values you can use zoomValueAxisToValues method, for example: ganttChart.zoomValueAxisToValues(“valueAxis”, startDate, endDate);