CODEWITHSUNDEEP
javascriptjqueryhighcharts
Harsha M V
Harsha M V

Reputation: 54949

Repeating Javascript Code

I have a dashboard which contains around 16 graphs. All the settings of the Graph are very similar except for the data. Below is the Code. Is there any way i can optimize the code. Right now the code is coming up to almost 2000 lines.

// Chart 1

var chart1;
// globally available
var dataOld1 = [12, 45, 30, 80];
var dataNew1 = [];
var limit1 = 35;
var limit2 = 60;
var color = '#E41B17';

for(var i = 0; i < dataOld1.length; i++) {
    var valueO = dataOld1[i];
    if(valueO <= limit2 && valueO >= limit1) {
        // Amber
        var fillColor = '#FFE87C';
        var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}";
        dataNew1[i] = complete;

    } else if(valueO > limit2) {
        // Green
        var fillColor = '#4CC552';
        var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}";
        dataNew1[i] = complete;
    } else {
        // Red
        var fillColor = '#E41B17';
        var complete = "{fillColor:'" + fillColor + "',y:" + valueO + "}";
        dataNew1[i] = complete;
    }

}

var newData1 = []
for(var i = 0; i < dataOld1.length; i++) {
    var obj = eval('(' + dataNew1[i] + ')');
    newData1[i] = obj;
}

var categories = ['15 Jan', '22 Jan', '29 Jan', '5 Feb'];

$(document).ready(function() {
    chart1 = new Highcharts.Chart({

        chart : {
            renderTo : 'mainchart1',
            type : 'line',
            fontSize : '1px',
            shadow : false,
            marginLeft : 33,
            height : 125,
            width : 165,
        },
        title : {
            text : null
        },
        xAxis : {
            categories : categories,
            lineWidth : 1,
            lineColor : '#000',
        },
        yAxis : {
            title : {
                text : null
            },
            lineWidth : 1,
            lineColor : '#000',
            min : 0,
            max : 100,
            minRange : 20,
            minorGridLineColor : '#E0E0E0',
            minorTickInterval : 'auto',
            maxPadding : 0,
            gridLineColor : '#CCC',
            gridLineWidth : 1,
            legend : {
                enabled : false
            },
            labels : {
                formatter : function() {
                    return this.value + '%';
                }
            }
        },
        tooltip : {
            formatter : function() {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '%';
            }
        },
        legend : {
            enabled : false
        },
        series : [{

            data : newData1

        }],
        plotOptions : {
            series : {
                name : 'Team Briefing',
                shadow : false,
                marker : {
                    lineWidth : 2,
                    radius : 6,
                    symbol : 'circle'
                }
            }
        },
        exporting : {
            enabled : false
        }

    });

});

Only these data will change

var dataOld1 = [12, 45, 30, 80];
var categories = ['15 Jan', '22 Jan', '29 Jan', '5 Feb'];
renderTo : 'mainchart1',

Upvotes: 0

Views: 136

Answers (3)

jb10210
jb10210

Reputation: 1176

Why didn't you do this instead of using eval?

for(var i = 0; i < dataOld1.length; i++) {
    var fillColor;

    if(valueO <= limit2 && valueO >= limit1) {
        // Amber
        fillColor = '#FFE87C';
    } else if(valueO > limit2) {
        // Green
        fillColor = '#4CC552';
    } else {
        // Red
        fillColor = '#E41B17';
    }
    dataNew[i] = { 'fillColor': fillColor, y: dataOld1[i] };
}

This renders the next for loop obsolete!

Upvotes: 1

beno&#238;t
beno&#238;t

Reputation: 1483

You can make an array of array

dataOld = [dataOld1, dataOld2, dataOld3];

And get result by using dataOld[i][j] and 2 for() loop ?

Upvotes: 2

alnorth29
alnorth29

Reputation: 3602

You should make the whole thing a function which takes dataOld1 and categories as arguments. This way you can reduce each chart to a single function call.

Upvotes: 3

Related Questions