Bar chart for displaying min/max/avg

Question

Update: I would take any chart library, not just Google charts:

I would like to use the Google Charts: Bar Chart for visualising rows of acess statistics displayed with min/max values as bars and avg values with a horizontal line.

I managed to display the min/max values (just stack the series for min and max):

The code (for entering in the Code playground) is

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]"}
           }
      );
}

Now I want to integrate the average value to get something like:

Can anyone give me some hints how to achieve this?

Answer 1

Sample in Highcharts: http://jsfiddle.net/Yrygy/27/

 $(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Height Versus Weight of 507 Individuals by Gender'
        },
        subtitle: {
            text: 'Source: Heinz  2003'
        },
        xAxis: {
            categories: ['f1', 'f2', 'f3']
        },
        series: [ {
            name: 'max',
            stacking: true,
            color: 'red',
            data: [
                [100],
                [120],
                [50]
            ]
        }, {
            name: 'min',
            stacking: true,
            color: 'blue',
            data: [
                [13],
                [50],
                [1]
            ]
        }, {
            type: 'scatter',
            name: 'avg',
            color: 'black',
            data: [
                [44],
                [55],
                [12]
            ]
        }]
    });