Highcharts test tool

by Rajesh Danabal

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.chart.xAxis[0].pointRange / series.xAxis.max);
            });
        }
    });

}(Highcharts));


$('#container').highcharts({

    title: {
        text: 'Highcharts Marimekko study'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug',...