Today, We want to share with you Google Responsive Charts (Pie Bar Column) Examples.In this post we will show you Chart with Dynamic Data using Google Charts, hear for Google Charts Tutorials – chart js we will give you demo and example for implement.In this post, we will learn about Draw Multiple Responsive Charts with Google Charts with an example.
Google Responsive Charts (Pie Bar Column) Examples
There are the Following The simple About Google Responsive Charts (Pie Bar Column) Examples Full Information With Example and source code.
As I will cover this Post with live Working example to develop Draw Responsive Charts (Pie Bar Column) using Google Charts, so the some major files and Directory structures for this example is following below.
- index.html
- index.js
- style.css
Creating The Interface
index.html
This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.html.
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Google Responsive Charts (Pie Bar Column) Examples</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="row"> <div class="col-md-12 text-center"> <h1>Google Responsive Charts (Pie Bar Column) Examples</h1> <p>Full blog post details <a href="https://www.pakainfo.com">Pakainfo.com</a></p> </div> <div class="pakainfo col-md-4 col-md-offset-4"> <hr /> </div> <div class="infinityknow clearfix"></div> <div class="col-md-6"> <div id="responsive_chart1" class="liveChart"></div> </div> <div class="col-md-6"> <div id="responsive_chart2" class="liveChart"></div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://www.google.com/jsapi'></script> <script src="js/index.js"></script> </body> </html>
Creating the Script
index.js
google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(liveMakeChart1); function liveMakeChart1() { var data = google.visualization.arrayToDataTable([ ['Year', 'status', 'points'], ['2204', 1200, 580], ['2205', 1500, 950], ['2206', 880, 1300], ['2207', 1050, 540] ]); var options = { title: 'Member Performance', hAxis: {title: 'Year', titleTextStyle: {color: 'green'}} }; var liveChart = new google.visualization.ColumnChart(document.getElementById('responsive_chart1')); liveChart.draw(data, options); } google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(liveMakeChart2); function liveMakeChart2() { var data = google.visualization.arrayToDataTable([ ['Year', 'status', 'points'], ['2113', 1200, 580], ['2114', 1500, 950], ['2115', 880, 1300], ['2116', 1050, 540] ]); var options = { title: 'Member Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#3d3d3d'}}, vAxis: {minValue: 0} }; var liveChart = new google.visualization.AreaChart(document.getElementById('responsive_chart2')); liveChart.draw(data, options); } $(window).resize(function(){ liveMakeChart1(); liveMakeChart2(); });
Creating the Style CSS
style.css
.liveChart { width: 100%; min-height: 400px; } .row { margin: 0 !important; }
Demo – Make Google Charts Responsive
Google Responsive Charts – output
Angular 6 CRUD Operations Application Tutorials
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about Google Responsive Charts (Pie Bar Column) Examples.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.