Currently, I am involved in a project where I need to display a graph that resembles the one depicted here.
To accomplish this task, I am utilizing the Google Visualization Chart API. Successfully, I have managed to generate the chart as illustrated below.
This area is quite new to me and unfortunately, I am encountering some challenges. Specifically, I am struggling to draw the vAxis line precisely like it appears in the example graph. Additionally, I am curious about how I can adjust the color scheme to match what I am currently using and modify the VAxis intervals accordingly. Any guidance on these issues would be greatly appreciated. Below you will find the code snippet that I am working with:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Year', 'Sales', 'Expenses', 'Profit'],
['May,14', 5, 1, 2],
['April,14', 4, 2, 3],
['March,14', 6, 7, 2],
['Feb,14', 1, 7, 2],
['Jan,14', 3, 3, 2],
['Dec,14', 4, 3, 2],
['Nov,14', 5, 3, 2],
['Oct,14', 6, 6, 2],
['Sept,14',7, 6, 2],
['Aug,14', 3, 5, 2],
['July,14', 5, 5, 2],
['June,14', 6, 3, 2]]);
var options = {
orientation:'horizontal',
animation: {duration: 2000, easing: 'out'},
legend: 'none' };
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options); }
</script>
</head>
<body>
<div id="chart_div" style="position: absolute; top:-50px; left:-70px; width: 900px; height: 500px;">
</div>
</body>
</html>