Having difficulty passing data manually to createRangeChart in Ag-Grid

Initially, I am passing unprocessed raw data to ag-Grid to populate the grid, resulting in a chart with randomly arranged ages. I now need to sort and process the age data before passing it to my range chart in order to create a sorted chart, while keeping the grid data unsorted.

To achieve this, I have implemented a simple JavaScript sort function:

const sortedData = computed(() => {
  return data?.sort(
    (a, b) => a.salesOrders.customerAge - b.salesOrders.customerAge,
  );
});

Although my sortedData now contains all the data sorted by customerAge, I am facing difficulties in getting the chart to utilize this sorted data instead of the rowData from ag-Grid. Any suggestions on how I can make the chart use the sortedData?

Access the Code Sandbox workspace here

I have also encountered limitations in using chartThemeOverrides to set the chart theme and create an option flag within the createRangeChart function itself.

const onFirstDataRendered = () => {
  console.log("Initializing chart...");

  gridApi.value.createRangeChart({
    chartContainer: document.querySelector(`#my_first_chart`),
    cellRange: {
      columns: columnsToChart,
    },
    chartThemeName: "ag-material",
    suppressChartRanges: false,
    chartType: "column",
    aggFunc: "sum",
    unlinkChart: true,
    chartThemeOverrides: {
      bar: {
        series: {
          data: sortedData,
        },
      },
    },
  });
};

Answer №1

If you, like me, found yourself asking this question and landed here, rest assured that as of today (20/05/2024), it is not currently possible.

There is a known issue AG-5482 in the ag-grid team's backlog, but unfortunately, there are no plans for its implementation.

If you want to learn more, you can check out the GitHub issue I raised: https://github.com/ag-grid/ag-grid/issues/7951#issuecomment-2110275682

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

Transmit information from the main directive to the subordinate directive

Hi everyone, I have a quick question.. I'm working on a directive that includes an ng-repeat and transclude, with several child directives inside it that need to inherit specific objects from each iteration... So far, I've only managed to achiev ...

Issue with VUE JS: Score not increasing on click event as desired

Greetings! I've been working on a basic game that increments the score by 1 when the user clicks a button. new Vue({ el: '#MyApp', data: { score: '10', }, methods: { ScoreIncre: function(incre) { this.score ...

Instructions on transforming an img into an Image component within next.js

I have successfully implemented all the logic in this component, tailored to the <img> tag. Now, I am aiming to apply the same logic to the Image component. However, when attempting to do so, I encounter an error. TypeError: Failed to construct &apos ...

Can wildcard paths be imported in React using Typescript?

Is there a way to dynamically import a React Typescript Component from a wildcard path, similar to the following code snippet? const Component = loadable( () => import(`../../../src/**/*/${component_name}`), ); I have searched numerous solutions on ...

Building a Navigation Menu in Vue.JS Using Bootstrap Styles

Greetings! I had previously developed a Menu for my Vue 2 project. Upon creating a new Vue 2 project (with plans to migrate to Vue3), I proceeded to import my Menu, which consists of HTML and CSS. Unfortunately, it seems that the implementation is not wor ...

Unable to find any matches when conducting a search through Google Apps Script

After spending days analyzing the code, I am encountering an error that states "uncaught reference error: google is not defined." This issue seems to occur specifically in line 360. Curiously, when inspecting the original code editor, line 360 simply conta ...

Communication between the Node development server and the Spring Boot application was hindered by a Cross-Origin Request

Here is the breakdown of my current setup: Backend: Utilizing Spring Boot (Java) with an endpoint at :8088 Frontend: Running Vue on a Node development server exposed at :8080 On the frontend, I have reconfigured axios in a file named http-common.js to s ...

Storing an array within an AngularJS service for better performance

As someone who is relatively new to AngularJS, I am still in the process of understanding how to utilize services for fetching data in my application. My aim here is to find a method to store the output of a $http.get() call that returns a JSON array. In ...

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...

How can I identify the moment when an AngularJS route controller is no longer in scope?

Currently, I have a controller set up to poll the server at regular intervals using $timeout. The issue arises when the route changes - I need to stop the polling and then restart it once the original route is accessed again. If anyone has any suggestions ...

Exploring the implementation of the meta robots tag within Joomla 2.5's global settings

Encountering a peculiar issue with Joomla 2.5 and the Meta robots tag. Joomla seems to have a flaw where regardless of the URL, as long as there is a valid article id, it will generate a page. For instance: The id '61' is valid but leads to a ...

Angular Date Filtering to Show dd-mm-yyyy Format

I am having trouble filtering the date correctly in my controller. My desired date format is Thu Mar 31 2016 05:05:00 GMT-0400 (EDT). However, when I use the code mentioned above, the results show up as 03-31-2016. This is the code snippet from my contr ...

Is it possible to pass a component into a dialogue box in material-ui using React?

Hello, I am currently facing an issue with displaying a chart component within a dialogue box. Despite having the code in place, the chart is not rendering inside the dialogue box as expected. Unfortunately, due to the complexity of the code, I am unable t ...

Leveraging the callback function to display information from a JSON file

Attempting to retrieve JSON data from a PHP file and display it. Managed to successfully request the data via AJAX and log it to the console. (At least one part is working). Tried implementing a callback to ensure that the script waits for the data befor ...

Is there a way to create a reusable HTTP response handler for Node.js applications?

As I work on creating a rest api for a node application, I often find myself repeating the same code structure: function(req, res, next) { databaseCall() .then( (results) => { if (results != null) { res.status(200).send(results); } el ...

If the div element undergoes a change, use an if-else condition to populate the data fields accordingly

I'm looking to create a basic if/else statement in JavaScript that checks if a div element has changed before populating JSON data fields/variables that pull from dynamically updated HTML. I want to avoid using the deprecated DOMSubtreeModified metho ...

Struggling with developing a straightforward application with Angular-Material

My goal is to develop an application that utilizes the Angular Material navigation bar, as showcased in this example. Being relatively new to AngularJS, I'm facing an issue where my app loads but only displays a blank page. Below is the code snippet ...

What is the best way to show distinct items and their frequencies from an array of objects in Vue.js/JavaScript?

I have been developing an inventory management application using Vuejs, and I am facing a JavaScript-related challenge in my project. The issue revolves around handling data that includes user information retrieved from a form, as well as static categories ...

Select the top row of a table when the checkbox is ticked to emphasize it

Previously, I tackled a challenge on a webpage using jQuery where checkboxes in a table needed to be selected based on specific data attributes. Essentially, if one checkbox in a row was selected, the rest of the checkboxes would be disabled if their data ...

The ajax method for loading an xml file results in displaying the undefined message

When attempting to fetch content from an xml file using ajax, the page initially displays "undefined". However, upon refreshing the page, the content loads successfully. Take a look at my code snippet below: $.ajax({ type: "GET", url: "xm ...