9:10:00 AM
<html>
<head>
</head>
<body>
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Dep1/val1', 'Dep1/val2', 'Dep1/val3','Dep2/val1', 'Dep2/val2', 'Dep2/val3'],
['Jan', 1000, 400, 200,300,400,270],
['Feb', 1170, 460, 250,350,420,260],
['Mar', 660, 1120, 300,300,400,270],
['Apr', 1030, 540, 350,300,400,270]
]);
var options = {
isStacked: true,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2016',
},
bars: 'horizontal', // Required for Material Bar Charts.
hAxis: {format: 'decimal'},
hAxes: {
0: {
},
1: {
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
},
2:{
gridlines: {
color: 'transparent'
},
textStyle: {
color: 'transparent'
}
}
},
series: {
0: {
targetAxisIndex: 0,
color:'#ff0000'
},
1: {
targetAxisIndex: 1,
color:'#165489'
},
2: {
targetAxisIndex: 2,
color:'#ff0000'
},
3: {
targetAxisIndex: 0,
color:'#165489'
},
4: {
targetAxisIndex: 1,
color:'#ff0000'
},
5: {
targetAxisIndex: 2,
color:'#165489'
}
},
height: 500,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
annotations: {
alwaysOutside: false,
textStyle: {
fontSize: 17,
auraColor: '#eee',
color: '#eee'
}}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</body>
</html>
0 comments:
Post a Comment