Suggestion for Gantt + TimeLine visualisation tool

Grist Feedback
1

Hi Grist Team ! :grinning:

(Every time I’m coming there I’m feeling so happy and grateful !)

Short suggestion for Gantt + TimeLine visualisation tool … :slight_smile:

7 Likes
2

The timeline view is also a feature I’m looking forward. Never used the Gantt myself in alternatives.

3

Well, I guess someone with good coding skills might able to create one as a Custom Widget?

4

To display a Gantt chart using D3.js, you would need to build the chart from the data. Here’s an example of how you might modify the code to display a Gantt chart:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>onRecord</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <script src="https://docs.getgrist.com/grist-plugin-api.js"></script>
  </head>
  <body>
    <div id="gantt-chart"></div>
    <script>
      grist.ready();
      grist.onRecord(function(record) {
        var data = JSON.parse(record.data);

        // Define the dimensions of the chart
        var margin = {top: 20, right: 20, bottom: 20, left: 40},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        // Define the scales for the chart
        var x = d3.scaleTime().range([0, width]);
        var y = d3.scaleBand().rangeRound([0, height]).padding(0.1);

        // Define the svg element to render the chart
        var svg = d3.select("#gantt-chart").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // Define the y-axis
        y.domain(data.map(function(d) { return d.task; }));
        svg.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(y));

        // Define the x-axis
        x.domain([d3.min(data, function(d) { return d.start; }), d3.max(data, function(d) { return d.end; })]);
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        // Add the bars to the chart
        svg.selectAll(".bar")
            .data(data)
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.start); })
            .attr("width", function(d) { return x(d.end) - x(d.start); })
            .attr("y", function(d) { return y(d.task); })
            .attr("height", y.bandwidth());
      });
    </script>
  </body>
</html>

To host the code on Github, you can follow these steps:

  1. Create a new repository on Github to host your code.
  2. Clone the repository to your local machine using the Git command line or a Git client like Github Desktop.
  3. Create a new folder within the cloned repository for your code.
  4. Save the code that you want to host on Github in this folder.
  5. Download the D3.js library from the D3 website (https://d3js.org/).
  6. Save the downloaded D3.js file in the same folder as your HTML code.
  7. In the HTML code, include the D3.js file using the following script tag:
  1. Commit the changes to your local repository using Git.
  2. Push the changes to the remote repository on Github.
  3. The code and D3.js library will now be hosted on Github and accessible via a URL that you can find in your Github repository settings.
1 Like
5

I haven´t tested the code. In fact, I never even used Github exactly. The code above and text was done by our friend ChatGPT. I expect some errors initially.

6

Hello @RogerioPenna ,

I’ll give it a trial when I have a moment and keep you informed.

I’m interesting in integrating D3js, having also possibility to build module for SPC, Cpk and so on (Minitab like). This would need to be able to integrate some math and statistic module. Yet this is not on the top of my priorities :slight_smile:

Thanks.

1 Like