Is Your CanvasJS Chart Traveling in Reverse?

My charts are displaying dates in reverse order, can anyone help me figure out what's causing this issue?

I've checked the documentation but couldn't find anything that would explain this problem.

Link to documentation:

Here is a screenshot... https://i.sstatic.net/Yxv7r.png

and here is my code...

var chart = new CanvasJS.Chart("chartContainer", {      
backgroundColor: "#2e3037",
animationEnabled: true,
axisY :{
    includeZero: false,
    gridColor: '#79797c',
    labelFontSize: 16,
    labelFontColor: "#79797c",
    valueFormatString: "$#.00"
},
axisX: {
    gridColor: '#79797c',
    valueFormatString: "MM/DD/YY",
    labelAngle: -50,
    interval:1, 
    intervalType: "day", 
    labelFontColor: '#79797c',
    labelFontSize: 10,
},
toolTip: {
    fontColor: "white",
    backgroundColor: "#6b60d4",
    content: "${y}",
},
data: [{        
    type: "area", 
    showInLegend: false,
    color: '#6b60d4',
    fillOpacity: .1,
    name: "Price at the Close of the Day",
    prefix: '$',
    markerSize: 0,        
    dataPoints: [
        {x: new Date(2018, 01, 16), y: 1050.26}, 
        {x: new Date(2018, 01, 17), y: 1024.69}, 
        {x: new Date(2018, 01, 18), y: 1012.97}, 
        {x: new Date(2018, 01, 19), y: 1037.36}, 
        {x: new Date(2018, 01, 20), y: 1150.5}, 
        {x: new Date(2018, 01, 21), y: 1049.09}, 
        {x: new Date(2018, 01, 22), y: 999.64}, 
        {x: new Date(2018, 01, 23), y: 984.47}, 
        {x: new Date(2018, 01, 24), y: 1061.78}, 
        {x: new Date(2018, 01, 25), y: 1046.37}, 
        {x: new Date(2018, 01, 26), y: 1048.58}, 
        {x: new Date(2018, 01, 27), y: 1109.08}, 
        {x: new Date(2018, 01, 28), y: 1231.58}, 
        {x: new Date(2018, 01, 29), y: 1169.96}, 
        {x: new Date(2018, 01, 30), y: 1063.75}, 
        {x: new Date(2018, 01, 31), y: 1111.31}, 
        {x: new Date(2018, 02, 01), y: 1026.19}, 
        {x: new Date(2018, 02, 02), y: 917.47}, 
        {x: new Date(2018, 02, 03), y: 970.87}, 
        {x: new Date(2018, 02, 04), y: 827.59}, 
        {x: new Date(2018, 02, 05), y: 695.08}, 
        {x: new Date(2018, 02, 06), y: 785.01}, 
        {x: new Date(2018, 02, 07), y: 751.81}, 
        {x: new Date(2018, 02, 08), y: 813.55}, 
        {x: new Date(2018, 02, 09), y: 877.88}, 
        {x: new Date(2018, 02, 10), y: 850.75}, 
        {x: new Date(2018, 02, 11), y: 811.24}, 
        {x: new Date(2018, 02, 12), y: 865.27}, 
        {x: new Date(2018, 02, 13), y: 840.98}, 
        {x: new Date(2018, 02, 14), y: 888.82}
    ]
}]
});
chart.render();
javascriptcanvasjs

Answer №1

In JavaScript's date object, the month starts from 0 (representing Jan) to 11 (for Dec). For more information, please visit MDN.

In this scenario, if you have x-values like new Date(2018, 01, 29), new Date(2018, 01, 30), and new Date(2018, 01, 31), they actually correspond to March 1st, 2nd, and 3rd respectively. Following those values are x-values starting from new Date(2018, 02, 01), which again corresponds to March 1st. Therefore, right after March 3rd (i.e., new Date(2018, 01, 31)), it switches back to March 1st (i.e., new Date(2018, 02, 01)).

Modifying the month accordingly works well in this context. Below is the functional code snippet:

