Creating a visually appealing chart similar to Excel can be achieved using JavaScript with a whopping 64382 lines of JSON data. No need for Chart.js or any additional tools - simply rely on JavaScript, HTML, and CSS to

I have a project that is due in just a few hours and I need to create a detailed chart using a large set of 64382 lines of JSON data. My knowledge of javascript is limited, so I am struggling to come up with ideas on how to approach this task. While I have created charts using javascript before, they only involved a minimal amount of data (3 lines). The type of chart I am aiming to create is more akin to something you would see in Excel rather than a typical bar or pie chart. I will include the code for the chart I previously made using 3 lines of data below.

Unfortunately, I haven't found any resources that clearly explain how to extract JSON data using a for loop. I believe this method could be useful in handling such a vast amount of information. For example, iterating through the data with a for loop like: for (i=0; i < data.length; i = i+1) { ... } However, I am struggling to understand how to integrate this data into my chart creation process. Additionally, I need to ensure that there are no duplicates from countries like Afghanistan or Canada, which requires specific code implementation.

<div id="printmytable"></div>

<script>

function buildmyTable() {

 var inventors = [{name:"Tim Berners-Lee",invention:"6xU & HTML"},{name:"Haken Wium Lie",invention:"CSS"},{name:"Brendan Eich",invention:"Javascript"}];

 // building a string variable including all table codes and data
 var mytable = "<table border='1'>";
 mytable = mytable + "<th>Inventor</th><th>Invention</th>";

 // looping through the data table to add information
 for (i = 0; i < inventors.length; i = i + 1) {
    mytable = mytable + "<tr>";
    mytable = mytable + "<td>" + inventors[i].name + "</td><td>" + inventors[i].invention + "</td>";
    mytable = mytable + "</tr>";
 }

 mytable = mytable + "</table>";

 // obtaining the div element and substituting mytable data within it
 var placetoprint = document.getElementById("printmytable");
 placetoprint.innerHTML = mytable;

}

buildmyTable()

</script>

I am looking to create a chart resembling an Excel-based visualization where each country is represented uniquely without any duplicates. My current knowledge on this topic is limited, leaving me unsure about how to proceed effectively.

Answer №1

I made adjustments to the actual data you wish to showcase by incorporating multiple countries with only a few entries. This will illustrate how to avoid displaying duplicate countries by utilizing an array to store those that have already been shown, as well as how to access the different nodes of the objects within your data array.

Pay close attention to the if statement before creating a new table row. While there are alternative methods to achieve this, essentially you need a mechanism to keep tabs on the countries that have already been displayed.

var data = [
    {
        "dims": {
            "COUNTRY": "Afghanistan",
            "YEAR": "2016",
            "GHO": "Number of physicians"
        },
        "Comments": "Includes doctors</br> Data Source: Ministry of Public Health and other Ministries",
        "Value": "9842"
    },
    {
        "dims": {
            "COUNTRY": "Afghanistan",
            "YEAR": "2016",
            "GHO": "Number of dentistry personnel"
        },
        "Comments": "Includes Dentists</br> Data Source: Ministry of Public Health and other Ministries",
        "Value": "120"
    },
    {
        "dims": {
            "COUNTRY": "Canada",
            "YEAR": "2016",
            "GHO": "Number of pharmaceutical personnel"
        },
        "Comments": "Includes Pharmacists</br> Data Source: Ministry of Public Health and other Ministries",
        "Value": "1675"
    },
    {
        "dims": {
            "COUNTRY": "Mongolia",
            "YEAR": "2015",
            "GHO": "Number of physicians"
        },
        "Comments": "Includes doctors</br> Data Source: Ministry of Public Health and other Ministries",
        "Value": "9808"
     }
]
              


function buildmyTable() {

  // Generate a string variable containing all the table code and data
  var mytable = "<table border='1'>";
  mytable = mytable + "<th>Country</th><th>Value</th>";

  // Iterate through the data table to add information
  var countries = []
  for (i = 0; i < data.length; i = i + 1) {
    if (!countries.includes(data[i].dims.COUNTRY)){
      mytable = mytable + "<tr>";
      mytable = mytable + "<td>" + data[i].dims.COUNTRY + "</td><td>" + data[i].Value + "</td>";
      mytable = mytable + "</tr>";
      countries.push(data[i].dims.COUNTRY);
    }
  }

  mytable = mytable + "</table>";

  // Retrieve the desired div and insert the generated table data
  var placetoprint = document.getElementById("printmytable");
  placetoprint.innerHTML = mytable;

}

buildmyTable()
<div id="printmytable"></div>

Trust this serves as a useful reference. Best of luck!

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

AngularJS and ExpressJS clash in routing (Oops, Crash!)

