Highcharts test tool

by Torstein Hønsi

HTML

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

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

/**
 * Highcharts Marimekko study
 *
 * To do: 
 * - X axis categories should be placed under columns. Move translation 
 *   computations up to processData, then use these to move axis labels as well as columns.
 * - Tooltip positions
 * - Inherited Z value for stacks? Otherwise it must be set for each series.
 */

(function (H) {
    var seriesTypes = H.seriesTypes,
        each = H.each,
        extendClass = H.extendClass,
        defaultPlotOptions = H.getOptions().plotOptions,
        merge = H.merge;
    
    defaultPlotOptions.marimekko = merge(defaultPlotOptions.column, {
        pointPadding: 0,
        groupPadding: 0
    });
    
    seriesTypes.marimekko = extendClass(seriesTypes.column, {
        type: 'marimekko',
        pointArrayMap: ['y', 'z'],
	    parallelArrays: ['x', 'y', 'z'],
    	processData: function () {
            var series = this;
            this.totalZ = 0;
            this.relZ = [];
            seriesTypes.column.prototype.processData.call(this);

            each(this.zData, function (z, i) {
                series.relZ[i] = series.totalZ;
                series.totalZ += z;
            });
            
        },
        translate: function () {
            var series = this,
                totalZ = series.totalZ,                
                xAxis = series.xAxis;
            
            seriesTypes.column.prototype.translate.call(this);
            
            // Distort the points to reflect z dimension
            each(this.points, function (point, i) {
                var shapeArgs = point.shapeArgs, 
                    relZ = series.relZ[i];
                shapeArgs.x *= (relZ / totalZ) / (shapeArgs.x / xAxis.len);
                shapeArgs.width *= (point.z / totalZ) / (series.pointRange / series.xAxis.max); 
            });
        }
    });
    
}(Highcharts));


$('#container').highcharts({
    
    title: {
        text: 'Highcharts Marimekko study'
    },

    xAxis: {
        tickPositions: [0.7, 1.5,...