Convert information from a JSON file into a hierarchical tree structure for visualization on a treemap

Not too long ago, I asked this question. However, I am still encountering errors and feeling confused about how to resolve them.

I have some code that I want to modify as follows:

var data = google.visualization.arrayToDataTable([
      ['Location', 'Parent', 'Size', 'Color'],
      ['Jawa', null, 0, 0],
      ['Jawa Tengah', 'Jawa', 0, 0],
      ['Jawa Timur', 'Jawa', 0, 0],
      ['Jawa Barat', 'Jawa', 0, 0],
      ['SAL01', 'Jawa Barat', 89, 50],
      ['SAL02', 'Jawa Tengah', 77, 40],
      ['SAL03', 'Jawa Tengah', 71, 28]
    ]);

Here is the snippet of my code:

function drawChart(){
        var dataFromPHP = <?php echo file_get_contents('clientdata.json'); ?>;
        $dataFromPHP = file_get_contents('clientdata.json');
        $json = json_decode($dataFromPHP, TRUE);

        // Console.log(dump_dataFromPHP);
        $provinsi = 'SELECT provinsi , LEFT(provinsi, 4) AS lala FROM data_client';
        $query = 'SELECT provinsi ,kode_sales, gaji, count(kode_sales) AS T_nasabah FROM data_client GROUP BY kode_sales';
                    $exec = mysqli_query($con,$query);
        $execProv = mysqli_query($con,$provinsi);                           
                    var data = google.visualization.arrayToDataTable([
        ['Location', 'Parent' , 'Size', 'Color'],   

        echo "['".$row['lala']."', null, 0, 0],";
        while($row = mysqli_fetch_array($execProv)){ 
        echo "['".$row['provinsi']."','".$row['lala']."',0,0],";
        }
        while($row = mysqli_fetch_array($exec)){ 
        echo "['".$row['kode_sales']."','".$row['provinsi']."',".$row['gaji'].",".$row['T_nasabah']."],";
        }];

This is the content of my clientdata.json file:

[
{
    "kode_client": "CLI01",
    "nama": "Edo",
    "tanggal_lahir": "01\/05\/1967",
    "alamat": "Nusa Hijau",
    "telp": "085634234",
    "produk": "Titanium",
    "gaji": "5000000",
    "cabang": "Bandung",
    "provinsi": "Jawa Barat",
    "kode_sales": "SAL01"
},
{
    "kode_client": "CLI02",
    "nama": "Santoso Imam",
    "tanggal_lahir": "15\/12\/1979",
    "alamat": "Padasuka",
    "telp": "08513087645",
    "produk": "Investra Link",
    "gaji": "4500000",
    "cabang": "Cimahi",
    "provinsi": "Jawa Tengah",
    "kode_sales": "SAL02"
},
{
    "kode_client": "CLI03",
    "nama": "Mukidi",
    "tanggal_lahir": "01\/01\/1991",
    "alamat": "Mujihat",
    "telp": "085213123",
    "produk": "Titanium",
    "gaji": "12500000",
    "cabang": "Bandung",
    "provinsi": "Jawa Tengah",
    "kode_sales": "SAL03"
}
  ]

I need to format these values for my Treemap chart using Google Chart. Your help is greatly appreciated. Thank you in advance :')

Answer №1

Finally, my treemap is displaying correctly in the browser!

var dataFromPHP = <?php echo file_get_contents('clientdata.json'); ?>;
var newData = [];
function drawChart(){
                    var data = google.visualization.arrayToDataTable([
                        ['Location', 'Parent' , 'Size', 'Color'],
                        newData[0] = [$provinsi, null , 0, 0],

                    ]);

        console.log(data);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true

        });
        chart.draw(data, options);      
        }

        });

However, the format for values still needs some adjustments.

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

What is the best way to encapsulate a function that uses `this.item.findElement()` from Selenium in a separate file?

I'm currently working on setting up a Selenium Webdriver and Cucumber.js test environment using Node.js. In the homePageSteps.js file, I have a check to verify if a banner exists on a page: Then('there should be a banner', async function() ...

When you utilize React.createRef, the value of `current` is consistently null

I attempted to follow the steps outlined in this guide. Despite my efforts, I seem to be overlooking something as I can't figure out why current always returns null in this specific scenario. class App extends React.PureComponent { constructor(pro ...

How can I achieve super subtle shading effects in three.js?

Is there a way to achieve a very soft and subtle shadow in three.js, similar to the one in this image? https://i.sstatic.net/6B6en.jpg So far, I have only been able to create something like this: https://i.sstatic.net/a3rgD.png Here are my current light ...

