create single bar with different data using Google charts

Question

Can I create these types of charts using Google charts where I can set the target at top also.

Are these charts bar type. I didn't find anything which can make bar charts like this or is this a completely different chart type.

Edit

I found the solution at Google Chart Tools - How to create stacked bar chart. These are stacked bar charts. but still I didn't find how to put target at the top

I found the solution at http://stackoverflow.com/questions/10441838/google-chart-tools-how-to-create-stacked-bar-chart. These are stacked bar charts. — Harry, Nov 06 '13 at 16:14

score 1 · Accepted Answer · answered Nov 06 '13 at 17:17

Use a ComboChart, and set the series.<series index>.type option to 'bars' for the "Pending", "Loss", and "Won" series. Set the series.<series index>.type to 'steppedArea' and series.<series index>.opacity to 0 for the "Target" series. Set the connectSteps option to false. Here's one way to do it, assuming your data is in the order "Won", "Loss", "Pending", "Target":

var chart = new google.visualization.ComboChart(document.querySelector('#chart_div'));
chart.draw(data, {
    height: 400,
    width: 600,
    isStacked: true,
    connectSteps: false,
    series: {
        0: {
            // Won
            type: 'bars'
        },
        1: {
            // Loss
            type: 'bars'
        },
        2: {
            // Pending
            type: 'bars'
        },
        3: {
            // Target
            type: 'steppedArea',
            areaOpacity: 0
        }
    }
});

create single bar with different data using Google charts

1 Answers1