title: Bar chart for displaying min/max/avg
body: <p><strong>Update:</strong> I would take any chart library, not just Google charts:</p>
  
  <p>I would like to use the <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart" rel="nofollow noreferrer">Google Charts: Bar Chart</a> for visualising rows of acess statistics displayed with min/max values as bars and avg values with a horizontal line.</p>
  
  <p>I managed to display the min/max values (just stack the series for min and max):
  <img src="https://i.stack.imgur.com/J1lxD.gif" alt="Min/Max Bar Chart"></p>
  
  <p>The code (for entering in the <a href="https://code.google.com/apis/ajax/playground/?type=visualization#bar_chart" rel="nofollow noreferrer">Code playground</a>) is</p>
  
  <pre class="lang-js prettyprint-override"><code>function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      ['Function', 'Min', 'Max'],
      ['functionA',  0,    150],
      ['functionB',  11,    100],
      ['functionC',  20,    150],
      ['functionD',  5,    7],
      ['functionE',  0,    22],
      ['functionF',  23,    55]
    ]);
  
    // Create and draw the visualization.
    new google.visualization.BarChart(document.getElementById('visualization')).
        draw(data,
             {title:"Min/Max Demo",
              width:600, height:400,
              isStacked: true,
              hAxis: {title: "Duration [ms]"}
             }
        );
  }
  </code></pre>
  
  <p>Now I want to integrate the average value to get something like:
  <img src="https://i.stack.imgur.com/dd3Ss.gif" alt="Min/Max/Avg Bar Chart"></p>
  
  <p>Can anyone give me some hints how to achieve this?</p>