Incorrect positioning of labels in Dojo Stacked Bars/Columns chart

Encountered a problem with how stacked bar and column charts are labeled in the most recent versions of Dojo. The labels are appearing at the center of the bar/column, starting from 0 instead of the end of the previous one. This results in overlapping labels or incorrect placement within the bar/column.


For example, if you refer to this JS Fiddle from a StackExchange post here, switching between Dojo versions "1.10.4" and "nightly" will show the label positions change.


I've identified the cause of the issue as the removal of the "GetValue" function from StackedBars and StackedColumn (Dojox\charting\plot2d\StackedColumn.js) files between versions 1.10.6 and 1.11.1. This function adjusted label positioning based on the previous value, which no longer happens.

Using ESRI's JavaScript API with Dojo 1.11.1. I tried copying and modifying the function from an older version of Dojo but encountered challenges due to changes in other charting functions.

As a JavaScript and Dojo beginner, is there a way to reintroduce this function without altering the ESRI API files?

If not, is it possible to integrate the old function into the newer version effectively?

Thank you!


UPDATE: Here is the altered content of my StackedBars.js:

//>>built
define("dojox/charting/plot2d/StackedBars",["dojo/_base/declare","dojo/_base/lang","./Bars","./commonStacked"],function(c,e,f,d){
    return c("dojox.charting.plot2d.StackedBars",f,{
    getSeriesStats:function(){
        var a=d.collectStats(this.series,e.hitch(this,"isNullValue")),b;
        a.hmin-=0.5;
        a.hmax+=0.5;
        b=a.hmin;
        a.hmin=a.vmin;
        a.vmin=b;
        b=a.hmax;
        a.hmax=a.vmax;
        a.vmax=b;
        return a
    },
    rearrangeValues:function(a,b,c){
        return d.rearrangeValues.call(this,a,b,c)
    },
    // COPIED THIS FUNCTION FROM 1.10.6
    getValue:function(_5,_6,_7,_8){
        var y,x;
        if(_8){
            x=_6;
            y=d.getIndexValue(this.series,_7,x,e.hitch(this, "isNullValue"));
        }
        else{
            x=_5.x-1;
            y=d.getValue(this.series,_7,_5.x);
            y=[y[0]?y[0].y:null,y[1]?y[1]:null];
        }
        return {x:x,y:y[0],py:y[1]};
    }
})});

The initial problem was with "e.hitch(this, "isNullValue")" where there was a typo.

Still facing issues with this not working for charts with negative values (no errors, just misplaced labels), and seeking advice on implementing this function without editing the Dojo source files.

Answer №1

If you're struggling to get labels positioned correctly on Dojo StackedBars and StackedColumns charts, a solution is to create a specialized class that extends either dojox/charting/plot2d/StackedBars or dojox/charting/plot2d/StackedColumns and incorporates the missing GetValue function.

Below is an example of a functional class for StackedBars:

define(["dojo/_base/declare", "dojox/charting/plot2d/StackedBars", "dojox/charting/plot2d/commonStacked", "dojo/_base/lang"], 
function(declare, StackedBars, commonStacked, lang){

return declare("FixedStackedBars", dojox.charting.plot2d.StackedBars, {
    getValue: function(value, index, seriesIndex, indexed){
        var y,x;
        if(indexed){
            x = index;
            y = commonStacked.getIndexValue(this.series, seriesIndex, x, lang.hitch( this, "isNullValue" ) );
        }else{
            x = value.x - 1;
            y = commonStacked.getValue(this.series, seriesIndex, value.x);
            y = [  y[0]?y[0].y:null, y[1]?y[1]:null ];
        }
        // in py we return the previous stack value as we need it to position labels on columns
        return { x: x, y: y[0], py: y[1] };
    }
});
});

Implement this custom class instead of using dojox/charting/plot2d/StackedBars in your code.

Keep in mind that this approach may not be foolproof, as it doesn't consider potential versions of Dojo that already have the GetValue function integrated into the StackedBar/StackedColumn classes. It's advisable to include checks to verify if the base class includes the GetValue method.

This implementation has been tested with the ESRI JavaScript API versions 3.17 and 3.18, which are its target platforms.

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 are the best ways to display nicely formatted JSON data in a text area using React JS?

I am new to React JS and encountered an issue with rendering the pretty JSON data inside a textarea. I'm unsure which part of my code is incorrect, but I want my pretty JSON to be displayed within the textarea as shown below. "email":"<a href="/cd ...

Decode the string containing indices inside square brackets and transform it into a JSON array

