Geek Answers Handbook

Change gantt chat bar color based on value

I would like to change the color of the panel in the gantt chart based on the value I pass. When Percent done is greater than 100, the bar should be red. Is it possible?

https://jsfiddle.net/1cez1duf/

 google.charts.load('current', {'packages':['gantt'], 'language': 'pt-br'}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent done'); data.addColumn('string', 'Dependencies'); data.addRows([ ['C10', 'C10', 'Xa', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 109, null], ['C15', 'C15', 'Xa', new Date(2016, 5, 2), new Date(2016, 9, 31), null, 111, null], ['C20', 'C20', 'Xa', new Date(2016, 8, 15), new Date(2016, 10, 25), null, 88, null], ['C21', 'C21', 'Xa', new Date(2016, 8, 1), new Date(2016, 10, 25), null, 90, null] ]); var options = { width: "100%", hAxis: { textStyle: { fontName: ["Roboto Condensed"] } }, gantt: { labelStyle: { fontSize: 12, color: '#757575' } } }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); }
+1
source share
1 answer

there are no standard parameters for changing the color of the stroke by value

but you can manually change the elements of the chart

we recommend using MutationObserver , as the chart will try to change the color of the bar to the default value, to any interactivity, such as pointing or selecting

column order should match rows in data

see the following working snippet ...

 google.charts.load('current', { callback: drawChart, packages: ['gantt'] }); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent done'); data.addColumn('string', 'Dependencies'); data.addRows([ ['C10', 'C10', 'Xa', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 109, null], ['C15', 'C15', 'Xa', new Date(2016, 5, 2), new Date(2016, 9, 31), null, 111, null], ['C20', 'C20', 'Xa', new Date(2016, 8, 15), new Date(2016, 10, 25), null, 88, null], ['C21', 'C21', 'Xa', new Date(2016, 8, 1), new Date(2016, 10, 25), null, 90, null] ]); var options = { width: '100%', hAxis: { textStyle: { fontName: ['Roboto Condensed'] } }, gantt: { labelStyle: { fontSize: 12, color: '#757575' } } }; var container = document.getElementById('chart_div'); var chart = new google.visualization.Gantt(container); // monitor activity, change bar color var observer = new MutationObserver(function (mutations) { Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) { if (data.getValue(index, 6) > 100) { bar.setAttribute('fill', '#a52714'); } }); }); observer.observe(container, { childList: true, subtree: true }); chart.draw(data, options); } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

EDIT

appears at partial completion, the "bar" is separated by two colors
a lighter shade is represented by the element 'rect'
you can change this to a lighter shade of red use the y coordinate of 'path' to find the correct 'rect'

it is also necessary to sort the data in the same order as in the diagram ...

see the following working snippet ...

 google.charts.load('current', { callback: drawChart, packages: ['gantt'] }); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent done'); data.addColumn('string', 'Dependencies'); data.addRows([ ['C10', 'C10', 'Xa', new Date(2016, 2, 23), new Date(2016, 10, 30), null, 94.84, null], ['C15', 'C15', 'Xa', new Date(2016, 4, 1), new Date(2016, 11, 29), null, 82.64, null], ['C20', 'C20', 'Xa', new Date(2016, 7, 1), new Date(2016, 10, 25), null, 93.1, null], ['C25', 'C25', 'Xa', new Date(2016, 3, 11), new Date(2016, 10, 25), null, 96.49, null], ['C30', 'C30', 'Xa', new Date(2016, 9, 3), new Date(2017, 1, 28), null, 30.41, null], ['C35', 'C35', 'Xa', new Date(2016, 3, 8), new Date(2016, 5, 24), null, 113.78, null] ]); data.sort([{column: 3}]); var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], xWidth = w.innerWidth || e.clientWidth || g.clientWidth, yHeight = w.innerHeight|| e.clientHeight|| g.clientHeight; var options = { height: 600, width: "100%", hAxis: { textStyle: { fontName: ["Roboto Condensed"] } }, gantt: { labelStyle: { fontName: ["Roboto Condensed"], fontSize: 12, color: '#757575' } } }; var container = document.getElementById('chart_div'); var chart = new google.visualization.Gantt(container); // monitor activity, change bar color var observer = new MutationObserver(function (mutations) { Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) { var barY; if (data.getValue(index, 6) > 100) { bar.setAttribute('fill', '#b71c1c'); barY = bar.getAttribute('d').split(' ')[2]; Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) { if (bar.getAttribute('y') === barY) { bar.setAttribute('fill', '#f44336'); } }); } }); }); observer.observe(container, { childList: true, subtree: true }); chart.draw(data, options); } 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
+1
source

More articles:


All Articles