Time line google chart based on column show same colour ? ASP.NET

119 views Asked by At

I am developing a timeline chart that shows color based on a column , my feilds of date is datetime , I have found a js fiddle similar to my example just little modification i did added time but it works fine for single row not for multiple rows here is my js fiddle link with my data

JS FIDDLE FOR TIME LINE CHART (mine)

Now the example i am trying to copy is that link

js fiddle (example)

i changed the default colur scheme

            colors.push(colorMap[dataTable.getValue(i, 2)]);

so take color and push

then the category map

     var colorMap = {
            Zero: '#ffffff',
            One: '#00b050',   // green
            Two: '#4bc0c0',   // Aqua
            Three: '#FFC000',   // Yellow
            Four: '#C2EFE6',   // Light Sky blue
            Five: '#935392',   // Purple
            Six: '#e48a89',   // Light maroon
            Sev: '#339cff'    // Blue
        }

Can any body modify the fiddle and tell me what i was missing and also i have checked that with only date by removing time So this is not a issue

EDIT

I am posting more code on request but fiddle also contain complete code A-Z

for setting colormap

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
    colors.push(colorMap[dataTable.getValue(i, 2)]);
}

options for setting colors scheme

     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, 1, 3, 4]);

chart.draw(view, options);

Datatable column and rows like this

        dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'string', id: 'Category' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([['Bay', ' ', 'Sev', new Date(2014, 0, 1, 9, 0, 0), new Date(2014, 0, 1, 9, 10, 0)], ['Bay', ' ', 'Sev', new Date(2014, 0, 1, 9, 10, 0), new Date(2014, 0, 1, 9, 20, 0)]]);

Based on third column i want color selection So index is 2

0

There are 0 answers