Highcharts cheat sheet

Boxplot chart

In highcharts we can create very nice boxplot charts to show statistical results from some value sets. We feed calculated results directly into chart.

boxplot1

For every value on xAxis we define in “series” these values on yAxis:

  • maximum
  • upper quartile
  • average – median
  • lower quartile
  • minimum

As “Extremes” we add extreme values excluded from calculations.

(Please do not take this text as representative results about file systems – chart was created based on real tests but only as example for this text.)

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'boxplot'
        },

        title: {
            text: 'Runtime of queries on different file systems'
        },

        legend: {
            enabled: false
        },

        xAxis: {
            categories: ['btrfs without compression', 'btrfs with compression', 'xfs'],
            title: {
                text: 'file system'
            }
        },

        yAxis: {
            title: {
                text: 'Run time in %'
            },
            plotLines: [{
                value: 100,
                color: 'red',
                width: 1,
                label: {
                    text: 'ext4 100%',
                    align: 'right',
                    style: {
                        color: 'gray'
                    },
                    y: 12
                }
            }]
        },

        series: [{
            name: 'Runtimes',
            data: [
                [120, 105, 91, 86, 78],
                [105, 98, 83, 75, 68],
                [220, 165,142,135,118]
            ],
            tooltip: {
                headerFormat: '<em>Experiment No {point.key}</em>
'
            }
        }, {
            name: 'Extremes',
            color: Highcharts.getOptions().colors[0],
            type: 'scatter',
            data: [ // x, y positions where 0 is the first category
                [0, 135],
                [1, 140],
                [2,280]
            ],
            marker: {
                fillColor: 'white',
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[0]
            },
            tooltip: {
                pointFormat: 'Observation: {point.y}'
            }
        }]

    });
});

Categorised as: Uncategorized



Leave a Reply

Your email address will not be published. Required fields are marked *