How can you determine if a mouseover event is triggered by a touch on a touchscreen device?

Touchscreen touches on modern browsers trigger mouseover events, sometimes causing unwanted behavior when touch and mouse actions are meant to be separate. Is there a way to differentiate between a "real" mouseover event from a moving cursor and one trigg ...

Display two elements within a single table column by utilizing an array in Vue.js

I have a requirement to display 2 items from an array in one table TD ( column ). Below is the example mock data provided: agendas: [ [ { tag: 'p', class: 'm-agenda__date', value: & ...

What causes the data to flicker between the old and new values when the state is updated in ReactJS?

Currently, I am developing a single-page application that fetches data from the Star Wars API. In the character section of the project, the goal is to display characters per page with the ability to navigate to the next or previous pages by clicking on but ...

How can I implement a unique click handler for each individual owl carousel instance to refresh them

I'm working with multiple owl carousels that share the same class. The challenge is figuring out how to target the current slider and refresh the next one when clicked, making it the new current slider. Here's my current code snippet: $(".o ...

FUSION: Merging JSON arrays based on shared key

Looking at my JSON data, I have an array of workers and an array of worksites. Each worker is associated with a worksite ID, so I need to merge them together within an array. [ { "worksite_candidates": { "worksite_id": " ...

The error "clearRect is not defined in javascript" occurs when the property is being called on an undefined object in the JavaScript

I've encountered a similar question before, but unfortunately, the solution provided didn't help me! I'm relatively new to JavaScript and have been struggling with this issue for nearly a day now without success. The structure of my class a ...

Creating a Selectable Child Form in ReactJS that Sends Data to Parent Form

Sorry for the lack of details, I'm struggling to explain this situation clearly. I'm currently learning ReactJS and JS. In a project I am working on, I have the following requirements: There is a form where users can input text and numbers. The ...

Issue with jQuery animation delay functionality experiencing issues specifically in Google Chrome browser

While browsing through similar questions, I couldn't find one quite like mine where the effect was working on one window but not on a subsequent one. I'm using jQuery library version 3.4.1. The code has been tested and is functioning as expected ...

Encountering a 404 error while attempting to access my React project's login page

I'm facing a 404 error issue while trying to log into my web application, but I am struggling to identify the root cause. Check out the code snippets provided below for reference: view image description here Context: I have developed a web applicatio ...

Having trouble understanding how to receive a response from an AJAX request

Here is the code that I am having an issue with: render() { var urlstr : string = 'http://localhost:8081/dashboard2/sustain-master/resources/data/search_energy_performance_by_region.php'; urlstr = urlstr + "?division=sdsdfdsf"; urlst ...

Display a Three.js scene on a canvas

I've been attempting to display the image below on a canvas numerous times, but unfortunately I can't seem to get it right. I attempted substituting var renderer = new THREE.WebGLRenderer({antialias: true}); with var renderer = new THREE.WebGLR ...

"Encountering XML parse error - Unable to locate any element when working with JSON

When trying to use JSON to add data into my database using the POST method, I encounter an issue: XML Parsing Error: no element found Location: moz-nullprincipal:{7c3ebd98-a00f-4a72-8a89-8094946cef8e Line Number 1, Column 1: Even though the browser is ab ...

Enhance Text Visibility following ng-view Location Adjustment within AngularJS

How can I implement text highlighting using the jquery highlight plugin after a user changes the ng-view location? The text that needs to be highlighted is on the returned page. Upon successful view change, I invoke the highlight() method: $scope.$on(&ap ...

Error encountered due to an extra escape character in JSON causing the API call to fail

I'm currently working on making an API call to a service running locally. The service requires the POST request to contain JSON data in this format: {"tool" : "name", "version" : "1", "payload" : "{"branch" : "main"}" These parameters are members of ...

extract individual components from the google books api

It has been quite a while since I last dabbled in JavaScript, so I decided to embark on a project creating a "bookcase" to organize the books I have read and those I still want to read. One challenge I encountered was figuring out how to separate the eleme ...

Customize MUI 5 input label background color for your own component

Struggling with overriding the background color for a MUI 5 input label on focus in a specific component? I successfully changed it to blue globally in my _theme.js file, but now need to make it red for my KeywordSearchTextField in index.js following MUI ...

How can I detect when the user has finished typing in the input field using React?

I've implemented a highly efficient component that sends messages to the server and displays them to other users in real-time. Check out the code snippet: const ChatInput = (props) => { const [message, setMessage] = useState(''); con ...