De PHPhulp kroeg
3d grafiek maken
Ik ken niks over het maken van 3d grafieken maar zou het willen leren kennen.
Is er iemand die kan helpen met het opbouwen ervan.
Ik heb vogende code en een array al.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
$host = "localhost"; /// use default
$username = "root"; /// write your mysql username
$password = ""; /// write your mysql password
$database = "test"; /// write your mysql database
$conn=mysqli_connect($host, $username, $password,$database) or die (mysqli_error());
// Controleren op verbinding
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Query uitvoeren om gegevens op te halen
$query = "SELECT land, `cache type`, COUNT(*) as aantal_caches FROM database_bel GROUP BY land, `cache type`";
$result = $conn->query($query);
// Verzamel gegevens voor de grafiek
$data = [];
while ($row = $result->fetch_assoc()) {
$data[$row['land']][] = [
'type' => $row['cache type'],
'count' => $row['aantal_caches']
];
}
echo '<pre>'.print_r($data, true).'</pre>';
?>
$host = "localhost"; /// use default
$username = "root"; /// write your mysql username
$password = ""; /// write your mysql password
$database = "test"; /// write your mysql database
$conn=mysqli_connect($host, $username, $password,$database) or die (mysqli_error());
// Controleren op verbinding
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Query uitvoeren om gegevens op te halen
$query = "SELECT land, `cache type`, COUNT(*) as aantal_caches FROM database_bel GROUP BY land, `cache type`";
$result = $conn->query($query);
// Verzamel gegevens voor de grafiek
$data = [];
while ($row = $result->fetch_assoc()) {
$data[$row['land']][] = [
'type' => $row['cache type'],
'count' => $row['aantal_caches']
];
}
echo '<pre>'.print_r($data, true).'</pre>';
?>
uit deze array krijg ik het volgende :
[Cyprus] => Array
(
[0] => Array
(
[type] => Multicache
[count] => 5
)
[1] => Array
(
[type] => Unknown Cache
[count] => 30
)
[2] => Array
(
[type] => Wherigo Cache
[count] => 2
)
)
[Denemarken] => Array
(
[0] => Array
(
[type] => Letterbox
[count] => 1
)
[1] => Array
(
[type] => Multicache
[count] => 40
)
[2] => Array
(
[type] => Unknown Cache
[count] => 4953
)
[3] => Array
(
[type] => Wherigo Cache
[count] => 3
)
)
Is er nu iemand die deze array kan overbrengen naar een 3d grafiek AUB.
Dank bij voorbaat .
Ps Ariën -> chatgpt weet er geen raad mee, alees wat deze weergeeft zijn fouten zonder grafiek op scherm.
Daarom stel ik hier de vraag aan de professionals.
Dank bij voorbaat.
Gewijzigd op 08/12/2023 15:17:29 door - Ariën -
Maar dan blijft de vraag: Wat voor grafiek? Staafdiagram, Cirkel etc....?
Zie ook de JSfiddle in dit topic:
https://www.phphulp.nl/php/forum/topic/grafiek-opmaken-per-maand-van-het-jaar/104811/
Gewijzigd op 08/12/2023 15:34:22 door - Ariën -
heb dit gemaakt
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<body>
<div
id="myChart" style="width:100%; max-width:600px; height:500px;">
</div>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Januari',545],
['Februari',6491],
['Maart',13340],
['April',1986],
['Mei',1635],
['Juni',1226],
['Juli',1161],
['Augustus',521],
['September',5265],
['Oktober',1504],
['November',0],
['December',0]
]);
const options = {
title:'World Wide Wine Production',
is3D:true
};
const chart = new google.visualization.PieChart(document.getElementById('myChart'));
chart.draw(data, options);
}
</script>
</body>
</html>
<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<body>
<div
id="myChart" style="width:100%; max-width:600px; height:500px;">
</div>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['Januari',545],
['Februari',6491],
['Maart',13340],
['April',1986],
['Mei',1635],
['Juni',1226],
['Juli',1161],
['Augustus',521],
['September',5265],
['Oktober',1504],
['November',0],
['December',0]
]);
const options = {
title:'World Wide Wine Production',
is3D:true
};
const chart = new google.visualization.PieChart(document.getElementById('myChart'));
chart.draw(data, options);
}
</script>
</body>
</html>
als je kijkt naar de data is het steeds met 2 veldjes , en ik zou graag hebben dat het per land en per type een totaal gegeven wordt in de grafiek. Blijkbaar is dit moeilijk want je vindt geen voorbeelden ..
Dan komt een 'floating bar' wel in de buurt met wat je wilt
https://www.chartjs.org/docs/latest/samples/information.html
Je kan per land een eigen grafiek gebruiken. Of je kan alles per land gebruiken in een stacked bar.
Het is net hoe je het wilt verdelen.
Ik heb hier een simpel voorbeeld van zo een 'stacked bar'
https://jsfiddle.net/buf2phw4/
Gewijzigd op 08/12/2023 16:01:07 door - Ariën -
Ben niet van plan om de data telkens manueel in het script te wijzigen ?
Je kan het direct doen tijdens het laden, maar evt ook via AJAX.
https://www.phphulp.nl/php/forum/topic/grafiek-opmaken-per-maand-van-het-jaar/104811/1/
Bedankt voor alles .
Toevoeging op 08/12/2023 17:20:20:
toch nog een probleempje , misschien weet iemand raad.
Als ik de grafiek gebruik via localhost geen probleem.
Als ik hem wil gebruiken via de host krijg ik dit :
Fout bij het parsen van JSON: SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at xhr.onreadystatechange (index.php:22:41)
en ik zie geen grafiek
Dit is mijn index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geo Grafiek</title>
<!-- Voeg Chart.js toe -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- Voeg hier de grafiekcontainer toe -->
<canvas id="geoChart"></canvas>
<script>
// Maak een AJAX-aanroep om de gegevens op te halen zonder jQuery
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
try {
// Probeer de gegevens op te halen en te verwerken als JSON
var data = JSON.parse(this.responseText);
// Voeg hier de code toe om een gestapelde staafdiagram te maken met Chart.js
var ctx = document.getElementById('geoChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: { stacked: true },
y: { stacked: true }
}
}
});
} catch (error) {
// Als er een fout optreedt bij het parsen van JSON
console.error("Fout bij het parsen van JSON: ", error);
}
} else {
// Als de status geen 200 OK is
console.error("Fout bij de AJAX-aanroep. Status: " + this.status);
}
}
};
xhr.open("GET", "graf.php", true);
xhr.send();
</script>
</body>
</html>
weet iemand raad ?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geo Grafiek</title>
<!-- Voeg Chart.js toe -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<!-- Voeg hier de grafiekcontainer toe -->
<canvas id="geoChart"></canvas>
<script>
// Maak een AJAX-aanroep om de gegevens op te halen zonder jQuery
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
try {
// Probeer de gegevens op te halen en te verwerken als JSON
var data = JSON.parse(this.responseText);
// Voeg hier de code toe om een gestapelde staafdiagram te maken met Chart.js
var ctx = document.getElementById('geoChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: { stacked: true },
y: { stacked: true }
}
}
});
} catch (error) {
// Als er een fout optreedt bij het parsen van JSON
console.error("Fout bij het parsen van JSON: ", error);
}
} else {
// Als de status geen 200 OK is
console.error("Fout bij de AJAX-aanroep. Status: " + this.status);
}
}
};
xhr.open("GET", "graf.php", true);
xhr.send();
</script>
</body>
</html>
weet iemand raad ?
Gewijzigd op 09/12/2023 10:08:30 door - Ariën -
Wat voor zever kraam jij hier uit ?