SharePoint 2013 Timeline Coloring

Question

I want to color a timeline with data of a specific column. This column is named Topic. So I wrote some code and added it to my SharePoint site but it didn't work. Here's the code I used:

var timeline = (function() {
    var colorCodes = {
        "Flyer / brochure": "#ff757a", //red
        "Decor / texture": "rgb(130, 202, 255)", //blue
        "Product": "rgb(150, 222, 186)", //green
        "Benchmark": "rgb(200, 216, 216)", //gray
        "Target groups / markets": "rgb(216, 216, 216)", //gray
        "Pricing": "rgb(216, 200, 216)", //gray
        "Logistic": "rgb(216, 216, 200)", //gray
    };
    var timer;

    return {
    "processTimeline" : function(customColorCodes){

    if(customColorCodes != null){
        colorCodes = customColorCodes;
        }

        if ($("div.ms-webpart-zone table.ms-listviewtable > tbody > tr").length)
            colorTimeline();
        else
            timer = setTimeout(colorTimeline, 1000);
        }
    }

    function colorTimeline() {
        if (timer != null) {
            clearTimeout(timer);
        }

        //$("div.ms-webpart-zone").each(function () {
        //$(".ms-webpart-chrome").each(function () {

        $.expr[':'].hasClassStartingWith = function(obj){
            return (/\bms-webpart-chrome/).test(obj.className);
        };

        $('div:hasClassStartingWith').each(function () {

            var webpart = $(this);
            var cnt = 0;
            var found = false;
            webpart.find("table.ms-listviewtable > thead > tr.ms-viewheadertr > th").each(function () {
                cnt++;
                if ($(this).children("div.ms-vh-div").attr('name') == 'Topic') {
                    found = true;
                    return false;
                }
            });

            if (!found)
                return;

            webpart.find("table.ms-listviewtable > tbody > tr > td:nth-child(" + cnt + ")").each(function () {
                var topic = ($(this).text());
                var title = ($(this).siblings("td.ms-vb-title").eq(0).text());
                var barTitle = webpart.find("span.ms-tl-barTitle").filter(function () { return $(this).text() == title });

                colorBar(barTitle.parent(), topic);
            });
        });
    }

    function colorBar(bar, topic) {
        bar.css("background-color", colorCodes[topic]);
    }
}());

Answer 1

There are couple of issue with your script. For example the colorCodes array object has an extra comma.

Below is a re-factored version of your code.

Add below code inside the Script Editor

$(document).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(ColorCode, "sp.js");
});

function ColorCode() {
    var colorCodes = {
        "Flyer / brochure": "#ff757a", //red
        "Decor / texture": "rgb(130, 202, 255)", //blue
        "Product": "rgb(150, 222, 186)", //green
        "Benchmark": "rgb(200, 216, 216)", //gray
        "Target groups / markets": "rgb(216, 216, 216)", //gray
        "Pricing": "rgb(216, 200, 216)", //gray
        "Logistic": "rgb(216, 216, 200)" //gray
    };

    $('span.ms-tl-barTitle').each(function(){
        var color = colorCodes[$(this).text()];
        if(color != undefined && color != null)
            $(this).parent().css("background-color":color);
    });
}