JavaScript (JS) Google Chart is a powerful tool that allows developers to create interactive and visually appealing charts and graphs for web applications. It is a free and open-source library that is easy to use and can be integrated with other web technologies such as HTML, CSS, and jQuery.
JS Google Chart provides a wide range of chart types such as line, bar, pie, area, scatter, and more. It also offers customization options such as colors, fonts, labels, and tooltips to make the charts more informative and engaging.
Here are some examples of how to use JS Google Chart:
The line chart is used to display trends over time. Here is an example of how to create a line chart using JS Google Chart:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2014', 1000, 400],
['2015', 1170, 460],
['2016', 660, 1120],
['2017', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
}
</script>
<div id="line_chart" style="width: 900px; height: 500px;"></div>
The above code creates a line chart with the title "Company Performance" and displays the sales and expenses data for the years 2014-2017. The chart is displayed in a div element with the id "line_chart".
The pie chart is used to display the proportion of different categories in a dataset. Here is an example of how to create a pie chart using JS Google Chart:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
<div id="pie_chart" style="width: 900px; height: 500px;"></div>
The above code creates a pie chart with the title "My Daily Activities" and displays the proportion of time spent on different activities such as work, eat, commute, watch TV, and sleep.
The bar chart is used to compare different categories in a dataset. Here is an example of how to create a bar chart using JS Google Chart:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000]
]);
var options = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Population',
minValue: 0
},
vAxis: {
title: 'City'
}
};
var chart = new google.visualization.BarChart(document.getElementById('bar_chart'));
chart.draw(data, options);
}
</script>
<div id="bar_chart" style="width: 900px; height: 500px;"></div>
The above code creates a bar chart with the title "Population of Largest U.S. Cities" and displays the population data for the largest cities in the United States in 2010 and 2000.
JS Google Chart is a powerful tool that allows developers to create interactive and visually appealing charts and graphs for web applications. It provides a wide range of chart types and customization options to make the charts more informative and engaging. With JS Google Chart, developers can easily create charts and graphs that can help users understand complex data and make informed decisions.