how to hide rows or specify colours in Google Gantt Chart, dynamic chart

Question

I have a google gantt chart that I have finally got all of the information in. I have had to use the palette [ ] to add in the colours (from Customize the bar colors in Google Gantt Charts) I want based on if the task is the project main, overdue, in date, being reviewed or complete. This worked while I had all of those variables in as an individual different resource. But then I changed a task status to being reviewed from overdue. This meant no tasks were overdue anymore. Which made any colour specifications after the overdue colour different, what resource colour came after overdue became the red overdue colours and everything else moved back one. throwing the colour scheme off entirely. My only work around looks meh in my opinion and that is forcing a record with each of the resources specified in order with the start date that of the project and one day of duration. Is there a way I can hide the Key rows (always the first 5/6) so I only have the data from the tasks. I'm hoping I'm just doing something wrong but from what it seems The Google Gantt Chart has been in beta for years.

Code below.

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {
            'packages': ['gantt']
        });
        google.charts.setOnLoadCallback(drawChart);

        function daysToMilliseconds(days) {
            return days * 24 * 60 * 60 * 1000;
        }

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Task ID');
            data.addColumn('string', 'Task Name');
            data.addColumn('string', 'Status');
            data.addColumn('date', 'Start Date');
            data.addColumn('date', 'End Date');
            data.addColumn('number', 'Duration');
            data.addColumn('number', 'Percent Complete');
            data.addColumn('string', 'Dependencies');

            data.addRows([ ['Key_title', 'Key','Project',new Date(2023, 4,  24), null, 1,  null,  null],
    ['Key_1', 'Project','Project',new Date(2023, 4,  24), null, 1,  null,  null],
    ['Key2', 'Overdue','Overdue', new Date(2023, 4,  24), null, 1,  null,  null],
    ['Key3', 'In date','In date', new Date(2023, 4,  24),null , 1,  null,  null],
    ['Key4', 'Complete','Complete', new Date(2023, 4,  24),null , 1,  null,  null],
    ['Key5', 'Under Review','Under Review', new Date(2023, 4,  24), null, 1,  null,  null],
    ['proj_1', 'First Project','Project', new Date(2023, 4,  24), new Date(2023, 7,  24), null,  null,  null], ['p_2', 'Task 2','Overdue',
    new Date(2023, 4,  24), new Date(2023, 6,  13), null, 70 , null], ['s_5', 'Sub on Task 2','Complete' ,
            null, new Date(2023, 6,  26),daysToMilliseconds(1), 100, 'p_2'], ['p_1', 'First Task','In date',
    new Date(2023, 4,  25), new Date(2023, 6,  28), null, 74 , null], ['s_1', 'sub tsk','Complete' ,
            null, new Date(2023, 6,  25),daysToMilliseconds(3), 100, 'p_1'], ['s_2', 'subtsk 2','Complete' ,
            null, new Date(2023, 6,  26),daysToMilliseconds(2), 100, 'p_1'], ['s_3', 'Task Name date testing','Under Review' ,
            null, new Date(2023, 6,  26),daysToMilliseconds(8), 90, 'p_1'] ]);            var options = {
    height: 900,
    gantt: {
    trackHeight: 50,
    labelStyle: {
        fontName: 'Arial',
        fontSize: 17
      },
    palette: [
        {
          'color': '#4D4D48',
          'dark': '#030303',
          'light': '#969696'
        },
        {   
            'color': '#8C0202',
            'dark': '#541717',
            'light': '#CF6A6A'
          },
          {
            'color': '#119100',
            'dark': '#2F6628',
            'light': '#62C257'
          },
          {
            'color': '#04BFD4',
            'dark': '#0098A6',
            'light': '#00EAFF'
          },
          {
            'color': '#B8B800',
            'dark': '#6B6B2F',
            'light': '#EBEB70'
          }
      ]
     }
     };            var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
</head>

</html>

The above currently gives me current results

