Charting in the dojo with non-sequential x-axis labels

I am working on a chart that is pulling data from a cell in an SQL table for the X-axis. The source data cell in the SQL table is formatted as DATE, while the SQL cell itself is formatted as DATETIME. When exporting the data to a .csv file, the cell format reverts back to DATE and the chart built using the .csv displays the X-axis dates in sequential order. However, when viewing the same data in a chart on our GIS system, the X-axis dates are out of order which makes it difficult to interpret the plotted data. Below is the code for the chart. Any help or suggestions would be greatly appreciated. Thank you.

function makeChart(featureset) {

dojo.empty("chartDiv");

var dlg = dijit.byId('chartDialog');

// Once resources are loaded and DOM is ready....
dojo.ready(function () {
    var data = featureset._jsonData.items;
    var store = new dojo.data.ItemFileWriteStore({
        data: {
            identifier: "TestID",
            label: "Parameter",
            items: data
        }
    });

    chart = new dojox.charting.DataChart("chartDiv", {
        comparative: true
        //scroll:stretchToFit
    });
    chart.setStore(store, { Parameter: '*' }, "Result");
    
    if (data.length > 2) {
        chart.addAxis("x", {
            title: "Collection Date",
            titleOrientation: "away",
            majorTicks: false,
            majorLabels: true,
            majorTickStep: 5,
            minorTicks: false,
            from: 0, to: (data.length + 0.5),
            labelFunc: function (n) {
                var date = data[n].CollectionDate;
                return date;
            }
        });
    }
    chart.addAxis("y", { vertical: true });

    var c = dojo.connect(chart, "onData", function () {
        dojo.disconnect(c);
        if (dijit.byId("chartlegend")) {
            dijit.byId("chartlegend").destroy();
            dojo.create("div", { id: "chartlegend" }, "chLegHd");
            chlegend = new dojox.charting.widget.Legend({ chart: chart }, "chartlegend");
        }
        else {
            chlegend = new dojox.charting.widget.Legend({ chart: chart }, "chartlegend");
            chlegend.startup();
        }
    });
});

dlg.show();

}

Answer №1

After adjusting the source cell from datatype "datetime" to "date," there was no change in the way the chart is presented. The intention is for the dates to sequentially display as follows: 6/14/2015, 7/01/2015, 8/13/2015.

However, it currently appears like this: 8/13/2015, 7/01/2015, 6/14/2015.

Answer №2

It seems like there might be some confusion in understanding your inquiry clearly. Your goal is to arrange the dates in chronological order obtained from the database. Here's a way to achieve this:

To begin, you can generate an array of labels based on the data retrieved from the database.

var dBDateArray= ["array containing ordered dates from the DB"];
var labelsArray = [];

for (var i = 0; i < dBDateArray.length; i++) {
    var obj = {};
    obj.value = i;
    obj.text = dbDateArray[i].name;
    labelsArray.push(obj);
}

Assign these labels to the x Axis using this.labelsArray

this.chart1.addAxis("x", {
title: "Collection Date",
titleOrientation: "away",
labels:labelsArray
})

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 specify option values for selection in AngularJS?

...while still maintaining the model bindings? I currently have a select menu set up like this: <select class="form-control" ng-model="activeTask" ng-options="task.title for task in tasks"> </select> When an option is selected, it displays s ...

Can you explain the concepts of 'theme' and 'classes'?

Currently, I am working on a web application using React. I have chosen to incorporate the latest version of Material-UI for designing the user interface. During this process, I came across the demo examples provided by Material-UI (like ) In each demo ...

The setInterval method in Typescript/Javascript is unable to invoke other functions

I have a situation where I need to call the function callMe() every 1000 ms. While this setup is functioning as expected, I am encountering an issue when trying to call another function from within callMe(). The error message I am receiving is: uncaught ...

Exclude previous dates from the front end of ACF date picker

I am using Advanced Custom Fields to post job ads, and I have incorporated a date picker field for the end date of each job ad. <?php if (have_rows('jobs', 'option')): ?> <?php $now = time(); ?> <div i ...

How come this javascript/jQuery code is unable to properly submit the HTML form?

