Refactor repeating HighChart configuration for Ruby on Rails

Question

I am using HighChart: api.highcharts.com/ plugin to support and handle my line graphs in my Ruby on Rails application.

I have 4 different line graphs in 4 different js.erb files.

All graphs have the same styles/config except the data being calculated.

     var seriesOptions = [],
                yAxisOptions = [],
                seriesCounter = 0,
                names = <%= raw get_engagement_data(@user,params[:provider],params[:type]) %>;

        $.each(names, function(i, name) {

            seriesOptions[i] = {
                type: 'areaspline',
                lineColor: getColor[name[2]],
                lineWidth: 2,
                pointInterval: 24 * 3600 * 1000,
                name: name[0],
                data: name[1],
                fillColor: getLighterColor[name[2]],
                fillOpacity: 1,
                marker: {
                    enabled: false,
                    fillColor: getColor[name[2]]
                }
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == names.length) {
                createChart();
            }
        });

        // create the chart when all data is loaded
        function createChart() {

            $('#engagement_chart').highcharts('StockChart', {
                chart: {
                },

                rangeSelector: {
                    enabled: false
                },
                scrollbar: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                navigator: {
                    maskFill: '#3ebca6',
                    height: 10,
                    margin: 25,
                    outlineColor: '#3ebca6',
                    outlineWidth: 5,
                    series: {
                        color: '#3ebca6'
                    },
                    xAxis: {
                       labels: {
                            enabled: false
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        second: '%b<br>%Y',
                            minute: '%b<br>%Y',
                        hour: '%b<br>%Y',
                        day: '%b %e<br>%Y',
                        week: '%b<br>%Y',
                        month: '%b<br>%Y',
                        year: '%Y'
                    },
                    labels: {
                        style: {
                            color: '#27303a',
                            fontFamily: 'Helvetica Neue',
                            fontSize: '12px'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    startOnTick: true,
                    gridLineColor: '#f0f0f1',
                    gridLineWidth: "1px",
                       offset: 60,
                    labels: {
                        style: {
                            color: '#27303a',
                            fontFamily: 'Helvetica Neue',
                            fontSize: '12px'
                        }
                    }
                },
                plotOptions: {
                    padding: "10px",
                    series: {
                        fillOpacity: 1
                    }
                },

                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>'
                },

                series: seriesOptions
            });
        }

I tried to create a separate /assets/javascripts/graph.js file

graph.js

       function ColorTheDonuts(){
         chart: {
                },

                rangeSelector: {
                    enabled: false
                },
                scrollbar: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                navigator: {
                    maskFill: '#3ebca6',
                    height: 10,
                    margin: 25,
                    outlineColor: '#3ebca6',
                    outlineWidth: 5,
                    series: {
                        color: '#3ebca6'
                    },
                    xAxis: {
                       labels: {
                            enabled: false
                        }
                    }
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        second: '%b<br>%Y',
                            minute: '%b<br>%Y',
                        hour: '%b<br>%Y',
                        day: '%b %e<br>%Y',
                        week: '%b<br>%Y',
                        month: '%b<br>%Y',
                        year: '%Y'
                    },
                    labels: {
                        style: {
                            color: '#27303a',
                            fontFamily: 'Helvetica Neue',
                            fontSize: '12px'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    startOnTick: true,
                    gridLineColor: '#f0f0f1',
                    gridLineWidth: "1px",
                       offset: 60,
                    labels: {
                        style: {
                            color: '#27303a',
                            fontFamily: 'Helvetica Neue',
                            fontSize: '12px'
                        }
                    }
                },
                plotOptions: {
                    padding: "10px",
                    series: {
                        fillOpacity: 1
                    }
                },
        }

I put some of my configs there but the JS didn't work.

Any suggestions? Any workarounds will be appreciated. Thanks

Answer 1

Your are close. The JavaScript syntax is incorrect in your ColorTheDonuts function:

function ColorTheDonuts(){
    return {
        chart: {},
        rangeSelector: {
            enabled: false
        },
        scrollbar: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        navigator: {
            maskFill: '#3ebca6',
            height: 10,
            margin: 25,
            outlineColor: '#3ebca6',
            outlineWidth: 5,
            series: {
                color: '#3ebca6'
            },
            xAxis: {
                labels: {
                    enabled: false
                }
            }
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                second: '%b<br>%Y',
                minute: '%b<br>%Y',
                hour: '%b<br>%Y',
                day: '%b %e<br>%Y',
                week: '%b<br>%Y',
                month: '%b<br>%Y',
                year: '%Y'
            },
            labels: {
                style: {
                    color: '#27303a',
                    fontFamily: 'Helvetica Neue',
                    fontSize: '12px'
                }
            }
        },
        yAxis: {
            min: 0,
            startOnTick: true,
            gridLineColor: '#f0f0f1',
            gridLineWidth: "1px",
            offset: 60,
            labels: {
                style: {
                    color: '#27303a',
                    fontFamily: 'Helvetica Neue',
                    fontSize: '12px'
                }
            }
        },
        plotOptions: {
            padding: "10px",
            series: {
                fillOpacity: 1
            }
        }
    };
}

To use:

$('#engagement_chart').highcharts('StockChart', ColorTheDonuts());