Wow - excellent!
This is exactly what I was looking for. Many thanks for your help.
Am Montag, 17. März 2014 17:26:10 UTC+1 schrieb asgallant:
> 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/
>
> On Sunday, March 16, 2014 11:30:05 AM UTC-4, Beat Buehlmann wrote:
>>
>> 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
>>
>>
>> Am Freitag, 14. März 2014 17:11:36 UTC+1 schrieb asgallant:
>>>
>>> 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).
>>>
>>> On Friday, March 14, 2014 10:18:06 AM UTC-4, Beat Buehlmann wrote:
>>>>
>>>> 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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
