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>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
