0% found this document useful (0 votes)
4 views

simple bar using google api

The document is an HTML file that implements a basic bar chart using Google Charts. It includes JavaScript to load the Google Charts API, create a data table with sales data from 2019 to 2023, and draw the chart with specified options. The chart is displayed in a div element with the ID 'chart_div'.

Uploaded by

dhanapriyad2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views

simple bar using google api

The document is an HTML file that implements a basic bar chart using Google Charts. It includes JavaScript to load the Google Charts API, create a data table with sales data from 2019 to 2023, and draw the chart with specified options. The chart is displayed in a div element with the ID 'chart_div'.

Uploaded by

dhanapriyad2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts - Basic Bar Chart</title>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Google Charts API
google.charts.load('current', {packages: ['corechart']});

// Set callback function to draw the chart


google.charts.setOnLoadCallback(drawChart);

function drawChart() {
// Create the data table
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2019', 500],
['2020', 800],
['2021', 1200],
['2022', 1500],
['2023', 1800]
]);

// Set chart options


var options = {
title: 'Company Sales Over the Years',
hAxis: { title: 'Year' },
vAxis: { title: 'Sales' },
width: 600,
height: 400,
colors: ['#4285F4']
};

// Create and draw the bar chart


var chart = new
google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts - Basic Bar Chart</h2>
<div id="chart_div"></div> <!-- This is where the chart will be displayed -->
</body>
</html>

You might also like