Bar overlapping issue in google chart - Combo chart

Question

I am having a little problem with google chart implementation. As per requirement, I should have dual y-axis and the bars for y-axis should be overlapping. I achieved following output with my code:

Notice the two blue arrows for last two bars. The blue bar is hidden behind red bar as its smaller. It should actually look something like this:

This is my code for js file:

var chart, data;

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart()
{
    // Create the data table.
    data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addColumn('number', 'pieces');
    data.addColumn('number', 'ratio');
    data.addColumn('number', 'ratio2');
    data.addRows([
      ['Mushrooms', 300, 200, 50, 1],
      ['Onions', 100, 244, 4, 3],
      ['Olives', 100, 400, 56, 10]
    ]);

    // Set chart options
    options = {
        chartType:"ComboChart",
        containerId:"visualization",
        stackSeries: true,
        isStacked : true,
        seriesDefaults: {

            rendererOptions: {
                barPadding: 0,
                barMargin: 10
            },
            pointLabels: {
                show: true,
                stackedValue: true
            }
        },
        grid: {
            background: '#272424',
            drawGridlines: false
        },
        seriesType: "bars",     
        series: {
                    0: {
                          targetAxisIndex: 0
                      },
                      1: {
                          targetAxisIndex: 1
                      },
                      2: {
                          targetAxisIndex: 1,
                          type: "line"
                      },
                      3: {
                          type: "line"
                      }

                },   
                hAxis:{

                },         
                vAxes: {
                    0: {           
                        title: "Slices",                 
                        label:'Slices',    
                        type:'bars'                        
                    },
                    1: {
                        title: "pieces", 
                        label:'pieces',
                        type:'bars'
                    },
                    2: {
                        title: "ratio,",
                        label:'ratio',
                        type:'line'
                    },
                    3: {
                        title: "ratio2,",
                        label:'ratio2',
                        type:'line'
                    }

                }
        };

    // Instantiate and draw our chart, passing in some options.
    chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'select', selectionHandler);
}

function selectionHandler() {
    var selectedData = chart.getSelection(), row, item;
    if(selectedData != '')
    {
        row = selectedData[0].row;
        item = data.getValue(row,3);
        alert("You selected :" + item);         
    }
}

Can anyone suggest me how could I go about this? Any help would be appreciated.

Answer 1

You are displaying your bars on separate axes:

                0: {
                      targetAxisIndex: 0
                  },
                  1: {
                      targetAxisIndex: 1
                  },
                  2: {
                      targetAxisIndex: 1,
                      type: "line"
                  },
                  3: {
                      type: "line"
                  }

So the first bar is on the left axis, the second is on the right axis. The first bar only shows because it is taller than the red bar in front of it. This is by design. If you want them to display stacked, change your code to this:

  0: {
    targetAxisIndex: 0
  },
  1: {
    targetAxisIndex: 0
  },
  2: {
    targetAxisIndex: 1,
    type: "line"
  },
  3: {
    targetAxisIndex: 1,
    type: "line"
  }

This will end up with this:

Note that your two axes no longer have equivalent size. Adjust other parameters as needed. If you want them side by side, you can put them on the same axis and remove isStacked: true which will make them stand next to each other.

^{Note: This sort of chart is incredibly busy and is likely not good visualization practice. Regardless, if you need to create a chart, the above solution should work. If you actually mean that you want the smaller bar in front, then good luck with SVG editing.}

Answer 2

There actually is a way to get what you want, using a DataView to split your blue data series into two. Make one series where the data is greater than red series, and one where it is less than or equal to the red series, and position them (in order) greater than, red, less than. In the series option, set this new series to be the same color as the first, and hide it from the index.

Here's the DataView you would use:

var view = new google.visualization.DataView(data);
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        var val = dt.getValue(row, 1);
        return (val > dt.getValue(row, 2)) ? val : null;
    }
}, 2, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        var val = dt.getValue(row, 1);
        return (val <= dt.getValue(row, 2)) ? val : null;
    }
}, 3, 4]);

and here's the series option:

series: {
    0: {
        targetAxisIndex: 0
    },
    1: {
        targetAxisIndex: 1
    },
    2: {
        targetAxisIndex: 0,
        visibleInLegend: false,
        color: '#3366cc' // matches series 0
    },
    3: {
        targetAxisIndex: 1,
        type: "line"
    },
    4: {
        type: "line"
    }
}

Draw the chart with the view instead of the DataTable:

chart.draw(view, options);

See it working here: http://jsfiddle.net/asgallant/4jhC5/