About Google Charts
Google Charts is an free online tool that allows you to create charts and graphs for your web pages. You can explore the Google Chart Gallery to find the chart type for your needs. Here is a simple examle:
Google Charts is an free online tool that allows you to create charts and graphs for your web pages. You can explore the Google Chart Gallery to find the chart type for your needs. Here is a simple examle:
<div class="chart-container">
<div class="chart-title">Fruit</div>
<div id="piechart_3d"></div>
</div>
.chart-container {
margin: 0 auto;
max-width: 890px;
border: 1px solid rgba(255, 255, 255, 0.45);
background: linear-gradient(to top,
#ffffff 0%, #dfe9f3 100%);
border-radius: 6px
}
.chart-title {
text-align: center;
font-weight: 700;
letter-spacing: 1px;
margin: 10px 0 0 0
}
#piechart_3d {
height: 100%;
width: 100%;
min-height: 260px
}
<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', 'Fruit'],
['Apples', 26],
['Pears', 9],
['Berries', 10],
['Grapes', 11]
]);
var options = {
is3D: true,
backgroundColor: 'transparent',
chartArea:{
left: 10,
top: 10,
width: '100%',
height: '80%'
},
legend: {
position: 'bottom',
alignment: 'center'
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
$(window).resize(function(){
drawChart();
});
</script>