Whisker Chart with Intervals

Beat Buehlmann

unread,

Mar 14, 2014, 10:18:06 AM3/14/14

to google-visua...@googlegroups.com

Hi there,

I want to create a Whisker Chart with Intervals. The range between the 25th percentil and median and the range between median an 75th percentil should be shown in different Colors. I use Background boxes in below example and want to Show the current value with a Point. The function line is hided with lineWidth equals 0. The ranges are shown nicely if I Change column id3 to id2 but this is not what I really want as it then creates 3 ranges (pls only look at the row of the Chart).

Can anyone help me with this?

<html>
<body>
<script type="text/javascript"
  src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1',
'packages':['corechart']}]}"></script>
<script>
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'values');
  data.addColumn({id:'i0', type:'number', role:'interval'});
  data.addColumn({id:'i1', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i3', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});

  data.addRows([
  ['a', 100, 50, 130, 85, 96, 104, 120],
  ['b', 120, 95, 130, 90, 113, 124, 140],
  ['c', 130, 105, 140, 100, 117, 133, 139],
  ['d', 90, 85, 95, 85, 88, 92, 95],
  ['e', 70, 74, 63, 67, 69, 70, 72],
  ['f', 30, 39, 22, 21, 28, 34, 40],
  ['g', 80, 77, 83, 70, 77, 85, 90],
  ['h', 100, 90, 110, 85, 95, 102, 110]]);

  // Focus is the error bars, but boxes are visible in the background.
  var options_boxes_background = {
  title:'Background boxes',
  curveType:'function',
  lineWidth: 0,
  series: [{'color': '#1A8763'}],
  intervals: { 'lineWidth':2, 'barWidth': 0.5 },
  interval: {
  'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 0.5,
  'lineWidth': 0, 'fillOpacity': 0.4 },
    'i3': { 'style':'points', 'color':'black', 'pointSize': 5,
  'lineWidth': 0, 'fillOpacity': 0.8 }
  },
  legend: 'none',
  };

  var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
  chart_lines.draw(data, options_boxes_background);
}
</script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>
</body>
</html>

asgallant

unread,

Mar 14, 2014, 12:11:36 PM3/14/14

to google-visua...@googlegroups.com

I don't quite understand what you want here. Can you provide an image of what you are looking for? Also, it would help to know what each interval column represents (in particular, which ones are the median and 25th/75th percentiles).

Beat Buehlmann

unread,

Mar 16, 2014, 11:30:05 AM3/16/14

to google-visua...@googlegroups.com

Pls see attached image. I want to create someting similar with the interval chart. The interval columns represent the following (pls note that I changed the ID's slightly in order to make it better understandable):

data.addColumn({id:'i0', type:'number', role:'interval'}); -> min value
data.addColumn({id:'i1', type:'number', role:'interval'}); -> max value
data.addColumn({id:'i2', type:'number', role:'interval'}); -> 25th percentil; I want to show an area between this value and the median
data.addColumn({id:'i2', type:'number', role:'interval'}); -> median
data.addColumn({id:'i2', type:'number', role:'interval'}); -> 75th percentil; I want to show an area between the median and the 75th percentil
data.addColumn({id:'i3', type:'number', role:'interval'}); -> current value; I want to show this

thanks

Whisker_Chart_PriceBookRatio.JPG

asgallant

unread,

Mar 17, 2014, 12:26:10 PM3/17/14

to google-visua...@googlegroups.com

Ok, I think that what you need to do is use two separate intervals for the 25th-percentile to median and median to 75th-percentile, like this:

data.addColumn({id:'min', type:'number', role:'interval'}); // min
data.addColumn({id:'max', type:'number', role:'interval'}); // max
data.addColumn({id:'25th-to-med', type:'number', role:'interval'}); // 25th percentile
data.addColumn({id:'mid-to-75th', type:'number', role:'interval'}); // median
data.addColumn({id:'mid-to-75th', type:'number', role:'interval'}); // 75th percentile
data.addColumn({id:'25th-to-med', type:'number', role:'interval'}); // median
data.addColumn({id:'value', type:'number', role:'interval'}); // current value

The median value needs to be part of two different intervals, and for some reason I have not yet fathomed, intervals must be nested (I suspect that this is a bug). I gave them semantic id's to make them easier to differentiate. You can use a DataView to put the median in two separate columns rather than include it in your DataTable twice, if you'd prefer:

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, {
    type: 'number',
    sourceColumn: 4,
    id: '25th-to-med',
    role: 'interval'
}, {
    type: 'number',
    sourceColumn: 5,
    id: 'med-to-75th',
    role: 'interval'
}, {
    type: 'number',
    sourceColumn: 6,
    id: 'med-to-75th',
    role: 'interval'
}, {
    type: 'number',
    sourceColumn: 5,
    id: '25th-to-med',
    role: 'interval'
}, 7]);

jsfiddle example: http://jsfiddle.net/asgallant/A2zxv/

Beat Buehlmann

unread,

Mar 18, 2014, 7:54:55 AM3/18/14

to google-visua...@googlegroups.com

Wow - excellent!

This is exactly what I was looking for. Many thanks for your help.

Ivan Marinovic

unread,

Oct 8, 2019, 4:16:58 PM10/8/19

to Google Visualization API

i don't understed first value:

data.addColumn('number', 'values');

why is it used or is it shown on the graph?

Reply all

Reply to author

Forward