Updating time format in JSON code for AmCharts styling

Currently, I am in the process of creating a chart with AmCharts. Specifically, I am focusing on the stocklegend section.

"stockLegend": {
"valueTextRegular": "[[time]]:[[value]]"
}

In this scenario, the 'time' refers to a Date object that has been converted from a timestamp found within a JSON dataset loaded into a JavaScript object serving as the data provider for the chart (

"dataProvider": consChartData.Data
, where Data is an array containing values and timestamps).

With the current code snippet [[time]]:[[value]], my output looks like this:

https://i.sstatic.net/a9F6C.png

However, I would like the format to be: Dec 23 2017, 5:21:00 IST: 17,686.54. Is there a way to achieve this specific formatting for the 'time' variable?

Edit

My attempt to use solutions suggested in How to format a JavaScript date did not yield the desired result. If I apply those methods here, it results in 

"valueTextRegular":dateFormat("[[time]]") + "[[value]]"
. However, when I create a new Date object based on the provided time, the output displays:

"NaN undefined NaN 17,686.54"

which is not the expected outcome.

javascriptjsondatetimeformatamcharts

Answer №1

To properly format the date, you will need to utilize StockLegend's valueFunction:

"valueFunction": function (panel, value) {

    var category = panel.category;

    if (category && category instanceof Date) {
        // Dec 23 2017, 5:21:00 IST: 17,686.54
        return [AmCharts.formatDate(category, "MMM D YYYY, H:N:SS"), " IST: ", panel.dataContext.value].join("");
    }

    return value;
}

Make sure to explore the following resources for more information:

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 apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

What is the best way to retrieve nested reference data all at once from a Firestore document?

I have two distinct collections stored within my Firestore database. The first collection is users, and it can be visualized as shown here: https://i.stack.imgur.com/AKlyM.png The second collection is posts, represented by the following structure: http ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Encountering a blank response object when making a POST request with the fetch API

I'm new to working with express/Node.js. I recently attempted to send a request including the current user's location (longitude and latitude using the geolocation API). /public/index.html <!DOCTYPE > <html> <head> <me ...

javascriptnode.jsexpressserver-sidefetch-api

tips for concealing a row in the mui data grid

I am working on a data grid using MUI and I have a specific requirement to hide certain rows based on a condition in one of the columns. The issue is that while there are props available for hiding columns, such as hide there doesn't seem to be an eq ...

javascriptreactjstypescriptmaterial-ui

What could be causing my Puppeteer scraper to malfunction when I alter the search term?

The Task In this project, I am building a web scraper using NodeJS with Puppeteer. The goal is to scrape data for "Jeep Wranglers" and organize the results in JSON format. Comparing IPhone X and Jeep Wrangler Initially, everything worked smooth ...

javascriptnode.jsdompuppeteer

The Angular framework's structure is loaded in a combination of synchronous and asynchronous ways once the primeng tableModule

Encountered this error while trying to load the TableModule from primeng into my components module file and running 'npm run packagr': Maximum call stack size exceeded To address this, I switched my primeng version from primeng12 to primeng11.4. ...

javascripttypescriptmoduleprimengnpm-package

Tips for modifying animations based on screen width thresholds

Currently, I've implemented the data-aos attribute to add a "fade-up-right" animation to an element on my website, as shown below: <div className="des__Container" data-aos="fade-up-right"> However, I now want to modify this ...

javascriptreactjsviteaos.js

What is the correct way to configure environment variables in a Next.js application deployed on Vercel?

As I develop my web app in Next.js, I have been conducting tests to ensure its functionality. Currently, my process involves pushing the code to GitHub and deploying the project on Vercel. Incorporating Google APIs dependencies required me to obtain a Cli ...

javascriptnext.jsenvironment-variablesvercel

Getting started with TinyMCE in Nuxt: A step-by-step guide

I need to incorporate this script into my Nuxt code: <script> tinymce.init({ selector: "#mytextarea", plugins: "emoticons", toolbar: "emoticons", toolbar_location: "bottom", menubar: false ...

javascriptvue.jstinymcenuxt.jsscript-tag

The camera feature in Ionic Cordova seems to be malfunctioning

I am attempting to implement the ionic cordova camera feature. Here is the code snippet I have: HomePage.html <ion-view view-title="Example"> <ion-content> <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}"> <img ng-s ...

javascriptcordova

Integrate the complete Mozilla pdf.js viewer into a Vue.js application using webpack through vue-cli

I am trying to integrate the full Mozilla pdf.js viewer into a Vue SPA. After reading a Stack Overflow post with an accepted solution, I still can't seem to get it to work. I keep encountering the 'Uncaught SyntaxError: Unexpected token <&apo ...

javascriptpdfvue.jswebpackpdf.js

Error message: Unable to locate module (webpack)/hot/emitter when running ionic serve with Ionic 4

Current Technology Stack: Node v10.15.1 Ionic 4.10.1 Upon running ionic serve, an error is encountered: ERROR in (webpack)/hot/emitter.js [ng] Module not found: Error: Can't resolve 'events' in '/zazou/node_modules/@angular-de ...

javascriptangularionic-frameworkwebpack

Tips for saving array data in a single database field using json encoding in the Luman framework

How can I efficiently store array values in a single field database using json_encode in Lumen? I retrieve the value from the request: $qualification_id = array($request->input('qualification_id')); This is my line of code for encoding to ...

phpjsonweb-serviceslaravel

How to update data in AngularJS grid component using ng-bind directive

As a newcomer to AngularJS, I'm facing an issue that I need help with. Here's my problem: I have an ng-grid connected to a table. Inside the grid, there are values along with an ID (which is a foreign key from another table). Instead of display ...

javascriptangularjsng-grid

Prevent the hiding of a select element with jQuery Chosen Select

I am facing difficulty hiding a select element with the chosen-select class if it does not have any elements present. I attempted: $("#Category2").hide(); and also tried removing the chosen-select class before hiding the element: $("#Category2").re ...

javascriptjqueryjquery-chosen

Fetching data dynamically using ajax as you scroll

Currently, I am using the jQuery Tools Plugin to create an image slider. However, I am facing a challenge with loading a large number of images all at once. Since the slider is coded in JavaScript, I am not sure how to control the scroll position. I would ...

javascriptjqueryajaxscroll

Is Javascript Profiling a feature available in Firebug Lite?

Exploring the world of JavaScript profiles, I decided to step away from the usual Chrome Developer tools. Can Firebug Lite for Google Chrome provide Javascript Profiling functionality? ...

javascriptfirefoxfirebug

AngularJS requires that JSON object property values be converted to strings in order to be displayed as actual templates

Each tab click accesses a json array containing unique templates such as ui-grid or c3 chart directive (c3.js). When a specific tab is clicked, the template in string format must be rendered into actual templates like ui-grid, c3-chart, etc. var sampleJs ...

javascriptangularjsangularjs-scopeangularjs-templates

Managing extensive geographical information through HTTP

What is the most efficient way to transmit a substantial volume of map information via HTTP for rendering on the client side? There must be a more effective approach than simply transmitting a JSON file containing all map data. I am interested in how maj ...

javascriptjsongoogle-maps

Setting default values for Select2 input with tagging in ASP.NET MVC is a simple process that can greatly enhance the user experience

I am currently utilizing a Select2 input box as a tag controller in my view: CSHTML <input id="tagSelector" type="hidden" style="width: 300px"/> JS $('#tagSelector').select2({ placeholder: 'Select a tag...', ...

c#javascriptjsonasp.net-mvc-4jquery-select2