How to set different color by row in TimeLine Google charts?

Question

I have a timeline chart made with Google charts, what I do is send a json with color values and other information, the size of the json is variable, what I want to do is that each row is painted with the color it has in the json, implement the following:

dataTable.addColumn({type: 'string', role: 'style'});

But it seems not to work, it gives me automatic colors.

The following is an image of my graph with the colors thrown by defautl, and not with the colors that I have in the json.

For example in this case, 'Production' has to be orange and 'Fusion' has to be purple.

This is my code:

function drawChart() {
        $(".timeline").each(function () {
            var obje = {{ devicejson|safe }};
            var elem = $(this),
                id = elem.attr('id');
            var container = document.getElementById(id);
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({type: 'string', id: 'Role'});
            dataTable.addColumn({type: 'string', id: 'Name'});
            dataTable.addColumn({type: 'date', id: 'Start'});
            dataTable.addColumn({type: 'date', id: 'End'});
            dataTable.addColumn({type: 'string', id: 'TimeEst'});
            dataTable.addColumn({type: 'string', role: 'style'});
            for (n = 0; n < obje.length; ++n) {
                if (obje[n].device_id == id) {
                    dataTable.addRows([
                        ['Department', obje[n].digitaloutput_user_description, new Date('"' + obje[n].startdatetime + '"'), new Date('"' + obje[n].enddatetime + '"'), obje[n].lighstate_user_description, obje[n].color],
                    ]);
                    var options = {
                        tooltip: {isHtml: true},
                        timeline: {
                            showRowLabels: false,
                        },
                        avoidOverlappingGridLines: false,
                        {#hAxis: {format: 'dd-MMM-yyyy HH:mm:ss'}#}

                    };
                }
            }

            for (n = 0; n < obje.length; ++n) {
                if (obje[n].device_id == id) {
                    console.log(obje[n].color)

                }
            }

            var formatTime = new google.visualization.DateFormat({
                pattern: 'yyyy-MM-dd HH:mm:ss a'
            });

            var view = new google.visualization.DataView(dataTable);
            view.setColumns([0, 1, {
                role: 'tooltip',
                type: 'string',
                calc: function (dt, row) {
                    // build tooltip
                    var dateBegin = dt.getValue(row, 2);
                    var dateEnd = dt.getValue(row, 3);
                    var oneHour = (60 * 1000);
                    var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;

                    var tooltip = '<div><div class="ggl-tooltip"><span>';
                    tooltip += dt.getValue(row, 0) + ':</span>&nbsp;' + dt.getValue(row, 1) + '</div>';
                    tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
                    tooltip += formatTime.formatValue(dateEnd) + '</div>';
                    tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' minutes</div>';
                    tooltip += '<div><span>Estate: </span>' + dt.getValue(row, 5) + '</div></div>';

                    return tooltip;
                },
                p: {html: true}
            }, 2, 3]);

            google.visualization.events.addListener(chart, 'ready', function () {
                var labels = container.getElementsByTagName('text');
                Array.prototype.forEach.call(labels, function (label) {
                    label.setAttribute('font-weight', 'normal');
                });
            });

            chart.draw(view.toDataTable(), options);
        })
    }

Answer 1

on the timeline chart, the style role will only work when used as the third column (column index 2).

see following working snippet...

 google.charts.load('current', { 'packages': ['timeline'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'string', id: 'Bar' }); dataTable.addColumn({ // <-- add style role here... type: 'string', role: 'style' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ ['Washington', 'test1', 'cyan', new Date(1789, 3, 30), new Date(1797, 2, 4)], ['Adams', 'test2', 'magenta', new Date(1797, 2, 4), new Date(1801, 2, 4)], ['Jefferson', 'test3', 'lime', new Date(1801, 2, 4), new Date(1809, 2, 4)] ]); chart.draw(dataTable); }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="timeline" style="height: 180px;"></div>