3d grafiek maken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Berta Pappens

Berta Pappens

08/12/2023 14:54:02
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>';


?>


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.
 
PHP hulp

PHP hulp

22/07/2024 23:02:36
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 15:16:51
Quote Anchor link
Wat voor grafiek? Heb je al naar Chart.JS gekeken?
Gewijzigd op 08/12/2023 15:17:29 door - Ariën -
 
Berta Pappens

Berta Pappens

08/12/2023 15:20:07
Quote Anchor link
Ja inderdaad en ook chatgpt heeft mij enkele voorstellen gedaan maar niks werkte ?
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 15:27:52
Quote Anchor link
ChatGPT is ook geen wonder. Met kleine stapjes kan je soms wat meer bereiken dan één grote vraag. Maar je moet wel weten wat er precies gebeurt in zo een code.

Maar dan blijft de vraag: Wat voor grafiek? Staafdiagram, Cirkel etc....?
 
Berta Pappens

Berta Pappens

08/12/2023 15:29:57
Quote Anchor link
een bargraph als het kan .
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 15:32:09
Quote Anchor link
Probeer eerst eens een statische met vaste dummy-data te bouwen. Samples genoeg, lijkt me.

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 -
 
Berta Pappens

Berta Pappens

08/12/2023 15:37:21
Quote Anchor link
heb ik reeds gedaan maar omdat het hier om 3 velden gaat lukt het niet, geen enkel voorbeeld werkt met 3 velden.
heb dit gemaakt
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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 ..
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 15:42:56
Quote Anchor link
Dat is een taartdiagram met 10 maanden omdat er geen waarde is voor de laatste twee.
 
Berta Pappens

Berta Pappens

08/12/2023 15:46:10
Quote Anchor link
heb dit ook in bar graph al gedaan is ongeveer hetzelfde .
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 15:50:44
Quote Anchor link
Je wilt dus meerdere waarden kunnen tonen per maand? Dus bijvoorbeeld Wherigo, Multicache en Letterbox?

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.
 
Berta Pappens

Berta Pappens

08/12/2023 15:53:10
Quote Anchor link
ik wil in 1 grafiek per land en per type cache het aantal tonen .
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 15:56:18
Quote Anchor link
Dan is een stacked bar het beste.
 
Berta Pappens

Berta Pappens

08/12/2023 15:59:00
Quote Anchor link
oke , maar waar vind ik voorbeelden hoe het dan moet ?
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 16:00:13
Quote Anchor link
Op de site van Chart.JS? ;-)
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 -
 
Berta Pappens

Berta Pappens

08/12/2023 16:46:31
Quote Anchor link
ga dit bekijken maar hoe krijg ik de data in het script ?
Ben niet van plan om de data telkens manueel in het script te wijzigen ?
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 16:48:23
Quote Anchor link
Zie je vorige topic.

Je kan het direct doen tijdens het laden, maar evt ook via AJAX.
 
Berta Pappens

Berta Pappens

08/12/2023 16:53:07
Quote Anchor link
Oke, maar daar heb ik geen ondervinding mee ?
 
- Ariën  -
Beheerder

- Ariën -

08/12/2023 16:55:21
 
Berta Pappens

Berta Pappens

08/12/2023 17:07:35
Quote Anchor link
Oke, bedankt ik heb het voor elkaar gekregen door uw voorbeeld, ik heb gewoon mijn array aangepast naar de wensen van chart.js en het is opgelost.

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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 ?
 
Lauren Cloud

Lauren Cloud

09/12/2023 09:22:55
Quote Anchor link
** spamknip **
Gewijzigd op 09/12/2023 10:08:30 door - Ariën -
 
Berta Pappens

Berta Pappens

09/12/2023 09:29:47
Quote Anchor link
Lauren,

Wat voor zever kraam jij hier uit ?
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.