Search code examples
javascriptanychart

Anychart Gantt time in seconds which resets to zero

Hello I am creating a gantt chart in seconds to calculate the time of a robot line. I use the Anychart library. When I get to 60 seconds it goes back to zero and resets my tooltip. enter image description here I retrieve the values ​​using a JSON file and I use this file to write the diagram

  <html>

<head>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-bundle.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
    <style type="text/css">
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>
        anychart.onDocumentReady(function() {
            anychart.data.loadJsonFile("data.php", function(data) {
                // create a data tree
                var treeData = anychart.data.tree(data, "as-tree", null, {
                    children: "children"
                });
                // map the data
                var mapping = treeData.mapAs({
                    actualStart: "start",
                    actualEnd: "end",
                    name: "nom"
                });
                // create a data tree
                // var mapping = anychart.data.tree(data, "as-tree");
                anychart.format.outputDateTimeFormat("ss'sec'");
                // create a chartec 

                var chart = anychart.ganttProject();

                // set the data
                chart.data(mapping);

                // set the container id
                chart.container("container");
                // set the data
                chart.dataGrid().fixedColumns(true);
                // chart.splitterPosition().hide();
                chart.dataGrid().column().enabled(false);
                chart.dataGrid().column(0).enabled(false);
                chart.getTimeline().elements().labels(false);
                chart.rowHoverFill("#ffd54f 0.3");
                chart.rowSelectedFill("#ffd54f 0.3");
                chart.rowStroke("0.5 #64b5f6");
                chart.columnStroke("0.5 #64b5f6");

                chart.dataGrid().column(0).enabled(false);

                var title = chart.title();
                title.enabled(true);
                title.text("Gantt Chart");
                title.fontColor("#64b5f6");
                title.fontSize(18);
                title.fontWeight(600);
                title.padding(5);

                scale = chart.xScale();

                // Set zoom levels.
                scale.zoomLevels([
                    [{
                            unit: 'millisecond',
                            count: 0
                        },
                        {
                            unit: 'second',
                            count: 1
                        }
                    ]
                ]);

                // configure the levels of the timeline header
                var header = chart.getTimeline().header();
                header.level(0).format("{%tickValue}{dateTimeFormat:ss} sec");
                header.level(1).enabled(false);
                header.level(2).enabled(false);
                chart.headerHeight(50);
                // initiate drawing the chart
                chart.draw();
                // fit elements to the width of the timeline
                chart.fitAll();
            });
        });
    </script>
</body>

</html>

I would like to know if it is possible not to reset the time so that the number of seconds can exceed 60.

Solution

  • To make it possible for seconds to pass the 59 mark, it is possible to make your program bypass minutes and convert seconds straight to hours. So it will adds up to 3599 seconds max. This can be achieved by using custom formatting functions.

    // configure the levels of the timeline header
           var header = chart.getTimeline().header();
// this function format appearance of seconds in a timeline header
           header.level(0).format((e)=>{
           let tickDate = new Date(e.tickValue)
           let currentSecond = tickDate.secondsInCurrentHour(e.tickValue)
           return currentSecond
           });