It is possible to add two columns before the column groups? (Google Charts)

589 views Asked by At

It is possible to add two columns before the column groups?

This image is how is the current situation, I would add two columns before the column that has (GROUP # 1 GROUP # 2). For example, one category column and column name of the participant.

I dont found how to do in the documentation Google Charts: https://developers.google.com/chart/interactive/docs/gallery/timeline?hl=pt

My Example: http://jsfiddle.net/asgallant/7A88H/

Ex: Current situation:

enter image description here

Ex: Image of desired output enter image description here

Code current situation.

function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    
    dataTable.addColumn({ type: 'string', id: 'Group' });
    dataTable.addColumn({ type: 'string', id: 'Category' });
    dataTable.addColumn({ type: 'string', id: 'ID' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
        [ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
        [ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
        [ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
        [ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
        [ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1),  new Date(2014, 0, 15) ],
        [ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8),  new Date(2014, 2, 15) ],
        [ 'GROUP #3', 'CategoryC', 'C00006', new Date(2014, 5, 1),  new Date(2014, 5, 15) ],
        [ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15),  new Date(2014, 1, 25) ]
    ]);
    
    var colors = [];
    var colorMap = {
        // should contain a map of category -> color for every category
        CategoryA: '#e63b6f',
        CategoryB: '#19c362',
        CategoryC: '#592df7'
    }
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
        colors.push(colorMap[dataTable.getValue(i, 1)]);
    }
    
    var rowHeight = 41;
    var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
    
    var options = {
        timeline: { 
            groupByRowLabel: true,
            rowLabelStyle: {
                fontName: 'Roboto Condensed',
                fontSize: 14,
                color: '#333333'
            },
            barLabelStyle: {
                fontName: 'Roboto Condensed',
                fontSize: 14
            }
        },                          
        avoidOverlappingGridLines: true,
        height: chartHeight,
        width: '100%',
        colors: colors
    };
    
    // use a DataView to hide the category column from the Timeline
    var view = new google.visualization.DataView(dataTable);
    view.setColumns([0, 2, 3, 4]);
    
    chart.draw(view, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

0

There are 0 answers