CODEWITHSUNDEEP
javascriptamchartsgantt-chart
TheVic
TheVic

Reputation: 313

Amcharts: date and time based axis for schedule

I want to show up a schedule in a Gantt Chart based on Amcharts. It will contain an entire week, and different periods of hours on each day on this week.

It means, when I see entire week, on X axis it will show up the days: 1 Apr, 2 Apr, ... 7 Apr.

And when I'll zoom in for a special day, it will show up hours: 08:00, 08:30 ... 13:30, 14:00.

Looking for a solution, I found examples only with days or only with hours. But never a mixed axis how I need. Is it possible with Amcharts?

For now, my code looks like this:

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
dateAxis.renderer.minGridDistance = 50;
dateAxis.baseInterval = { count: 10, timeUnit: "minute" };
dateAxis.max = new Date(2018, 0, 5, 24, 0, 0, 0).getTime();
dateAxis.strictMinMax = true;
dateAxis.renderer.tooltipLocation = 0;

But it show only hours, and it's hard for users to understand the chart.

Upvotes: 1

Views: 2488

Answers (2)

TheVic
TheVic

Reputation: 313

I found the following solutions in Amcharts V3.

The first one is to put date as X axis, and time as Y axis: https://www.amcharts.com/docs/v3/tutorials/using-gantt-chart-display-multi-segmented-columnsbars/

The second one works actually as I wanted and explained in the question below: https://www.amcharts.com/docs/v3/tutorials/gantt-chart-legend/

Thank you, hope it will help somebody else onetime.

Upvotes: 0

Dhananjai Pai
Dhananjai Pai

Reputation: 6005

You cannot plot multiple axis values directly (unless amcharts finds a use case and adds a wrapper) but you can listen to the click or zoom event and update the chart with new values for axes. Reset it back when they zoom out. You are re rendering the chart anyway on zoom since the plot scales has to be recalculated every time it is zoomed.

I will update the answer with code if this is an acceptable approach. You could also try on your own in the mean time with the logic mentioned.

Upvotes: 1

Related Questions