Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container1" style="height: 400px"></div>

JavaScript

$(function () {
    // 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;
    };
    
    // 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   
        }]
    });
});