CODEWITHSUNDEEP
javascriptjquerymorris.js
YeahMKD
YeahMKD

Reputation: 425

Different Colored Line Segments in Morris JS

So Im trying to get different line segments in morris JS.

Here is the effect I am trying to achieve.

https://gyazo.com/6d2b7a211a21b810521dac35613a6e3c

Here is the code I am using

new Morris.Line({
    element: 'record',
        data: [
            { year: '2008', value: 20 },
            { year: '2009', value: 10 },
            { year: '2010', value: 5 },
            { year: '2011', value: 5 },
            { year: '2012', value: 20 }
        ],
        xkey: 'year',
        ykeys: ['value'],
        labels: ['Value'],
        lineWidth: '1px',
        pointSize: '3px',
        smooth: false,
        hideHover: 'always',
        lineColors: ['#000'],
        axes: 'y',
        ymin: '5',
        ymax: '20',

        yLabelFormat: function (y) {
            if (y != 5 && y != 20) {
                return '';
            }
            else {
                return y;
            }
        },

        lineColors: function(row, sidx, type) {
            console.log(row);
            console.log(this.data[sidx]);
            if (this.data[sidx].src.value > 10) return "#00ff00";
            if (this.data[sidx].src.value > 5) return "#ff00ff";
        }
    });

Heres a link to the fiddle

https://jsfiddle.net/mbe44ep0/

Update: After entering this code, I am getting a few errors. Noted in comment in @eugen sunic

Upvotes: 1

Views: 575

Answers (1)

EugenSunic
EugenSunic

Reputation: 13703

Try with a callback function. I have worked with many graphs in JS but not Morris js. This kind of syntax should do it.

General callback function:

lineColors: function(row, sidx, type) {
return "blue"
}

Modified callback function:

lineColors: function(row, sidx, type) {
if (row.property >) return "color";
if (row.property >) return "color";
}

Upvotes: 1

Related Questions