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 [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.