When setting up routing in angularjs and expressjs, I have created app.all('/*'...) to enable rendering index.html. However, whenever I use /*, the page crashes with an "Aw, Snap!" message. angularjs home.config(function($routeProvider,$locatio ...

Utilizing Express REST API with Postgres through the HTTP method

I am currently working on implementing REST APIs with Express and Postgres. I have a scenario where I need to delete all instances from a table based on the user_id foreign key, and then insert new instances with the same user_id. I'm unsure which HTT ...

What is the best approach for clipping borders in a react-native application?

Take a look at the image showcasing what I aim to achieve with the green button in the layout: https://i.sstatic.net/cvzrK.png Do you see the border above view B? My goal is to have a curved border around the bottom bar. To accomplish this, I've st ...

unusual problem with referencing jQuery mobile pages and implementing click functionality

I am facing a strange issue with my index.html page, which is a website built using jQuery Mobile. The problem arises when I click on a button multiple times within a form on this page - it generates an alert to confirm that the button is working and then ...

Styling columns to be inline-flex without taking up the full height

I'm currently working on a project similar to "Trello" or "Zenhub," using a Kanban board with 4 columns placed in a div#board. The columns are set to display: inline flex, creating a neat horizontal alignment. However, I encountered an issue where eac ...

Using HTML and JavaScript to choose relatives from the extended family: Uncles and Aunts

Looking for a better way to target elements in your HTML code? <div class="chunk" id=""> <div class="chunkContent"> <div class="textLeft" ></div> <div class="textRight" ></div> <div class= ...

Is it possible to create this layout using Bootstrap 5? I want to stack spans, with one inside the container and one outside

Trying to achieve a specific design using Bootstrap 5.3. https://i.sstatic.net/STifm.jpg This design should be placed over the showcase, with the following code for the showcase displayed below: <div class="showcase d-flex flex-column"&g ...

AutoComplete issues a warning in red when the value assigned to the useState hook it is associated with is altered

const [selectedCountry, setSelectedCountry] = useState(); <Autocomplete autoHighlight={true} //required autoSelect={true} id="geo-select-country" options={availableCountries} value={se ...

Exploring Firebase database with AngularJS to iterate through an array of objects

I'm working on an app that pulls data from a Firebase database, but I'm running into an issue. When I try to loop through the data and display it on the page, nothing shows up. However, if I use console.log to output the data, it's all there ...

Whenever I work with NPM, node.js, and discord.js, I consistently encounter the error message stating "TypeError: Cannot read property 'setPresence' of null."

I'm developing a Discord bot with NPM and discord.js, but I keep encountering an error that says "TypeError: Cannot read property 'setPresence' of null". Here is my bot code: const Discord = require('discord.js'); const { prefix, ...

The inner radius remains constant in the Chart.js Doughnut Chart

I've been trying to create a half doughnut chart using Chart.js, similar to the image linked below. However, I'm having trouble adjusting the thickness of the pie chart. Despite using the innerRadius property, it's not producing the desired ...

I desire to receive comments only once since they are being rehashed repeatedly

On the server-side: This is where I retrieve the comment from the server db.postSchema .findOne({ _id: comment.post }) .populate("owner") .exec((err, users) => { for (let i = 0; i < ...

Execute Cheerio selector once the page has finished loading

Hey there! I'm trying to extract the URL value of an iframe on this website: I've checked the view page source but couldn't find the iframe. Looks like it's loaded after the page is fully loaded through JavaScript. Could it be that ...

Tips for utilizing the "this" keyword in JavaScript in conjunction with the change function

I'm currently facing an issue with the change function. I have two dropdowns that are dependent on each other. Whenever the first dropdown changes, it triggers a change in the second dropdown as well. I achieved this functionality using jQuery AJAX. H ...

Looking to dynamically display users added to an array in a table using Angular and JavaScript?

As a newcomer to javascript and angularjs, I recently attempted to build a table that would display all users in an array dynamically as new users are added through a form. However, each time I run my code, I encounter the error message "Fill out the entir ...

How can you effectively transfer arguments from one component to another using router.push() in Vue.js?

I need help with implementing a feature where upon clicking the edit button in a row, all the details from that particular row should be passed to a form component. I want to populate the form fields with default values from the parameters provided. Can ...

"Ng-repeat function seems to be malfunctioning, although I am able to view

There seems to be an issue with ng-repeat when dealing with an array of objects: dummy.json [ {"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]}, {"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]} ] While I am able to fetch the total ...

The jQuery script fails to function properly within dynamically loaded content via ajax

After browsing through various articles and seeking help from Google, I've managed to do some basic coding as a designer. However, there's a complex problem that I'm struggling with. On my main page, I have news displayed and when scrolling ...

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

How can I implement pagination using jQuery?

I'm looking to incorporate jQuery pagination in my CodeIgniter project. After doing some research on the CodeIgniter forum and CodeIgniter AJAX Pagination Example/Guideline, I came across suggestions to check out a solution on TOHIN's blog. Howe ...