Data Visualization-and-Data-Modelling-week-6-LAB.pdf
ManzurAshraf1
21 views
11 slides
Jul 13, 2024
Slide 1 of 11
1
2
3
4
5
6
7
8
9
10
11
About This Presentation
Data Visualization-and-Data-Modelling-week-6-LAB.pdf
Slide Content
Chart data using Php& Json.
(Populating Data Using Server-Side
Code) –Installing XAMPP
Dr Manzur Ashraf
www.cic.vic.edu.au
(Populating Data Using Server-Side
Code) –Installing XAMPP
Dr Manzur Ashraf
www.cic.vic.edu.au
Presentation title 2
www.cic.vic.edu.au
You can use server-side code to acquire data to populate your chart. Your
server-side code can load a local file, query a database, or get the data in
some other way. The following PHP example demonstrates reading chart
data from a local text file when a page is requested. You can copy these
files to your own server, if it supports PHP.
www.cic.vic.edu.au
You can use server-side code to acquire data to populate your chart. Your
server-side code can load a local file, query a database, or get the data in
some other way. The following PHP example demonstrates reading chart
data from a local text file when a page is requested. You can copy these
files to your own server, if it supports PHP.
Presentation title 3
www.cic.vic.edu.au
Link: https://developers.google.com/chart/interactive/docs/php_example#exampleusingphp.html-file
www.cic.vic.edu.au
Link: https://developers.google.com/chart/interactive/docs/php_example#exampleusingphp.html-file
Presentation title 4
www.cic.vic.edu.au
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
www.cic.vic.edu.au
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Presentation title 5
www.cic.vic.edu.au
Link: https://developers.google.com/chart/interactive/docs/php_example#getdata.php-file
<?php
// This is just an example of reading server side data and sending it to the client.
// It reads a json formatted text file and outputs it.
$string = file_get_contents("sampleData.json");
echo $string;
// Instead you can query your database and parse into JSON etc etc
?>
www.cic.vic.edu.au
Link: https://developers.google.com/chart/interactive/docs/php_example#getdata.php-file
<?php
// This is just an example of reading server side data and sending it to the client.
// It reads a json formatted text file and outputs it.
$string = file_get_contents("sampleData.json");
echo $string;
// Instead you can query your database and parse into JSON etc etc
?>
Presentation title 6
www.cic.vic.edu.au
Link: https://developers.google.com/chart/interactive/docs/php_example#sampledata.json-file
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
www.cic.vic.edu.au
Link: https://developers.google.com/chart/interactive/docs/php_example#sampledata.json-file
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
Presentation title 7
www.cic.vic.edu.au
XAMPP
www.cic.vic.edu.au
XAMPP
Presentation title 8
www.cic.vic.edu.au
Clicking it will open http://localhost...
www.cic.vic.edu.au
Clicking it will open http://localhost...
Presentation title 9
www.cic.vic.edu.au
Put The FILES appropriately
www.cic.vic.edu.au
Put The FILES appropriately
Presentation title 10
www.cic.vic.edu.au
www.cic.vic.edu.au
www.cic.vic.edu.au
Prepared by Dr Manzur Ashraf
Prepared by Dr Manzur Ashraf
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 21
- Slides 11
- Age 507 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
30 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
27 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
23 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views