I have a collection of strings that contain numbers in brackets like "[4]Motherboard, [25]RAM". Is there a way to convert this string into a JSON array while preserving both the IDs and values? The desired output should look like: {"data":[ {"id":"4","i ...

Navigating the route with quickness

Upon accessing the localhost, I encountered an issue with the code snippet below: When I try to access it, I receive an error message saying "Cannot GET /". var express = require('express'); var router = express.Router(); /* GET home page. */ r ...

What is the reason for elements such as "if" and "else" not being visually

I am currently developing a browser-based code editor with a unique feature. Task: The objective is to highlight specific keywords like if, else, for... when they are entered into the editor. textarea.addEventListener("input", function() { ...

Changing MySQL Limit arguments into numerical values

I'm encountering an issue with my Rest call to a MySQL database. I'm using a JavaScript object and sending it through a REST GET call with a Java back-end. requestParams: { pageStart: 0, results: 10 } I have configured ...

Implementing VisualCaptcha with AngularJS and slimPHP in a RESTful manner

I am currently using AngularJS on the frontend and SlimPHP on the backend with REST URLs. In an attempt to integrate VisualCaptcha, I followed the instructions on the PHP side and verified that it works. I have a simple Angular dataService that fetches t ...

Error: Unable to execute workouts.map as a function in "React" due to a TypeError

This is the JSON data retrieved from the server: {workouts: Array(3)} workouts: Array(3) 0: {_id: 'idnumber1', title: 'pullup', reps: 40, load: '20', createdAt: '2022-07-20T18:06:39.642Z', …} 1: {_id: 'idnumb ...

Optimizing react onClick events to allow for multiple functions to be executed efficiently

I am currently developing a react button component that takes in one function as a prop to be run when the onClick event occurs. <Button onClick={() => console.log('hello')}> This translates to <button onClick={onClick}> Say hel ...

Unexpected format of _id is returned by Mongolian DeadBeef .toArray() method

My love for Mongolian deadbeef is strong, but I'm facing a challenge. I want the output of a simple .find() method to match the JSON format from Mongo's command line: $ db.mycollection.find(); # outputs.. # { ...some data... , "_id" : ObjectId(" ...

Retrieve information from internet sources

I'm attempting to extract the initial paragraph from Wikipedia by utilizing only JavaScript. Essentially, my goal is to: document.getElementsByTagName("P")[0] However, this content is not present on my own website; instead, I aim to retrieve a speci ...

Sharing data between child and parent components, and then passing it on to another child component in React Js

I have a scenario where I am passing props from a child component B to parent component A, and then from parent component A to child component C. Everything works fine when I pass the data from component B to A, but I encounter an issue when I try to set a ...

Executing a function on page load instead of waiting for user clicks

I've been researching a problem with onclick triggers that are actually triggered during page/window load, but I haven't been able to find a solution yet. What I need is the ID of the latest clicked button, so I tried this: var lastButtonId = ...

JavaScript truthy values referring to numbers

According to the rules outlined below: Falsy: false 0 (zero) '' or "" (empty string) null undefinded NaN (e.g. the result of 1/0) Truthy: Anything else I'm puzzled as to why, in the tests that follow, only the number 1 is considered "tr ...

Display larger images dynamically by hovering over thumbnails using PHP

Is there a way to display an image when I hover over a thumbnail using PHP, similar to the functionality on this website? I'm looking for a solution to implement this feature. ...

Exploring the Potential of jQuery through iBooks

Would like to know how to fix an issue with an interactive glossary I'm creating for an iBooks eBook. When clicking on a term, the definition should appear at the end of the page. Hiding the definition can be done by clicking on the term again or by c ...

How can one retrieve the value of AngularJS {{curly-brace-value}} using jQuery?

Although I may not be well-versed in angular/jquery, it is clear that the div generated using angular has caught my attention: <div id='my-div' style={{ang.style}}'> This is content inside the div </div> The style of the div is ...

Tips for preventing useEffect from triggering a route?

Recently delving into reactjs, I stumbled upon a situation in the code where the route alerts messages twice. I'm seeking advice on how to prevent this issue, please disregard the redux code involved. Any suggestions? Index.js import React from &apos ...

Is there a way to enable drag for one side of ionicSideMenu but disable it for the other

I am working on an Ionic application that includes two side menus, one on the left and one on the right: <ion-side-menus> <ion-side-menu-content > <ion-nav-bar id="main_header"> </ion-nav-bar> &l ...

What is the best way to store HTML in a variable as a string?

Imagine if I have a variable: let display_text = "Cats are pawsome!" I aim to show it as such: <div> <b>Cats</b> are pawsome! </div> To be clear, dynamically enclose the word "cats" whenever it shows up. ...

When sending strings through an ajax call, spaces are getting converted to "'+'"

In my attempt to utilize AJAX for sending a POST request with multiple strings as parameters, I encountered an issue. The strings I am sending sometimes contain spaces. However, upon receiving the POST on the C# server side, I noticed that the string com ...