-80%
Blossom Aura – Inspired by Guc#i Flor@ | Muskbliss
Original price was: ₹5.00.₹1.00Current price is: ₹1.00.
Blossom Aura by Muskbliss is a luxurious, floral-inspired fragrance, capturing the essence of Gucci Flora. With fresh citrus top notes, a heart of jasmine, rose, and peony, and a warm base of sandalwood and patchouli, this elegant scent is perfect for those who love a feminine, sophisticated aroma that lasts all day.
Add to cart
Buy Now
Practical – 5: Develop Following Program Using HTML5 and Google Chats API and Map
API
a. Using Google Charts API Basics draw charts like a Bar chart
b. Using Google Charts API Basics draw charts like a Line chart
c. Using Google Charts API Basics draw PieChart.
d. Using Google Charts API Basics draw Donut Chart.
e. Using Google Charts API Basics draw Candle Chart.
f. Using Google Charts API Basics draw other types of Chart.
g. Using Google API read JSON file and create Google Map.
5(A). Using Google Charts API Basics draw charts like a Bar chart
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = “text/javascript” src =”https://www.gstatic.com/charts/loader .js”>
</script>
<script type = “text/javascript”>
google.charts.load(‘current’, {packages:[‘corechart’]});
</script>
</head>
<body>
<div id = “container” style = “width: 550px;height: 400px; margin: 0 auto”>
</div>
<script language = “JavaScript”>
function drawChart() {
// Define the chart to be drawn.
var data =google.visualization.arrayToDataTable([
[‘Year’, ‘Asia’, { role: ‘annotation’},’Europe’, { role: ‘annotation’}],
[‘2012′, 900,’900’, 390, ‘390’],
[‘2013′, 1000,’1000′, 400,’400’],
[‘2014′, 1170,’1170′, 440,’440’],
[‘2015′, 1250,’1250′, 480,’480’],
[‘2016′, 1530,’1530′,540,’540’]]);
var options = {title: ‘Population(in millions)’, isStacked:’percent’};
// Instantiate and draw the chart.
var chart = newgoogle.visualization.BarChart(document.getElementById(‘container’));
51MEET GHELANI (ET21BTAI017)
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
5(B). Using Google Charts API Basics draw charts like a Line chart
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = “text/javascript” src = “https://www.gstatic.com/charts/loader .js”>
</script>
<script type = “text/javascript”>
google.charts.load(‘current’, {packages: [‘corechart’,’line’]});
</script>
</head>
<body>
<div id = “container” style = “width: 550px; height: 400px; margin: 0 auto”>
</div>
<script language = “JavaScript”>
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Month’);
data.addColumn(‘number’, ‘Vizag’);
data.addColumn(‘number’, ‘Surat’);
data.addColumn(‘number’, ‘Indore’);
52MEET GHELANI (ET21BTAI017)
data.addColumn(‘number’, ‘Mumbai’);
data.addRows([
[‘Jan’, 7.5, 8.5, 9.5, 10],
[‘Feb’, 6.9, 0.8, 0.6, 4.2],
[‘Mar’, 9.5, 5.7, 3.5, 5.7],
[‘Apr’, 14.5, 11.3, 8.4, 8.5],
[‘May’, 18.2, 17.0, 13.5, 11.9],
[‘Jun’, 21.5, 22.0, 17.0, 15.2],
[‘Jul’, 25.2, 24.8, 18.6, 17.0],
[‘Aug’, 26.5, 24.1, 17.9, 16.6],
[‘Sep’, 23.3, 20.1, 14.3, 14.2],
[‘Oct’, 18.3, 14.1, 9.0, 10.3],
[‘Nov’, 13.9, 8.6, 3.9, 6.6],
[‘Dec’, 9.6, 2.5, 1.0, 4.8]
]);
// Set chart options
var options = {‘title’ : ‘Average Temperatures of Cities’,
hAxis: {
title: ‘Month’
},
vAxis: {
title: ‘Temperature’
},
‘width’:550,
‘height’:400,
pointsVisible: true
};
// Instantiate and draw the chart.
var chart = new
google.visualization.LineChart(document.getElementById(‘container’));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
53MEET GHELANI (ET21BTAI017)
5(C). Using Google Charts API Basics draw PieChart.
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = “text/javascript” src =”https://www.gstatic.com/charts/loader .js”>
</script>
<script type = “text/javascript”>
google.charts.load(‘current’, {packages:[‘corechart’]});
</script>
</head>
<body>
<div id = “container” style = “width: 550px;height: 400px; margin: 0 auto”>
</div>
<script language = “JavaScript”>
function drawChart() {
// Define the chart to be drawn.
var data = newgoogle.visualization.DataTable();
data.addColumn(‘string’, ‘restraunt’);
data.addColumn(‘number’, ‘Percentage’);
data.addRows([
[‘LaPino’, 45.0],
[‘PizzaHut’, 26.8],
[‘PapaJhons’, 12.8],
[‘BK’, 8.5],
[‘Dominos’, 32.5],
[‘Others’, 0.7]
]);
54MEET GHELANI (ET21BTAI017)
// Set chart options
var options = {‘title’:’Pizza market share’,’width’:550,’height’:400, is3D:true, slices: {
1: {offset: 0.2},
3: {offset: 0.3},
5: {offset: 0.3}
}
};
// Instantiate and draw the chart.
var chart = newgoogle.visualization.PieChart(document.getElementById(‘container’));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
5(D). Using Google Charts API Basics draw Donut Chart.
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = “text/javascript” src =”https://www.gstatic.com/charts/loader .js”>
</script>
<script type = “text/javascript”>
google.charts.load(‘current’, {packages:[‘corechart’]});
</script>
</head>
<body>
<div id = “container” style = “width: 550px;height: 400px; margin: 0 auto”>
55MEET GHELANI (ET21BTAI017)
</div>
<script language = “JavaScript”>
function drawChart() {
// Define the chart to be drawn.
var data = newgoogle.visualization.DataTable();
data.addColumn(‘string’, ‘restraunt’);
data.addColumn(‘number’, ‘Percentage’);
data.addRows([
[‘LaPino’, 45.0],
[‘PizzaHut’, 26.8],
[‘PapaJhons’, 12.8],
[‘BK’, 8.5],
[‘Dominos’, 32.5],
[‘Others’, 0.7]
]);
// Set chart options
var options = {‘title’:’Pizza market share’,’width’:550,’height’:400, pieHole: 0.6};
// Instantiate and draw the chart.
var chart = newgoogle.visualization.PieChart(document.getElementById(‘container’));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
56MEET GHELANI (ET21BTAI017)
5(E). Using Google Charts API Basics draw Candle Chart.
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = “text/javascript” src =”https://www.gstatic.com/charts/loader .js”>
</script>
<script type = “text/javascript”>
google.charts.load(‘current’,{packages: [‘corechart’]});
</script>
</head>
<body>
<div id = “container” style = “width:550px; height: 400px; margin: 0 auto”>
</div>
<script language = “JavaScript”>
function drawChart() {
// Define the chart to be drawn.
var data =google.visualization.arrayToDataTable([
[‘Mon’, 20, 28, 38, 45],
[‘Tue’, 31, 38, 55, 66],
[‘Wed’, 50, 55, 77, 80],
[‘Thu’, 77, 77, 66, 50],
[‘Fri’, 68, 66, 22, 15]
// Treat first row as data as well.
], true);
// Set chart options
var options = {legend: ‘none’,bar: { groupWidth: ‘100%’ },
//Remove space between bars.
candlestick: {fallingColor: { strokeWidth: 0,fill: ‘pink’ },
// red
risingColor: { strokeWidth: 0,fill: ‘grey’ }
// green
}};
// Instantiate and draw the chart.
var chart = newgoogle.visualization.CandlestickChart(document.getElementById(‘container’));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
57MEET GHELANI (ET21BTAI017)
</script>
</body>
</html>
5(F). Using Google Charts API Basics draw other types of Chart.
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = “text/javascript” src =”https://www.gstatic.com/charts/loader .js”>
</script>
<script type = “text/javascript” src =”https://www.google.com/jsapi”>
</script>
<script type = “text/javascript”>
google.charts.load(‘current’, {packages:[‘timeline’]});
</script>
</head>
<body>
<div id = “container” style = “width: 550px;height: 400px; margin: 0 auto”>
</div>
<script language = “JavaScript”>
function drawChart() {
// Define the chart to be drawn.
var data = newgoogle.visualization.DataTable();
data.addColumn({ type: ‘string’, id:’CEO’ });
data.addColumn({ type: ‘string’, id:’name’ });
data.addColumn({ type: ‘date’, id: ‘Start’});
58MEET GHELANI (ET21BTAI017)
data.addColumn({ type: ‘date’, id: ‘End’});
data.addRows([
[‘1’, ‘Rajeev’, new Date(1789, 3, 30),new Date(1797, 2, 4) ],
[ ‘2’, ‘Rohan’, new Date(1797, 2, 4),new Date(1801, 2, 4) ],
[ ‘3’, ‘Sisily’, new Date(1801, 2, 4), newDate(1809, 2, 4) ],
[ ‘4’, ‘Aditya’, new Date(1809, 2, 4),new Date(1819, 2, 4) ]]);
var options = {width: ‘100%’,height: ‘100%’
};
// Instantiate and draw the chart.
var chart = newgoogle.visualization.Timeline(document.getElementById(‘container’));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
(Sankey Chart)
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = “text/javascript” src =”https://www.gstatic.com/charts/loader .js”>
</script>
<script type = “text/javascript” src =”https://www.google.com/jsapi”>
</script>
<script type = “text/javascript”>
google.charts.load(‘current’, {packages:[‘sankey’]});
</script>
</head>
<body>
59MEET GHELANI (ET21BTAI017)
<div id = “container” style = “width: 550px;height: 400px; margin: 0 auto”>
</div>
<script language = “JavaScript”>
function drawChart() {
// Define the chart to be drawn.
var data = newgoogle.visualization.DataTable();
data.addColumn(‘string’, ‘From’);
data.addColumn(‘string’, ‘To’);
data.addColumn(‘number’, ‘Weight’);
data.addRows([
[ ‘Brazil’, ‘Portugal’, 5 ],
[ ‘Brazil’, ‘France’, 1 ],
[ ‘Brazil’, ‘Spain’, 1 ],
[ ‘Brazil’, ‘England’, 1 ],
[ ‘Canada’, ‘Portugal’, 1 ],
[ ‘Canada’, ‘France’, 5 ],
[ ‘Canada’, ‘England’, 1 ],
[ ‘Mexico’, ‘Portugal’, 1 ],
[ ‘Mexico’, ‘France’, 1 ],
[ ‘Mexico’, ‘Spain’, 5 ],
[ ‘Mexico’, ‘England’, 1 ],
[ ‘USA’, ‘Portugal’, 1 ],
[ ‘USA’, ‘France’, 1 ],
[ ‘USA’, ‘Spain’, 1 ],
[ ‘USA’, ‘England’, 5 ]
]);
// Set chart options
var options = {width: 550,sankey: {node: { colors: [ ‘aqua’ ] },
link: {color: {stroke: ‘grey’,strokeWidth: 1
}},}};
// Instantiate and draw the chart.
var chart = newgoogle.visualization.Sankey(document.getElementById(‘container’));
chart.draw(data, options);}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
60MEET GHELANI (ET21BTAI017)
5(G). Using Google API read JSON file and create Google Map.
<!DOCTYPE HTML>
<html>
<head>
<title>Google API JSON to Google Map</title>
<meta charset=”utf-8″>
<meta name=”author” content=”SidPro” />
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ />
<meta name=”description” content=”Using Google API read JSON file and create Google Map.”
/>
<meta name=”keywords” content=”Google,API,Geo Chart,Covid19 Geo Chart,Covid19″ />
<script src=”js/jquery-3.5.1.min.js”></script>
<script type=”text/javascript” src=”js/loader .js”></script>
</head>
<!– Live link: https://sidpro-hash.github.io/HTML-
Canvas/Data%20visulization%20JavaScript/google%20map%20json.html –>
<body>
<h2>Read JSON file and create Google Map of Total COVID-19 cases in country
[Date:01/04/2021]</h2>
<div id=”chart” style=”width: 900px; height: 500px”></div>
</body>
<script>
// Visualization API with the ‘corechart’ package.
google.charts.load(‘current’, {‘packages’: [‘geochart’],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
‘mapsApiKey’: ‘AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY’
});
61MEET GHELANI (ET21BTAI017)
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: “data/Covid-19.json”,
dataType: “json”,
type: “GET”,
contentType: “application/json; charset=utf-8”,
success: function (data) {
var arr = [[‘Country’, ‘Total COVID-19 Cases’]];
$.each(data, function (k, v) {
arr .push([v.city, v.n]);
});
var Data = google.visualization.arrayToDataTable(arr);
//var Data = google.visualization.arrayToDataTable(covid19);
var options = {
colorAxis: { colors: [‘#9bbb58’, ‘#4f81bc’, ‘#c0504e’] },
backgroundColor: ‘#81d4fa’,
defaultColor: ‘#f5f5f5’,
tooltip: { textStyle: { color: ‘#871b47’ }, showColorCode: true }
};
var chart = new google.visualization.GeoChart(document.getElementById(‘chart’));
chart.draw(Data, options);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(‘File Error or Cross-origin police Error’);
}
});}
</script>
</html>
| size |
|---|
Recently viewed products
You have no recently viewed item.
Reviews
There are no reviews yet.