How can I combine highcharts with different but similar x-axis categories?

Question

I have 2 highcharts like this:http://jsfiddle.net/bqnkeLx9/

And I want to be able combine them into something like this: http://jsfiddle.net/gy2yo184/

Basically, is there an easy way to join 2 arrays together based on another array?

var category1 = [1,2,4,6,9]
var arr1 = [1,2,3,4,5]
var category2 = [1,3,6,8]
var arr2 = [6,7,8,9]
//do something to end with:
var allcategories = [1,2,3,4,6,8,9]
arr1 = [1,2,0,3,4,0,5]
arr2 = [6,0,7,0,8,9,0]

or maybe there is an easier way to plot this?

Answer 1

I don't think there is an easy way to do it. Or rather easier than:

• making unique array of categories
• manually filling up array with 0 values, when category is missing

For example:

// union without diplicates:
// taken from: 
// http://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items
Array.prototype.unique = function() {
    var a = this.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }
    return a;
};

And now use case:

// arrays:
var cats_1 = [1,2,4,6,9],
    cats_2 = [1,3,6,8],
    data_1 = [1,2,3,4,5],
    data_2 = [6,7,8,9],
    data_1_modified = [], 
    data_2_modified = [],
    categories;

// get cateogries
categories = cats_1.concat(cats_2).unique(); 

// you may want to sort categories
categories.sort(function(a, b) {
   return a - b; 
});

categories.map(function(e, i) {
    var index;
    if( (index = cats_1.indexOf(e)) == -1) {
        data_1_modified.push(0); // missing category
    } else {
        data_1_modified.push(data_1[index]);
    }
    if( (index = cats_2.indexOf(e)) == -1) {
        data_2_modified.push(0); // missing category
    } else {
        data_2_modified.push(data_2[index]);
    }
    return e;
});

$('#container1').highcharts({
    xAxis: {
        categories: categories
    },

    series: [{
        data: data_1_modified
    }, {
        data: data_2_modified   
    }]
});

And live demo: http://jsfiddle.net/bqnkeLx9/1/

Answer 2

you can Use javascript function concat() to join two array. assuming here is our arrays

var category1 = [1,2,4,6,9]
var arr1 = [1,2,3,4,5]
var category2 = [1,3,6,8]
var arr1 = [1,2,3,4,5]


var category = category1.concat(category1);

the elements of array category will be something like as below [1,2,4,6,9,8]

now you can pass array in highchart

Update

After removing all duplicate elements and after sorting final array is stored in arrayuniqueCat

$(function () {
    var category1 = [1,2,4,6,9];
    var category2 = [6,3,1,8];

    var allcategories = category1.concat(category2);
    var arr1 = [2,2,0,3,4,0,5];
    var arr2 = [6,0,7,0,8,9,0];

    var uniqueCat = allcategories.filter(function(elem, index, self) {
        return index == self.indexOf(elem);
    }).sort();

    $('#container1').highcharts({
        xAxis: {
            categories: uniqueCat
        },

        series: [{
            data: arr1
        },{
            data: arr2
        }]
    });
});

fiddle