Having some trouble with submitting an HTML form using Javascript/jQuery. It doesn't seem to be working as expected. Here is my HTML form: <form class="navbar-form navbar-right" role="form" id="loginForm" action="login.php"> <div class= ...

Display numerical values ranging from a to b based on a specific requirement

Seeking guidance as a beginner in JavaScript. I need help with finding the best approach to solve this problem: I have two integers, a and b, where a < b. I want to print all integers in the range [a;b] inclusive. The pattern should be such that integ ...

Tips for transferring PHP variable from a drop down menu

Hello, I am currently working on creating a dropdown menu using the <select> tag. My goal is to have it so that when someone clicks on one of the options in the dropdown, a new window opens. Additionally, I want the PHP variable from the main page to ...

After each matplotlib pie chart is plotted, the labels from the previous chart remain visible

My Django application creates two distinct pie charts, but I am encountering an issue where the labels from the first chart are repeating in the second chart. The code I am currently using is: plt.pie(...) plt.savefig(...) These charts are generated wit ...

Cannot locate the state variable

import React, { Component } from 'react'; import { View, Text } from 'react-native'; import axios from 'axios'; class AlbumList extends Component { state = { albums: [] } ; componentWillMount(){ axios.get(&ap ...

Learn the process of integrating VueJS with RequireJS

I am attempting to set up VueJS with RequireJS. Currently, I am using the following VueJS library: . Below is my configuration file for require: require.config({ baseUrl : "js", paths : { jquery : "libs/jquery-3.2.1.min", fullcalendar : "libs/ful ...

Angular's Innovative 3D-esque Carousel Rotation

My goal is to design a pseudo-3d carousel with 5 items, like the example below (and have them rotate around): https://i.sstatic.net/FtcSe.png I came across this fantastic stackblitz as a base, and I've been tinkering with it for hours attempting to ...

Sending a null variable via an AJAX post request from jQuery to PHP

Query: <table> <tr> <td id="percentage">Percent:&nbsp; <?php echo $percent; ?> %</td> </tr> </table> <div class="box-footer" style="float: right"> <a href="<?php echo base_url(); ?>stu ...

What steps do I need to take to integrate my RASA assistant into my personal website?

Deploying my rasa chatbot on my live website is my next step. While Rasa worked smoothly on my localhost server, as a newcomer to web development, I found the official guide provided by RASA in the link below a bit challenging to comprehend: The RASA guid ...

Issue with Bootstrap 4 Navbar collapsing and not expanding again

Help needed! My navigation bar collapses when the window is resized, but clicking on the hamburger icon does not open it back up. I have included my code below. Can someone please provide guidance on how to expand the collapsed navbar? <html lang=&quo ...

Utilization of the keyword 'this' within an IF clause

My setup includes a variety of objects with the following structure: <input type="checkbox" id="check30" class="check" name="check30" checked> <input type="text" name="toAddress30" id="name30" class="contactNameInput addressField"> ...

Every time I attempt to make a "post" request to the SailsJS server, I encounter a 403 CSRF Mismatch error

Having an issue with my sailsJS server. I am attempting to send a post request from a client on a different domain. I am sending _csrf from /csrfToken, but encountering a 403 csrf mismatch repeatedly. The client-side code appears as follows: $.ajax( ...

List enhancement through various filters

I currently have data that is filtered by category. this.data = response.data.items.filter(item => item.category_id === categ_id) Now, I am looking to apply an additional filter to only show items with a certain quantity count. For example: this.data ...

PhantomJS Alert: UnresolvedPromiseRejectionNotice

My main objective is to extract data from a website using Node.js. I have successfully managed to gather information using the request package, however, the website I am targeting contains dynamic content which cannot be accessed solely with request. Aft ...

What is the reasoning behind declaring certain variables on the same line as others, while most are declared individually on separate lines?

I've taken on the challenge of learning JS by myself and decided to build a Blackjack game. While following a helpful walkthrough online, I encountered some confusion. On the website, they start by declaring Global variables: var deck; var burnCard; ...

Display picture on webpage in 10 seconds

Hi, I'm working on a website project and I've run into an issue where I need to use JavaScript, but I haven't mastered it yet. I have a background image slideshow set up where a new image appears every 6 seconds. My idea is to have the sec ...