google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
/* var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia',{type: 'number', role: 'annotation'}, 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
['Application', -5,0, 2, 2, 8, 0, 17, 17],
['Friend', 4,0, 3, 5, 6, 2, 20, 20],
['Newspaper', 6,0, 1, 0, 2, 0, 9, 9],
['Radio', 8,0, 0, 8, 1, 1, 18, 18],
['No Referral', 2,0, 2, 3, 0, 6, 13, 13]
]); */
var data = new google.visualization.arrayToDataTable([
["Users", "Normal", {type: 'number', role: 'annotation' }, "SLA", {type: 'number', role: 'annotation' }, "HP", {type: 'number', role: 'annotation' }, "HP-SLA", {type: 'number', role: 'annotation' }],
["John D.", 3,3, -2,2, 1,1, 0, 0],
["Muhammad E.", 4,4, -2,2, 5,5, -3,3],
["Steve B.", 5,5, -3,3, 1,1, -1,1],
["Donna P.", 5,5, -1,1, 6,6, -3,3],
["Altamash A.", 7,7, -4,4, 6,6, -2,2],
["Uzair T.", 3,3, -2,2, 0,0, 0, 0],
["Mathew R.", 6,6, -3,3, 6,6, 0, 0]
]);
var options = {
seriesType: 'bars',
bars: "vertical",
isStacked: 'true',
height: 500,
legend: {
position: "top",
alignment: "start"
},
hAxis: {
title: '',
textStyle: {color: '#777777', fontSize: '18', fontName: 'Overpass', bold: false},
},
vAxis: {
textStyle: {color: '#fff'},
title: '',
gridlines: {
color: "#eee"
},
viewWindow: {
ticks: 20,
max: 10
}
},
vAxes: {
0: {},
1: {
gridlines: {
color: "transparent"
}
}
},
series: {
0: {
type: "bars",
targetAxisIndex: 0,
color: '#4285f4'
},
1: {
type: "bars",
targetAxisIndex: 0,
color: '#93b6f3'
},
2: {
type: "bars",
targetAxisIndex: 1,
color: '#db4437'
},
3: {
type: "bars",
targetAxisIndex: 1,
color: '#f19a92'
}
},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}