I had it all working while there was a resource of each type, but not every project will have a late task, or complete. Happy to add more information if required.

EDIT: I tried adding in data.hideRows([1,2,3,4,5]); above the var chart - new google.visulization...

but the following error comes up, same for data.hideColumns VM12694:37 Uncaught (in promise) TypeError: data.hideRows is not a function at drawChart (eval at (jquery-1.11.0.min.js:2:2616), :37:96)

you can hide rows in the data table using a [data view](https://developers.google.com/chart/interactive/docs/reference#DataView_hideRows) but this will also hide them from the chart, so I'm not sure it will give you the result you're hoping for. as for colors, there just isn't a config option available. but you could try changing the colors manually in the chart's svg on it's ready event. — WhiteHat, Jul 26 '23 at 23:21
Sorry I'm not that great with the charts, where would I enter that hideRows(rowIndexes)? I don't mind the Key rows not showing on the chart as then the data is all that is left (preferred) My idea for an alternative is to create an array and then have the palette options differ depending on what is in the array. — Daniel Pedley, Jul 27 '23 at 06:10

Daniel Pedley · Answer 1 · 2023-07-27T13:00:20.690

DID NOT WORK, but is worth something that I tried if anyone can help fix

This may be a bit long winded, my code shows things better than my typed word.

I started by creating an array called colour array.

$colour_array = array();
$colour_array["Project"] = $projectrow['project_start'];

The Key being the resource type and the project. This forces the first variable (and therefore colour) to be project (what I wanted as Black)

Next up is going through the parent task rows, these are results from a SQL query. the below is inside a while ( ) statement going off getting the parent data,

if (!array_key_exists($prow['current_status'],$colour_array)){
        $colour_array[$prow['current_status']] = $prow['start_date'];
    }

Checking if the current status is already in the colour array, the SQL to get the data is sorted by start_date ASCENDING so the first instance of the current_status should be found and logged.

I then moved onto the subtask code which is inside the while() parent group, so it goes parentSQL while { get info array check and enter as above

subtasksql while{

} }

inside the subtask while statement is

if (!array_key_exists($subrow['current_status'],$colour_array)){
            $colour_array[$subrow['current_status']] = $subrow['subtsk_start'] ;
        }

After both while statements are finished going through the data and getting the results, I created the $pallette

$pallette = "palette: [";
$sorted = asort($colour_array);
if(array_key_exists("Project" , $colour_array)){
    $pallette .= "{
        'color': '#4D4D48',
        'dark': '#030303',
        'light': '#969696'
      },";
}
if(array_key_exists("Overdue" , $colour_array)){
    $pallette .= "{
        'color': '#C70000',
        'dark': '#910000',
        'light': '#E03131'
      },";
}
if(array_key_exists("Complete" , $colour_array)){
    $pallette .= "{
        'color': '#04BFD4',
        'dark': '#0098A6',
        'light': '#00EAFF'
      },";
}
if(array_key_exists("In date" , $colour_array)){
    $pallette .= "{
        'color': '#119100',
        'dark': '#2F6628',
        'light': '#62C257'
      },";
    }
if(array_key_exists("Under Review" , $colour_array)){
    $pallette .= "{
        'color': '#B8B800',
        'dark': '#6B6B2F',
        'light': '#EBEB70'
      }";
}
    
$pallette .= "      
  ]
 }";````

Then I add the $pallette into the $options

````$options = "var options = {
    height: " . $height . ",
    gantt: {
    trackHeight: 50,
    labelStyle: {
        fontName: 'Arial',
        fontSize: 17
      },
      " . $pallette . "
     };";````

and <?php echo $options;?> is put into the drawChart() function that creates the chart. 
The results give me the following (which works).

[Worked Solution][1]


  [1]: https://i.stack.imgur.com/W2Jpa.png

how to hide rows or specify colours in Google Gantt Chart, dynamic chart

1 Answers1