Small y-axis values on charts can be difficult to see and click on

Some charts contain very large and very small values. It becomes difficult, or impossible, to click on the small values in a histogram in order to go to the studies that contain the corresponding data. This is annoying, as it's often the high or low dose outliers that you want to look at, and these are the ones that are difficult to click on.

A solution would be to plot the charts with a log axis. It would be easy to introduce a user-option to select a linear or log y-axis. The user's preference could be stored in the user profile and be available to change under Chart options.

I have already implemented this on the radiographic chart of median DAP per acquisition. The chart's code checks whether chartLogScale is true. If it is then a log10 y-axis scale is used, with an appropriate minimum to display the data in the main chart and in the histograms. The histogram minimum is set to be 0.1: this makes any bins with just one count in them show up well. The minimum value for the main plot is set to be one power of ten less than the minimum value in the series.

I've manually set chartLogScale to be true when testing this

$(function () {
    var drilldownTitle = 'Histogram of ';
    var defaultTitle   = 'Median DAP per acquisition protocol';
    var bins = [];
    var name = '';

    if (chartLogScale == true) {
        var yAxisType = 'logarithmic';
        var yAxisDrilldownMin = 0.1;
        var yAxisMin = Math.min.apply(null, seriesMedianData.map(function(a){return a.y;}));
        yAxisMin = Math.pow(10, (Math.round(Math.log10(yAxisMin),0) - 1));
    }
    else {
        var yAxisType = 'linear';
        var yAxisMin = 0;
        var yAxisDrilldownMin = 0;
    }

    var chartDAPperAcquisition = new Highcharts.Chart({
        chart: {
            type: 'column',
            renderTo: 'container',
            events: {
                drilldown: function(e) {
                    bins = e.point.bins;
                    name = (e.point.name).replace('&amp;', '%26');
                    chartDAPperAcquisition.setTitle({ text: drilldownTitle + e.point.name + ' DAP values' }, { text: '(n = ' + e.point.freq +')' });
                    chartDAPperAcquisition.yAxis[0].update({
                        title: {
                            text: 'Number'
                        },
                        min: yAxisDrilldownMin
                    });
                    chartDAPperAcquisition.xAxis[0].setTitle({text:'DAP range (cGy.cm<sup>2</sup>)'});
                    chartDAPperAcquisition.xAxis[0].setCategories([], true);
                    chartDAPperAcquisition.tooltip.options.formatter = function(e) {
                        var linkText = 'acquisition_dap_min=' + (bins[this.x])/1000000 + '&acquisition_dap_max=' + (bins[this.x+1])/1000000 + '&acquisition_protocol=' + name;
                        returnValue = '<table style="text-align: center"><tr><td>' + this.y.toFixed(0) + ' exposures</td></tr><tr><td><a href="/openrem/dx/?acquisitionhist=1&' + linkText + tooltipFilters + '">Click to view</a></td></tr></table>';
                        return returnValue;
                    }
                },
                drillup: function(e) {
                    chartDAPperAcquisition.setTitle({ text: defaultTitle }, { text: '' });
                    chartDAPperAcquisition.yAxis[0].update({
                        title: {
                            text: 'Median DAP (cGy.cm<sup>2</sup>)'
                        },
                        min: yAxisMin
                    });
                    chartDAPperAcquisition.xAxis[0].setTitle({text:'Protocol name'});
                    chartDAPperAcquisition.xAxis[0].update({
                        categories: {
                            formatter: function (args) {
                                return this.point.category;
                            }
                        }
                    }, true);
                    chartDAPperAcquisition.tooltip.options.formatter = function() {
                        return this.point.tooltip;
                    }
                }
            }
        },
        title: {
            text: 'Median DAP per acquisition protocol'
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: protocolNames,
            title: {
                useHTML: true,
                text: 'Protocol name'
            },
            labels: {
                useHTML: true,
                rotation:90
            }
        },
        yAxis: {
            min: yAxisMin,
            type: yAxisType,
            title: {
                useHTML: true,
                text: 'Median DAP (cGy.cm<sup>2</sup>)'
            }
        },
        tooltip: {
            formatter: function () {
                return this.point.tooltip;
            },
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Median DAP',
            data: $.extend(true, [], seriesMedianData)
        }],
        drilldown: {
            series: seriesDrilldown
        }
    });

    switch(chartSorting) {
        case 'freq':
            seriesSort('#container', seriesMedianData, 'freq', chartSortingDirection);
            break;
        case 'dap':
            seriesSort('#container', seriesMedianData, 'y', chartSortingDirection);
            break;
        case 'name':
            seriesSort('#container', seriesMedianData, 'name', chartSortingDirection);
            break;
        default:
            seriesSort('#container', seriesMedianData, 'name', 1);
    }

});

Comments (7)