Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

82
Vistas
Gantt-Chart in Auto-adjusting chart height based on a number of data items

Gantt chart in height of auto-fit chart based on a series of data items.

I'm using https://www.amcharts.com/demos/gantt-chart/, for an internal application. And I need it to adjust itself by the items, according to this link: https://www.amcharts.com/docs/v4/tutorials/auto-adjusting-chart-height-based-on-a-number-of- date-items/

Only on the Gantt chart, try in different ways, but nothing came of it. I will post my configuration, so that you take a base of what is now:

Config:

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.colors.saturation = 0.8;
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.tooltip.label.maxWidth = 150;
chart.tooltip.label.wrap = true;
chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
chart.dataSource.url = "data.php";

var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;

chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm";
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;


var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 70;
dateAxis.baseInterval = { count: 1, timeUnit: "minute" };
// dateAxis.max = new Date(2018, 0, 1, 24, 0, 0, 0).getTime();
//dateAxis.strictMinMax = true;
dateAxis.renderer.tooltipLocation = 0;

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(80);
series1.columns.template.tooltipText = "{task}: [bold]{openDateX}[/] - [bold]{dateX}[/]";
series1.dataFields.openDateX = "start";
series1.dataFields.dateX = "end";
series1.dataFields.categoryY = "category";
7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos