Steps to visualize an array of objects on a graph using Chart.js

Hey there! I'm facing an issue while trying to display my array of objects in a Chart.js graph. Here's the code snippet:

let timers = {neutral: 0, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
var detection = new Chart(c, {
    type: 'bar',
    data: {
        labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
        datasets: [{
            fill: false,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', // neutral
                'rgba(54, 162, 235, 0.2)', // happy
                'rgba(255, 206, 86, 0.2)', // sad
                'rgba(75, 192, 192, 0.2)', // angry
                'rgba(153, 102, 255, 0.2)', // surprised
                'rgba(255, 159, 64, 0.2)'   // disgust
            ],
            borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'                        
            ],
            borderWidth: 2,
            data: timers,
        }]
    },
    options: {
        indexAxis: 'x',
        responsive: true,
        plugins: {
            legend: {
                display: false,
                labels: {
                    font: {
                        size: 50
                    }
                }
            },
            title: {
                display: true,
                text: "Emotion timers"
            }
        }
    }
});

I'm encountering an issue where the graph is not displaying the labels as intended. Instead of using the labels provided, it seems to be using names from the object array, making it difficult for me to adjust the x-axis label sizes. Appreciate any guidance or tips on how to resolve this. Thanks in advance!

javascriptarraysgraphchart.js

Answer №1

Based on the documentation for chart js, when a map (key,value) is provided to the data field like timers, the keys are automatically treated as labels and the values as data points for plotting.

If you prefer to use your own custom labels instead, you can incorporate the following code snippet into your current code.

var keys = Object.keys(timers);
var values = keys.map(function(v) { return timers[v]; });

Then pass values instead of timers.

Complete code example -

let timers = {neutral: 0, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
var keys = Object.keys(timers);
var values = keys.map(function(v) { return timers[v]; });

var detection = new Chart(c, {
    type: 'bar',
    data: {
        labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
        datasets: [{
            fill: false,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)', // neutral
                'rgba(54, 162, 235, 0.2)', // happy
                'rgba(255, 206, 86, 0.2)', // sad
                'rgba(75, 192, 192, 0.2)', // angry
                'rgba(153, 102, 255, 0.2)', // surprised
                'rgba(255, 159, 64, 0.2)'   // disgust
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'                        
            ],
            borderWidth: 2,
            data: values,
        }]
    },
    options: {
        indexAxis: 'x',
        responsive: true,
        plugins: {
            legend: {
                display: false,
                labels: {
                    font: {
                        size: 50
                    }
                }
            },
            title: {
                display: true,
                text: "Emotion timers"
            }
        }
    }
});

Additionally, if you need to update the charts as the timers are updated within setInterval, you must include the chart creation code inside the setInterval function.

Feel free to refer to the provided full HTML file below:

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script>
    var i = 0;
    
    setInterval(updateChart,3000);
    function updateChart(){
        var c = document.getElementById("myChart");
        let chartStatus = Chart.getChart("myChart"); // <canvas> id
        if (chartStatus != undefined) {
          chartStatus.destroy();
        }
        i = i+1;
        let timers;
        if(i%2==0){
            timers = {neutral: 20, happy: 0, sad: 0, angry: 0, surprised: 0, disgust: 0};
        }
        else{
            timers = {neutral: 0, happy: 20, sad: 0, angry: 0, surprised: 0, disgust: 0};
        }
        var keys = Object.keys(timers);
        var values = keys.map(function(v) { return timers[v]; });
        var detection = new Chart(c, {
            type: 'bar',
            data: {
                labels: ["Neutral", "Happy", "Sad", "Angry", "Surprised", "Disgust"],
                datasets: [{
                    fill: false,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)', // neutral
                        'rgba(54, 162, 235, 0.2)', // happy
                        'rgba(255, 206, 86, 0.2)', // sad
                        'rgba(75, 192, 192, 0.2)', // angry
                        'rgba(153, 102, 255, 0.2)', // surprised
                        'rgba(255, 159, 64, 0.2)'   // disgust
                    ],
                    borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'                        
                    ],
                    borderWidth: 2,
                    data: keys.map(function(v) { return timers[v]; }),
                }]
            },
            options: {
                indexAxis: 'x',
                responsive: true,
                plugins: {
                    legend: {
                        display: false,
                        labels: {
                            font: {
                                size: 50
                            }
                        }
                    },
                    title: {
                        display: true,
                        text: "Emotion timers"
                    }
                }
            }
        });

    }
</script>
</head>
<button onclick="updateChart()">Update Chart</button>
<canvas id="myChart" width="100" height="100"></canvas>

To see this code in action, you can run the provided HTML code.

Answer №2

To display the labels outside of the chart, you can follow this approach:

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const timers = {
  neutral: 10,
  happy: 0,
  sad: 0,
  angry: 0,
  surprised: 0,
  disgust: 20
};


const detection = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      fill: false,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)', // neutral
        'rgba(54, 162, 235, 0.2)', // happy
        'rgba(255, 206, 86, 0.2)', // sad
        'rgba(75, 192, 192, 0.2)', // angry
        'rgba(153, 102, 255, 0.2)', // surprised
        'rgba(255, 159, 64, 0.2)' // disgust
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 2,
      data: timers,
    }]
  },
  options: {
    indexAxis: 'x',
    responsive: true,
    plugins: {
      legend: {
        display: false,
        labels: {
          font: {
            size: 50
          }
        }
      },
      title: {
        display: true,
        text: "Emotion timers"
      }
    }
  }
});
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

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

How to Delete an Added Image from a Dialog Title in jQuery

I've tried multiple solutions from various sources, but I'm still struggling to remove an image from a dialog. Whenever I attempt to do so, I end up with multiple images instead of just one. It's important to note that I only want the image ...

javascriptjquerycss

Adding an external script to a Vue.js template

Delving into the world of Vue.js and web-pack, I opted to utilize the vue-cli (webpack) for scaffolding an initial application. A challenge arose when attempting to incorporate an external script (e.g <script src="...") in a template that isn't req ...

javascriptvue.jsvuejs2vue-component

Jest v29 Upgrade Issue: Test environment jest-environment-jsdom not found

Are there any success stories of upgrading to the newest version of Jest, specifically version 29? I keep encountering an error message: Error: Test environment jest-environment-jsdom cannot be found. Please ensure that the testEnvironment configuration ...

javascriptnode.jstypescriptjestjsts-jest

Is there a way to stop Vuex from causing issues with my class instance?

I am attempting to save a representation of a class in Vuex, specifically the EditorState from ProseMirror. The class's properties are mostly unchangeable externally, meaning that any modifications require replacing the existing instance with a new on ...

javascripttypescriptvue.jsvuexprose-mirror

Creating an interactive star rating system with JSON data

Currently, I am in the process of developing a star rating system specifically designed for restaurant reviews. The 'Attributes' displayed on the user interface are dynamic and fetched in JSON format. There exist five attributes with each having ...

javascriptjqueryhtmlcss

Is there a tool that can automatically arrange and resolve TypeScript dependencies, with or without the use of _references.ts file?

Currently, I am working on understanding the new workflow for "_references.ts" and I feel like there is something missing when it comes to using multiple files without external modules in order to produce correctly ordered ".js" code. To start with, I took ...

javascriptdependenciesgruntjstypescriptvisual-studio-2013

Utilizing a file from external sources in WebPack 1.x beyond the webpack root directory

In my project structure, I have the following setup: Root Project1 package.json webpack.config Project2 package.json webpack.config Common file1.js I need to use file1.js in each project. The webpack v ...

javascriptreactjswebpack

Managing events in VueJS

I am experimenting with VueJS to understand how to use emit and listen methods. I encountered some unexpected results that I cannot figure out. My expectation was for the initMap() function to be called and for the console to log the expected output, which ...

javascriptvue.js

Difficulty commencing a background operation in a node.js application

I have a setup using node.js/express and React for the client side code. This setup allows users to query any number of players by making fetch requests to my express server, which then sends requests to Riot Games public API. The issue I'm encounteri ...

javascriptnode.jsreactjsexpressasynchronous

Creating a Mithril.js Single Page Application (SPA) using a JSON data source: A

I am currently working on creating a single page application (SPA) using Mithril.js. While I have come across some helpful tutorials like the one here and on the official Mithril homepage, I am struggling to combine the concepts from both sources effective ...

javascriptjsonurl-routingsingle-page-applicationmithril.js

Is there a way to individually invoke a function on every element within a webpage?

Every element in my database is accompanied by a distinct thumbnail for display purposes. To cater to user preferences, I have included a dropdown menu that triggers the display of different forms based on their selection through a function. However, my cu ...

javascriptjqueryhtmlnode.jshandlebars.js

Updating the jQuery AJAX URL dynamically based on user input in a form submission

Exploring the world of AJAX and form submission, I find myself in need of assistance. My webpage is designed to display real-time stock market data, updating fields with the latest price, change, high, low, and more. I am currently attempting to modify th ...

javascriptjqueryajax

Exploring the DOM through the Chrome developer console

So, when I input the following code in my Chrome console: document.getElementById('scroller') I receive output similar to this: <div class="blah" id="scroller>...</div> However, if I pause a script and add a watch with the same ex ...

javascripthtmlgoogle-chromeconsole

Python script calls C function with incorrect array size detection

In my current project, I am utilizing Python to call a .so file that has been compiled from C. The purpose of the C code is to add two vectors together in the following manner: #include <stdio.h> #include <stdbool.h> bool add_vectors(const do ...

pythoncarraysctypes

The value of the jQuery data on click event handler becomes 'undefined' when used within an AJAX handler

When I click on the Positive or Negative buttons, a jQuery event handler function is triggered. Each button passes different data objects to the handler. However, within the AJAX POST handler, I am unable to access the data from the click event. $('# ...

javascriptjqueryajaxevent-handling

Use the ngFor directive to iterate over the most recently created array from the parent ng

I am looking to link material tabs with ngFor to generate arrays for child ngFor. Let's start from the beginning: <mat-tab-group> <mat-tab *ngFor="let tab of asyncTabs "> <ng-template mat-tab-label>{{tab.label}}</ng-template ...

arraysangulartypescript

THREE.Raycaster delivering imprecise outcomes

I am currently working on creating a 2D scatterplot with tooltips, but I am facing an issue with the raycaster not detecting when a point is being hovered over. The tooltip seems to activate only when touching an object, which is correct behavior, but it d ...

javascriptd3.jsthree.js

When feeding a valid JSON to Datatable, it unexpectedly displays "No data available in table" instead of populating

I have been attempting to initialize data tables and provide it an array of objects. However, I keep encountering an error message stating that there is No data available in table. Surprisingly, when I check the console output, it clearly shows that this i ...

javascriptjqueryajaxjsondatatable

Adjusting the Pace of a CSS Marquee

My CSS marquee effect is working perfectly, but I am having trouble with the speed. The issue arises when the text length varies - shorter text takes longer to scroll while longer text scrolls quickly. This inconsistency is due to the animation duration an ...

javascriptjqueryhtmlcss

Unable to clear JSP form data

While attempting to reset the form data in JSP, the code given below is run. Although the data gets reset successfully, it reappears mysteriously from an unknown source: $('input[type="text"]').val(''); ...

javascriptjqueryjspforms