var chart = new CanvasJS.Chart("chartContainer", {      
backgroundColor: "#2e3037",
animationEnabled: true,
axisY :{
    includeZero: false,
    gridColor: '#79797c',
    labelFontSize: 16,
    labelFontColor: "#79797c",
    valueFormatString: "$#.00"
},
axisX: {
    gridColor: '#79797c',
    valueFormatString: "MM/DD/YY",
    labelAngle: -50,
    interval:1, 
    intervalType: "day", 
    labelFontColor: '#79797c',
    labelFontSize: 10,
},
toolTip: {
    fontColor: "white",
    backgroundColor: "#6b60d4",
    content: "${y}",
},
data: [{        
    type: "area", 
    showInLegend: false,
    color: '#6b60d4',
    fillOpacity: .1,
    name: "Price at the Close of the Day",
    prefix: '$',
    markerSize: 0,        
    dataPoints: [
        {x: new Date(2018, 00, 16), y: 1050.26}, 
        {x: new Date(2018, 00, 17), y: 1024.69}, 
        {x: new Date(2018, 00, 18), y: 1012.97}, 
        {x: new Date(2018, 00, 19), y: 1037.36}, 
        // More data points...
        {x: new Date(2018, 01, 14), y: 888.82}
    ]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

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

Produce a vue attribute

I am looking to display a property in my component. My template includes: <v-flex v-for="c in components"> <component :is="c.component" v-bind="c.prop"></component> </v-flex> And in the script: ... mounted(){ ...

javascriptvue.js

Parameters in Typescript decorators

Can someone help me understand the various parameters of a Typescript decorator? function myDecorator(target) { // do something with 'target' ... } In the given example, I am aware that 'target' represents the function/class to wh ...

javascripttypescript

Encountering special symbols in the ID of a form element triggers an error message in jQuery validator, stating 'Unrecognized expression'

One of the challenges I am facing is that I have a form with elements that have ids containing special symbols. For example: The id="$FormData[1]$PersonData[1]$PhysicalPerson[1]$PersonName[1]$Affix[@type='qualification' and @position='prefi ...

javascriptjqueryjquery-validate

What is the best way to change the orientation of a vector map?

Is there a straightforward method for rotating a vector-based map on CANVAS in order to integrate it into a browser navigation system? ...

javascriptrotationhtml5-canvas

Despite containing elements, Array.length incorrectly reports as 0 in React, JavaScript, and TypeScript

I have been working on storing persistent data for my Electron app using electron-json-storage. Initially, I tried using neDB but encountered an error, so I switched to another method. However, it seems that the issue is not with neDB but rather with my ow ...

javascriptreactjselectron

Browsing through an array of objects in PHP

Currently working on creating an array of objects using jQuery. var selected_tests = $("#selected_tests").find("tr"); jsonLab = []; $.each(selected_tests, function() { jsonLab.push({ test: ($(this).children()).eq(0).text(), amount: ($(this).chil ...

javascriptphpjqueryjson

Is there a way to remove or replace the existing polyline to ensure that only one is displayed at a time?

My goal is to have a single line drawn from the closest marker to a static position. I can determine which marker is the closest by sorting the distances, but if a new marker is added and is closer than the previous closest one, a new polyline is drawn wit ...

javascriptgoogle-mapsgoogle-maps-api-3

Attempting to extract the desired aggregations from a two-dimensional JSON array

Looking to parse through this JSON 2D array (snapshot data example below) to calculate the total cases and deaths for each date, disregarding the state column. While achievable in SQL, it poses a challenge in JavaScript. Ultimately, the summarized data wi ...

javascriptjsonparsingmultidimensional-arrayaggregation

Encountering an error when attempting to include React TypeScript onChange with a Material UI switch component

I'm working on implementing a show/hide functionality using a switch. I want the component to be displayed when the switch is turned on and hidden when it's turned off. Here's the code I've written: const VirtualEventSection = ({ con ...

javascriptreactjstypescriptmaterial-ui

Encountering difficulties while attempting to deploy NodeJS application on Heroku

When attempting to deploy my nodejs app, I encountered the following error: 2019-11-25T18:16:16.927748+00:00 app[web.1]: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9a8a7a6a7b0a4a6bcbae4afa6bbbca4e4ada0baaabcbabaa0a6a ...

javascriptnode.jsheroku

Display the URL with proper formatting in the print function

I am trying to create a table with clickable URLs in a "Link" column, but the URLs are too long and I want to show a custom title instead. So far, I have used the following code: str = "Test Title"; link = str.link("https://my_long_url.com/v1.0/ui/index. ...

javascriptapache-zeppelin

Having a single quote within a double quote can cause issues with JavaScript code

I am currently developing a Django web app and facing an issue with sending a JSON object to my JavaScript code using a Django template variable. # views.py import json def get_autocomplete_cache(): autocomplete_list = ["test1", "test2", "test3", "te ...

javascriptpythonjqueryjsondjango

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

I have a variable called demoVars, which is an array of objects with properties var1, var2, and var3. In my component class, I have a variable named selectedVar that holds the name of one of these properties: var1, var2, or var3. I want to dynamically pu ...

javascriptangularjstypescriptstring-interpolation

Are there options available in nightwatchjs for making intricate decisions with selectors?

When using the NightWatch JavaScript Selenium tool, it is important to establish good practices for identifying different parts of the GUI before running tests. For example, distinguishing between options A and B and creating separate tests accordingly. An ...

javascriptnode.jsseleniumselenium-webdrivernightwatch.js

React and Express are two powerful technologies that work seamlessly

Here lies the contents of the mighty index.html file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <s ...

javascriptjsonexpressreactjs

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

javascriptjqueryhtmlcssajax

Creating Web Components using JavaScript on the fly

I tried to create web components directly from JavaScript, but I encountered an issue where the public constructor could not be found. Here's a basic example to illustrate the situation: The HTML Template: <polymer-element name="wc-foo" construct ...

javascriptpolymerweb-component

Top choice for recording sound and video over the internet

Seeking assistance in finding solutions to enable recording audio and video via web on different platforms such as iPhone and iPad. The recorded media needs to be saved on the server. Any recommendations for a cross-browser compatible approach are apprecia ...

javascriptvideo-captureaudio-recording

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

javascripthtmlangularjsservicecontroller

Guide on how to programmatically assign a selected value to an answer using Inquirer

Currently, I'm utilizing inquirer to prompt a question to my users via the terminal: var inquirer = require('inquirer'); var question = { name: 'name', message: '', validation: function(){ ... } filter: function( ...

javascriptnode.jsnpm