Utilizing Highcharts to visualize data from a mysql database through a dynamic Pie Chart

I am currently working on generating a pie chart using highcharts to visualize the distribution of each value assigned to a specific column (TYP_CODE) relative to the total number of entries.

synthese.php :

<?php  
session_start();

      if(!isset($_SESSION['nom'])) 
       {
           header("Location:Login.php");  
       }

try {

    $connexion = new PDO('mysql:host=localhost;dbname=gsbv1;charset=utf8', 'root', '');

     // echo 'Successfully connected to the database ';
} catch (Exception $e) {

    die('Error : ' . $e->getMessage());
} 

$json_data= include ('fonctionbdd.php');

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style_rapport.css">
    <script src="https://kit.fontawesome.com/edec10413c.js" crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap" rel="stylesheet">
    <title>Reports</title>
</head>
...

fonctionbdd.php:

<?php  

try {

    $connexion = new PDO('mysql:host=localhost;dbname=gsbv1;charset=utf8', 'root', '');

     // echo 'Successfully connected to the database ';
} catch (Exception $e) {

    die('Error : ' . $e->getMessage());
} 


$sql="SELECT COUNT(DISTINCT TYP_CODE) as TYP_CODE FROM praticien";

 $reponse = $connexion->query($sql);

 if ($reponse->rowCount() > 0) {
  
   while($row = $reponse->fetch(PDO::FETCH_ASSOC)) {
    $arr=array(

         'name'=>$row['TYP_CODE'],
        'data'=>array_map('intval', explode(',', $row['TYP_CODE']))
    );

    $series_array[]= $arr;

  }
   return json_encode ($series_array) ;
 } 

?>

And the .sql file:

-- phpMyAdmin SQL Dump
-- version 5.0.2
...

...

Answer №1

Make sure to store your information within data properties in a series format similar to the given example.

  series: [{
     data: [<?php echo implode($data, ',') ?>]
  }]

Reference Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing trouble with setting values in JavaScript?

I have my code set up to display numbers 170 and 122 using Javascript, but I'm not seeing the expected output. <!DOCTYPE html> <html> <body> <button onclick="UidToPost()">Get It</button> <script> ...

What is the best way to clear an InputField when the user switches the RadioField selection?

I am currently using shadcn and react-hook-form. In my form, I have a Radiobutton that triggers an additional input field if the user selects yes. The issue I'm facing is when the user selects yes, fills out the extra input field, and then changes the ...

Troubleshooting: Issues with Custom Image Loader in Next.js Export

I'm encountering a problem while attempting to build and export my Next.JS project. The issue lies with Image Optimization error during the export process. To address this, I have developed a custom loader by creating a file /services/imageLoader.js ...

How can I extract particular combinations from a PHP array?

I have a unique question that is quite specific and despite searching online, I couldn't find an answer. So, I decided to seek advice here. Imagine my webpage has three sliders: one for selecting color options for a square, another for a circle, and ...

Could you recommend a JSON parser library capable of handling this particular value?

[{\"Berth\":8,\"Name\":\"GROUP OF 8 (EIGHT)\",\"Cost\":1400.0000,\"BookingFee\":40.0000,\"Available\":true,\"ProductId\":49},{\"Berth\":6,\"Name\":\"GROUP OF 6 ( ...

JavaScript: Activate the element with the first class of its children

This code is a visual representation of what I'm trying to accomplish... <style> .red{background:red} .blue{background:blue} </style> <div id=test> <button>1</button> <button>2</button> </div> ...

Fresh HTML Division located above the Homescreen and fixed to the top of the webpage

I have successfully implemented a full page video background on the homepage of my website. However, I am facing an issue where the "About" section is stuck at the top of the site and I cannot seem to figure out why. I want the video background to remain f ...

Center the span in CSS by setting its position to absolute

I am trying to create a span element positioned as absolute inside a div. The div has top and left values set. When the user inputs text, the span expands with the given text towards the right to contain it. However, I would like it to grow symmetrically o ...

What is the process for retrieving the information sent from the client application to the jsreport server?

I want to create a downloadable pdf report through my angular application using jsreport. The client app makes a POST request passing sample data to the report server in this manner. $http.post('http://localhost:5488/api/report', { ' ...

Learn how to seamlessly update broken images on a webpage with a placeholder error image using the MooTools 1.2 framework

Currently working on a project with PHP, MySQL and utilizing Mootools 1.2 as the JavaScript framework. I am trying to find a way for all broken images to automatically be replaced with a designated error image. Any suggestions on how I can achieve this? ...

Navigating to a different page using the browser address bar causes the context to be reset

Upon receiving the user's data from the API on the login page, it is set in the user context. Subsequently, upon redirection to the AdminPanelApp, the data within the user context is displayed accurately. However, if I am in the AdminPanelApp and navi ...

Tips for ensuring that the lightbox scrolling feature only affects the lightbox and not the entire page

Currently, I am utilizing the lightbox_me jQuery plugin to trigger a lightbox when a user clicks on a product. The issue I am facing is that the lightbox content often extends below the visible area, causing the entire page to scroll when using the right s ...

sending information using a Button in the swift programming language

Trying to send data from my ViewController to TableViewPlace.swift using buttons. However, when I select a button, it does not return anything. viViewController class ViewController: UIViewController { struct Country{ var id :Int ini ...

Transferring data from Array/Dict in Xcode to JSON, then to PHP, and finally

I'm struggling with this issue and it's driving me crazy. It should be simple, but I feel like I'm missing something obvious. I suspect my lack of PHP/mysql skills is the root cause, as I can't seem to get it to work. I've searched ...

When displaying a collection of components, clicking a button will always select the most recent element in the array

Can you explain why this code won't work in a React environment? Every time the button is clicked, it picks up the value "name" from the last element in the array. In this example, the dialog will always display the name "John2". import React from "r ...

Proper technique for utilizing loadImage in p5.js?

I've been working on loading image URLs from a json file and everything seems to be functioning correctly, except for the actual images not displaying. Currently, I have a simple click carousel set up where clicking moves the index to the next image. ...

Error: PDFJS is not recognized in an Asp.net environment

Trying to showcase a PDF using the canvas and PDF.JS Stable v.2.2.228, but encountering an error in the console that says: ReferenceError: PDFJS is not defined. Information points towards the removal of the global PDFJS object; however, struggling to find ...

Suggestions for displaying combination data in JSON format?

Currently, I am working on integrating an API that provides information on the number of users using a specific app. For instance, let's say I need to retrieve data indicating 10 individuals are exclusively using App1, 8 are solely using App2, 8 are ...

Pusher authentication issue: socket ID not defined

I am currently facing an issue while trying to establish a private channel for users to transmit data to my node.js server. Upon making the request, I encounter an error where pusher:subscription_error is returned with the error code 500. Upon checking my ...

Is it possible to create a unique texture transition effect in three.js?

Currently, I am working on creating a model viewer in three.js using opengl. One of the key features I am trying to implement is the ability to dynamically change textures while the model is running. So far, I have managed to achieve this functionality, ...