whisker box plot

April 15, 2021 21:39

Hi Ting,

Short answer: Yes it is possible.

Long answer:

When we put the charting module into Web the intent was to provide a simple interface for doing the basic stuff, but to still allow you to do more advanced things as long as you were willing to write Highcharts configuration (which is not for the timid).

In practice I haven't seen a customer attempt this yet, but I know several Services groups have done this. AAM could likely fill the gap if you don't have in-house 'development' resources. For example, the configuration behind the sample you showed is below ... though of course the data would be coming from the feature sources.

// Define custom series type for displaying low/med/high values using boxplot as a base
Highcharts.seriesType('lowmedhigh', 'boxplot', {
  keys: ['low', 'median', 'high'],
  tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: ' +
      'Low <b>{point.low}</b> - Median <b>{point.median}</b> - High <b>{point.high}</b><br/>'
  }
}, {
  // Change point shape to a line with three crossing lines for low/median/high
  // Stroke width is hardcoded to 1 for simplicity
  drawPoints: function () {
    var series = this;
    this.points.forEach(function (point) {
      var graphic = point.graphic,
        verb = graphic ? 'animate' : 'attr',
        shapeArgs = point.shapeArgs,
        width = shapeArgs.width,
        left = Math.floor(shapeArgs.x) + 0.5,
        right = left + width,
        crispX = left + Math.round(width / 2) + 0.5,
        highPlot = Math.floor(point.highPlot) + 0.5,
        medianPlot = Math.floor(point.medianPlot) + 0.5,
        // Sneakily draw low marker even if 0
        lowPlot = Math.floor(point.lowPlot) +
          0.5 - (point.low === 0 ? 1 : 0);
 
      if (point.isNull) {
        return;
      }
 
      if (!graphic) {
        point.graphic = graphic = series.chart.renderer.path('point').add(series.group);
      }
 
      graphic.attr({
        stroke: point.color || series.color,
        "stroke-width": 1
      });
 
      graphic[verb]({
        d: [
          'M', left, highPlot,
          'H', right,
          'M', left, medianPlot,
          'H', right,
          'M', left, lowPlot,
          'H', right,
          'M', crispX, highPlot,
          'V', lowPlot
        ]
      });
    });
  }
});
 
// Create chart
var chart = Highcharts.chart('container', {
  chart: {
    type: 'lowmedhigh'
  },
 
  title: {
    text: 'Daily company fruit consumption 2019'
  },
 
  accessibility: {
    point: {
      descriptionFormatter: function (point) {
        // Use default formatter for null points
        if (point.isNull) {
          return false;
        }
 
        return point.category + ', low ' + point.low + ', median ' +
          point.median + ', high ' + point.high;
      }
    },
 
    series: {
      descriptionFormatter: function (series) {
        return series.name + ', series ' + (series.index + 1) + ' of ' +
          series.chart.series.length + ' with ' + series.points.length +
          ' data points.';
      }
    },
 
    typeDescription: 'Low, median, high. Each data point has a low, median and high value, depicted vertically as small ticks.' // Describe the chart type to screen reader users, since this is not a traditional boxplot chart
  },
 
  xAxis: [{
    accessibility: {
      description: 'Months of the year'
    },
    categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    crosshair: true
  }],
 
  yAxis: {
    title: {
      text: 'Fruits consumed'
    },
    min: 0
  },
 
  responsive: {
    rules: [{
      condition: {
        maxWidth: 550
      },
      chartOptions: {
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
      }
    }]
  },
 
  tooltip: {
    shared: true
  },
 
  plotOptions: {
    series: {
      stickyTracking: true,
      whiskerWidth: 5
    }
  },
 
  series: [{
    name: 'Plums',
    data: [
      [0, 8, 19],
      [1, 11, 23],
      [3, 16, 28],
      [2, 15, 28],
      [1, 15, 27],
      [0, 9, 21],
      null,
      null,
      [1, 6, 19],
      [2, 8, 21],
      [2, 9, 22],
      [1, 11, 19]
    ]
  }, {
    name: 'Bananas',
    data: [
      [0, 3, 6],
      [1, 2, 4],
      [0, 2, 5],
      [2, 2, 5],
      [1, 3, 6],
      [0, 1, 3],
      [1, 1, 2],
      [0, 1, 3],
      [1, 1, 3],
      [0, 2, 4],
      [1, 2, 5],
      [1, 3, 5]
    ]
  }, {
    name: 'Apples',
    data: [
      [1, 4, 6],
      [2, 4, 5],
      [1, 3, 6],
      [2, 3, 6],
      [1, 3, 4],
      [0, 2, 4],
      [0, 1, 2],
      [0, 1, 2],
      [0, 1, 2],
      [0, 2, 4],
      [1, 2, 4],
      [1, 3, 4]
    ]
  }]
});

0

Ting Lin

April 16, 2021 03:33

Thanks very much Cam!

0

Ting Lin

April 16, 2021 09:04

Hi Cam, I was trying to put those codes into the Chart Definition. It didn't give me any error. Just keep loading Configuration. May I ask why?

{

"chart": {

"type": "boxplot"

},

"title": {

"text": "Highcharts box plot styling"

},

"legend": {

"enabled": false

},

"xAxis": {

"categories": ["1", "2", "3", "4", "5"],

"title": {

"text": "Experiment No."

}

},

"yAxis": {

"title": {

"text": "Observations"

}

},

"plotOptions": {

"boxplot": {

"boxDashStyle": "Dash",

"fillColor": "#F0F0E0",

"lineWidth": "2",

"medianColor": "#0C5DA5",

"medianDashStyle": "ShortDot",

"medianWidth": "3",

"stemColor": "#A63400",

"stemDashStyle": "dot",

"stemWidth": "1",

"whiskerColor": "#3D9200",

"whiskerLength": "20%",

"whiskerWidth": "3"

}

},

"series": [{

"name": "Observations",

"data": [

[760, 801, 848, 895, 965],

[733, 853, 939, 980, 1080],

[714, 762, 817, 870, 918],

[724, 802, 806, 871, 950],

[834, 836, 864, 882, 910]

]

}]

}

The example above use the static data. May I ask how can I pass the fields from a feature class to it? Is there any help available?

Thanks Cam and look forward to hearing from you.

0

whisker box plot

Comments

Didn't find what you were looking for?