"Utilizing JSON data to implement custom time formatting on the y-axis with AmCharts

Looking to convert minutes to hh:mm:ss format in my JavaScript code

var allDataTime = [{
        date: new Date(2012, 0, 1),
       "col": "LONG CALL WAITING",
        "duration1": '720',
        "duration2": '57',
        "duration3": '57',
        "duration4": '57',
        "duration5": '57'


    }, {
        date: new Date(2012, 0, 1),
        "col": "Longest Agent Available",
         "duration1": '770',
        "duration2": '720',
        "duration3": '720',
        "duration4": '720',
        "duration5": '720'

    }
];

// More data arrays for time duration

// Function to handle chart creation and data processing
function callChartTime(type, chartTypeTime) {
    // Implementation details go here
}

// Displaying the chart on the website
<div id="chartdivTime" style="width: 100%; height: 355px;"></div>

This section contains a snippet of JavaScript code that needs to be integrated into an AmCharts chart. The goal is to convert the provided duration values into the hh:mm:ss format for better visualization in the chart. Unfortunately, finding a suitable solution from the AmCharts documentation has been challenging. Assistance in achieving this conversion would be greatly appreciated.

javascriptjqueryangularjssvghtml5-canvas

Answer №1

If you're working with graph objects on a chart, exploring the labelFunction and balloonFunction could be beneficial. More information on these functions can be found here. To convert seconds into the hh:mm:ss format, manual calculation is an option or utilizing a library like moment.js can simplify the task.

moment().startOf('day')
        .seconds(duration1)
        .format('H:mm:ss');

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

Issue: Utilized more hooks than in the previous render cycle

After the initial load of a component that renders and makes data calls on the client side, everything works fine. However, when clicking a "see more" button to make another call, an error occurs in the console indicating that there are too many hooks be ...

javascriptreactjsreact-apollographql-js

Working with JSON data and extracting specific information within the grades

Here is a JSON data structure that contains information about a student named Alice and her grades in various courses: { "student": [{ "cert_id": "59826ffeaa6-b986fc04d9de", "batch_id": "b3d68a-402a-b205-6888934d9", "name": "Alice", "pro ...

javascriptarraysnode.jsjsonparsing

Is there a way to deactivate the save button in CKEditor?

I am currently not interested in using any ajax functionality within ckeditor. Is there a way for me to remove that button from the toolbar? Whenever I click on the save button without disabling it, I encounter strange errors. I found guidance on this topi ...

jqueryckeditor

Is there a way to dynamically alter the background style of a div by clicking on it multiple times using Javascript?

I am attempting to create a calendar where each day changes its background color between blue and green when clicked, using JavaScript and CSS. It should function similar to a toggle feature. The default color is blue, and I have successfully made the days ...

javascriptcss

Tips on implementing Piwik JavaScript code within app.js on Express

I am trying to implement Piwik tracking on my Express website using JavaScript code. I placed the code in my app.js file but encountered an error. Here is the JavaScript code snippet: <script type="text/javascript"> var _paq = _paq || []; ...

javascriptnode.jsexpressmatomo

Tips for adjusting the size of an HTML canvas to fit the screen while preserving the aspect ratio and ensuring the canvas remains fully visible

I'm working on a game project using HTML canvas and javascript. The canvas I am using has dimensions of 1280 x 720 px with a 16:9 aspect ratio. My goal is to have the game displayed at fullscreen, but with black bars shown if the screen ratio is not 1 ...

javascripthtmlcsscanvas

When redirecting to the same component, Vue.js hooks are not triggered

In my Vuejs project, I have two pages located at the same level with a common component. However, when I redirect from post/new to post/edit/:id, the beforeMount method is not being called. redirect() { this.$router.push({path: `home/post/edit/${this ...

javascriptvue.jsvuejs2vue-componentvue-router

Navigating the scope set by a specific string

Is there a more efficient method than iterating through child objects to access the value at a specific location in the $scope, identified by the attribute "Calendar.Scheduling.field.Appointment.ApptDateTime_Date"? I was hoping for a solution similar to an ...

javascriptangularjs

When the browser is refreshed, jQuery will automatically scroll the window down

I created a div that matches the height and width of the window to simulate a "home screen." When scrolling down to view the content, everything works fine. However, after refreshing the browser, it automatically scrolls back to where you were before. I wa ...

jqueryhtmlcssscroll

The function `socket.broadcast.to(roomId).emit('xxxxxx', data)` is not functioning as expected on the client side

Frontend code: var app = angular.module("chatApp", ['btford.socket-io']); app.factory('socket', function (socketFactory) { return socketFactory({ prefix: '', ioSocket: io.connect(&ap ...

angularjsnode.jssocket.io

Tips for passing an array between components in Angular 2

My goal is to create a to-do list with multiple components. Initially, I have 2 components and plan to add more later. I will be sharing an array of tasks using the Tache class. Navbar Component import { Component } from '@angular/core'; impor ...

javascriptangulartypescriptangular-services

Dealing with browser timeouts for HTTP requests using JavaScript

Managing time out situations in a web application when calling a REST API is crucial. Below is the code snippet I am using to make the API call with jQuery ajax. $.ajax({ type: "POST", url: endpoint, data: payload, ...

javascriptjqueryajaxhttp

Optimal structure for AngularJS applications

Seeking guidance on best practices for services, controllers, and directives in AngularJS 1.3.X. Some key things I have observed: - The HTML view only interacts with the main controller and its scope - Directives should not have their own services ...

angularjsmodel-view-controller

jQuery appears to be unresponsive or inactive

I'm trying to implement a jQuery script that will slide in a header after scrolling on the page, but for some reason, it's not working. When I reach the 3rd line, my code editor displays a !read only alert, suggesting there may be a syntax issue? ...

javascriptjquerycss

Tips for loading a unique class name on the initial active UI react component

Is there a way to load a class named "Landingpage" to the body tag or main container div only when the first tab/section (Overview page) is active? The tab sections are located in a child component. Any assistance would be appreciated. Click here for more ...

javascriptreactjsreact-router

Parcel Bundler works perfectly fine on localhost, however, an error is being displayed on the index.html file in the Dist folder

Currently, I am in the process of learning how to use Parcel for bundling purposes. I have set up a index.html file that is connected with index.js. Surprisingly, everything works perfectly fine when I access it via localhost:1234 using Parcel. However, wh ...

javascriptnpmbabeljsnode-modulesparceljs

Displaying Keystonejs list items on every page

Is there a more effective method to efficiently load the content of a Keystone's list on every page, rather than calling it individually in each view? Could this be achieved through middleware.js? The objective is to create a dropdown for the navigat ...

javascriptnode.jsmongoosekeystonejs

Creating a custom Angular filter that leverages the power of $http - a

I want to make a retrieval request using $http in AngularJS and then display the obtained result on the front-end. To achieve this, I'm using {{ URL-STRING | iframely }}. 'use strict' angular.module( 'iframely', [] ).filter( &ap ...

javascriptangularjsscopeangular-filters

Price Adjuster Tracker

Recently, I coded a small JavaScript program with the purpose of: incrementing or decrementing the quantity of an item by 1 adjusting the price of an item based on the initial price However, my excitement turned to disappointment when I encountered these ...

javascripthtmlcss

Injecting Variables Into User-Defined Button

Presenting a custom button with the following code snippet: export default function CustomButton(isValid: any, email: any) { return ( <Button type="submit" disabled={!isValid || !email} style={{ ...

javascriptreactjstypescriptbuttonmaterial-ui