Implementing time and date formatting in Highcharts

I'm almost finished with my highchart, but I am struggling to make the datetime/timestamp display correctly. I'm not sure if it's an issue with the format for the xAxis or the series.

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

Here is my data: 

[{"x":"2016-04-08 12:11:02","y":32},{"x":"2016-04-08 14:22:07","y":2},{"x":"2016-04-11 10:10:06","y":4},{"x":"2016-04-11 11:56:35","y":2},{"x":"2016-04-11 12:16:20","y":2},{"x":"2016-04-11 14:09:27","y":2},{"x":"2016-04-11 15:03:31","y":1},{"x":"2016-04-11 20:18:41","y":1172},{"x":"2016-04-11 21:00:06","y":1014}]

$('#container').highcharts('StockChart', {
        rangeSelector : {
            selected : 1
        },
        xAxis: {
            type: 'datetime'
        },
        title : {
            text : 'test'
        },
        series : [{
            name : 'signups',
            data : data,
            turboThreshold : 0
        }]
    });

I believe it's just a small detail that I am overlooking. Thank you!

javascriptjsondatetimehighchartstimestamp

Answer №1

Convert each of your dates to Date.UTC

var date = new Date(yourData[i].x);
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
console.log(new Date(Date.UTC(year, month, day, hours, minutes, seconds)));

Next, add it to your series It may be a bit lengthy, but it will do the trick. Check out this FIDDLE:

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 pros and cons of using a piped connection for Puppeteer instead of a websocket?

When it comes to connecting Puppeteer to the browser, you have two options: using a websocket (default) or a pipe. puppeteer.launch({ pipe: true }); What distinguishes these approaches? What are the benefits and drawbacks of each method? How do I know wh ...

javascriptnode.jspuppeteerwebautomation

When iterating over every element in an array with jq

If I run the following command: kbc get pods -o=json | jq -c I will receive output like this: {"apiVersion":"v1","items":[{"name":"a"},{"name":"b"},{"name":"c"}]} Now, how can I access and display the name of each element in the items array? Would some ...

jsonbashjq

AFrame: keeping an element's world position and rotation intact while reparenting

I am attempting to reassign a child element (entity) to another parent while preserving its position, rotation, and possibly size in the scene. Ideally, I would like to implement a component (let's call it "reparent") that can be added to an entity to ...

javascriptthree.jsaframe

Incorporating middleware through app.use functionality

Can you explain the difference between the following code snippets: function setLocale(req, res, next) { req.params.locale = req.params.locale || 'pt'; res.cookie('locale', req.params.locale); req.i18n.setLocale(req.params ...

javascriptnode.jsexpress

The capability to scroll within a stationary container

Whenever you click a button, a div slides out from the left by 100%. This div contains the menu for my website. The problem I'm encountering is that on smaller browser sizes, some of the links are hidden because they get covered up. The #slidingMenu ...

javascriptjqueryhtmlcss

JavaScript error message stating that the setAttribute function is null

As a newcomer to JS, I am currently working on creating a task list webpage that allows users to submit projects and create task lists within each project with designated due dates. In order to generate unique ID tags for projects and tasks, I utilized UU ...

javascripthtmlnpmwebpack

"Apply a class to a span element using the onClick event handler in JavaScript

After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...

javascriptjqueryclassonclickhtml

How can we dynamically update an environment variable for the IP address before running npm start in a React application?

Currently, I am attempting to automatically set the REACT_APP_DEPLOY_DOMAIN variable in the .env file. Here is one approach that I have implemented to address this challenge. In the script below, I am extracting my IP address: const os = require("os"); ...

javascriptreactjsenvironment-variables

Generate instances based on JSON data (dictionaries)

I need help creating a Python class that utilizes data from a specific JSON file. The JSON file consists of a list of dictionaries like the following: { "phonebook": [ { "full_name": "John Doe", "add ...

pythonjsonpython-3.xclassdictionary

Using JAXBElements in adapter code to modify JSON structure

I am looking to customize the JSON output by including only strings for objects that have a single element and not an array. Below is my POJO. @Component("myVO") @Scope("prototype") @XmlRootElement @XmlAccessorType(XmlAccessType.NONE) @XmlType(propOrder ...

jsonxmljaxb

"Threads snap as soon as they begin to be put to use

Encountering an issue with the command yarn run serve, the error log states: $ vue-cli-service serve INFO Starting development server... 10% building 2/2 modules 0 activeevents.js:173 throw er; // Unhandled 'err ...

javascriptnode.jsvue-cli

Is the removal of the Vue-Router link happening when you click on the top app bar icon in Google Material

Review of the following code snippet: <!DOCTYPE html> <html> <head> <title>test</title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='vie ...

javascriptvue.jsmaterial-designvue-router

Processing made easy with jQuery

In my HTML page, I have multiple rows that represent records from a database. Each row contains input fields and a link at the end. When I click on the link, I need to capture the values of the input fields within the same row. Here is an example of the H ...

javascriptjqueryhtml

Angular 13: A guide on pulling data from an Excel spreadsheet

I have been encountering issues while trying to display data from a CSV file on a web platform using Angular 13. The errors I am facing are related to binding 'ngModel' and type mismatches in the code. errors Error: src/app/app.component.html:24 ...

javascripthtmlangulartypescript

Random crashes are observed in Selenium tests during the execution of JavaScript code

Currently, I am in the process of writing functional tests for a Zend application. These tests are executed using PHPUnit and a wrapper called https://github.com/chibimagic/WebDriver-PHP In order to handle the extensive use of JavaScript and AJAX in the a ...

phpjavascriptseleniumphpunitwebdriver

Accessing data from a JSON file within a JavaScript program

Here's the scenario: I have created a function that reads my JSON file and returns the value found at the end. This is how my files are organized: https://i.sstatic.net/TMeXVHNJ.png Below is my script.js file: async function readJSONFile(path) { ...

javascriptjsonfetch-api

Searching for patterns in text to identify non-blank characters with specified limitations

I'm looking to extract text surrounded by % symbols without any whitespace between them. For example, this should match: %link% But this shouldn't: %my link% An easy regex solution would be: /%\S*%/g However, there's a requirement t ...

javascriptregex

What steps do I need to take in order to make this array equation function properly?

I've developed a Javascript code that calculates the total linear footage based on values entered by the user. Below is the snippet of the JavaScript code... var totalLinealFootage = 0; for (var i = 0; i <= 24; ++i) { ...

javascriptnan

Troubleshooting the issue with the htmlFor attribute

I have encountered an issue with creating radio buttons and labels using JavaScript. Despite adding the 'for' attribute in the label using 'htmlFor', it does not apply to the actual DOM Element. This results in the label not selecting t ...

javascripthtmlradio-buttonlabel

Implementing a Searchable Autocomplete Feature within a Popover Component

Having an issue saving the search query state. https://i.stack.imgur.com/HPfhD.png https://i.stack.imgur.com/HbdYo.png The problem arises when the popover is focused, the searchString starts with undefined (shown as the second undefined value in the ima ...

javascriptreactjsautocompletematerial-uireact-props