Add settings to javascript plug-gin

Question

For our project we use the Highchart plug-in. I,ve made an function to create different charts. The settings of the different charts are almost the same. There are some little differences in the settings:

function createBarDiagram(div,title,xtitle,ytitle,first,second,type){

    // Internationalization
    Highcharts.setOptions({lang: {drillUpText: '◁ Terug naar {series.name}'}});

    if(type == 'pie'){
        var options1 = {                        
            tooltip: {pointFormat: 'Percentage: <b>{point.percentage:.1f}%</b><br>'},       
            xAxis: {categories: true}
        };
    }

    if(type == 'column'){
        var options1 = {
            xAxis: {
                categories: true,
                labels : { rotation: -90}
            }
        };  
    }

    // algemene instellingen
    var options = {
        yAxis: {title: {text: 'Aantal'}},
        chart: {height: 300},
        title: {text: ''},
        drilldown: {series: second},
        legend: {enabled: false},
        credits: {enabled: false},
        plotOptions: {
            series: {
                dataLabels: {enabled: true},
                shadow: false,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {getDetailData(this);}
                    }
                }               
            },
            pie: {size: '100%'}
        },
        series: [{
            name: 'overzicht',
            colorByPoint: true,
            data: first
        }]  
    };  


    // Column charts
    options.chart.renderTo = div;
    options.chart.type = type;
    var chart = new Highcharts.Chart(options);
    return chart;
}

As you can see the chart is loaded based on the options var. But i like to add the options1 var also to the chart for the little differences per chart. So i need:

var options = options + options1;

Is there a way to merge these two? Thanks!

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

From what I get, you need to merge to objects, options and options1; The + operator will simply merge their string representations. Check this answer on how to merge two javascript objects. I prefer the jQuery extend method, since I use jQuery all the time.

---solution----

options = jQuery.extend(options, options1);

edited May 23 '17 at 10:32

Community

1
1

answered Apr 25 '14 at 08:47

fxenik

463
3
12

Thanks! That is the solution i searched for. – JelleP Apr 25 '14 at 08:54

score 0 · Answer 2 · answered Apr 25 '14 at 08:51

instead of passing positional arguments to your function I would suggest you to pass an object containing the parameters.

example:

function createBarDiagram(params){
...
if (params.type == "...") {...}
...
}

and call your function with

params1 = {
  div: "...",
  title: "...",
  xtitle: "...", ...
}
createBarDiagram(params1)

To resolve the Options issue you should initiate a null object

var options1 = {}

then you can initialize it step by step with

options1.xAxis = {...}

and finally, use it in options

options = {...
   xAxis = options1.xAxis
}

Hope this will help. Best regards.

Add settings to javascript plug-gin

2 Answers2