Repeating Javascript Code

Question

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',

score 3 · Accepted Answer · answered Apr 03 '12 at 08:32

3

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.

answered Apr 03 '12 at 08:32

alnorth29

3,525
2
34
50

am sorry i forgot to mention. renderTo : 'mainchart1', also changes according to the Div ID – Harsha M V Apr 03 '12 at 08:33
1

No problem with that, just take that string as an argument to your function as well. – alnorth29 Apr 03 '12 at 08:35

score 2 · Answer 2 · answered Apr 03 '12 at 08:36

2

You can make an array of array

dataOld = [dataOld1, dataOld2, dataOld3];

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

answered Apr 03 '12 at 08:36

benoît

1,473
3
13
31

jb10210 · Answer 3 · 2012-04-03T09:01:17.777

1

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!

edited Apr 03 '12 at 09:01

answered Apr 03 '12 at 08:37

jb10210

1,158
5
15

con you please explain.. do i need to remove the for loop with the eval ? – Harsha M V Apr 03 '12 at 08:43
1

the `dataNew1` array is now equal to your `newData1` array, so you don't need the for-loop anymore. Also always try to avoid the `eval` function. – jb10210 Apr 03 '12 at 09:01
See [http://stackoverflow.com/q/86513/1180424](http://stackoverflow.com/q/86513/1180424) – jb10210 Apr 03 '12 at 09:12

Repeating Javascript Code

3 Answers3