Enhance Highcharts-ng by Updating the X-Axis Labels

Hey there, I could really use some assistance. I'm currently using the Highcharts-NG to generate my charts, but I've encountered a minor issue. My graph is up and running, I'm successfully pushing live data to it, however, instead of having X values "1", "2", "3" each time I add a new point to the series, I'd like to insert a timestamp on the X axis. In regular Highcharts, this can easily be achieved with the addPoint() function, but unfortunately, the highcharts-ng does not support this function. Could someone please lend a hand?

Here's the link to my working file: http://jsfiddle.net/zrKEb/

javascriptangularjshighchartshighcharts-ng

Answer №1

Check out my implementation of the addPoint function in the highcharts-ng directive:

$scope.chart_realtimeForceConfig = {
options: {
  chart: {
    type: 'line',
  },   
  xAxis: { 
    type: 'datetime' ,         
    labels: {
    format: '{value:%H:%M:%S %Y}'
    }
    },
},
series: [{
  name: 'Fx',
  data: [],

}, ],
func: function(chart) {
  $timeout(function() {
    chart.reflow();

  }, 300);

  $interval(function() {

    var shift = chart.series[0].data.length > 100;

    chart.series[0].addPoint([Date.now(),Math.floor(Math.random() * 100) + 1], true, shift, false);
  }, 1000);
},
loading: false

}

});

The date format is applied in the chart

http://codepen.io/ruisebastiao/pen/BKmQQz

Answer №2

After trying various methods, I finally came across a solution, though I am not certain if it is the most efficient way to achieve my goal.

$scope.highchartsNG.xAxis.categories.push($filter('date')(new Date(), "mediumTime"));

This code snippet will add the current timestamp to the X-Axis and format it accordingly. The end result will display the time in the format of 'h:mm:ss a'. If there are any alternative solutions, please feel free to share them in response to my question.

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

Is it possible to incorporate a PHP line within a Handlebars context array?

I'm currently utilizing handlebars along with a handlebars register helper to iterate through an array that I've included in my context. The result is then displayed as an unordered list (ul). However, I'm facing an issue when attempting to ...

javascriptphphandlebars.js

I encountered an error while trying to add a document to Firestore using the 'add' method in Vue.js. Can someone provide guidance on how to

Whenever the function is triggered (on click), I aim to include a new document. Although it functions with .set(), my goal is for a new document to be created each time the form is submitted. The current error code I am encountering is: https://i.sstatic ...

javascriptfirebasevue.jsgoogle-cloud-firestore

The attempt to save data failed with a timed out error for Operation `todos.insertOne()` after 10000ms of buffering

const express=require("express"); const { stringify } = require("querystring"); const router= express.Router() const Db=require("../models/Db") router.get("/",(req,res)=>{ res.render("index.hbs"); }) .post("/addData",async(req,res)=>{ const ...

javascriptnode.jsmongodbexpressruntime-error

Tips for effectively recycling the describe sections in mocha test cases

My app has different modes, each with its own loading times and configurations. One particular mode has a long loading period every time a page is opened which is causing some testing challenges. Currently, I have separate test files for each section of th ...

javascriptselenium-webdrivermocha.jse2e-testingwebdriver-io

What exactly does the question mark represent in the code structure as indicated in VSCode?

When looking at the image, you can see that in the description of done(), VSCode indicates the type of parameters using a colon error: any or sometimes with a question mark and colon user?: any. So, what exactly is the distinction between these two ways o ...

javascriptnode.jstypescriptvisual-studio-code

Unable to avoid IE8 warning about reposting using client-side code

When using asp.net webforms, every server control generates a post request when clicked. If you try to reload the page with F5 or Ctrl+R after that request, the browser will show a re-post warning by default. In an attempt to avoid this behavior in IE 7-* ...

javascripthtmlasp.netwebinternet-explorer-8

The onload function in jQuery is not functioning properly when the page is refreshed

I'm just starting out with jquery and I have a simple project in mind. The idea is to have two pictures stacked on top of each other, but I want the page to start showing the second picture first (at a specific scroll point). Then as the user scrolls ...

javascriptjqueryhtmlcssonload

Leverage the specific child's package modules during the execution of the bundle

Project Set Up I have divided my project into 3 npm packages: root, client, and server. Each package contains the specific dependencies it requires; for example, root has build tools, client has react, and server has express. While I understand that this ...

javascriptnode.jstypescriptnpmwebpack

Troubleshooting: Unable to load template file content in AngularJS ng-view

Setting up a demo angular app has been quite the challenge for me. Despite my efforts, the content from my partial file (partials/test.html) is not loading into the layout file as expected. Below is a snippet of my index.html: <!DOCTYPE html> <ht ...

javascripthtmlangularjsangularjs-moduleangularjs-config

Populate a Dropdown Menu with Directory Content for User Selection of d3.js JSON Data

I have a d3 forced-directed graph that is currently using a static JSON file for data: d3.json("../Data/sample.json", function(error, graph) { //do stuff }); However, I would like to give the user the ability to select the data file from a drop-down ...

javascriptphphtmljsond3.js

How can I display a "loading..." message as a temporary placeholder while waiting for my Apexcharts to load?

I've spent a day trying to solve this issue but couldn't find a solution. Any help would be greatly appreciated. Recently, I was working on creating a cryptocurrency tracker in React. I successfully built a table that displays multiple currencie ...

javascriptreactjschartsapexcharts

What are the reasons behind the lack of smooth functionality in the Bootstrap 4 slider?

My customized bootstrap4 slider is functional, but lacks smoothness when clicking on the "next" and "prev" buttons. The slider transitions suddenly instead of smoothly. Any suggestions on how to fix this? Here is the code for the slider: $('.carous ...

javascripthtmljquerycssbootstrap-4

Having trouble retrieving POST parameters

I'm attempting to send a post parameter (key: test, value: somevlaue) using PostMan with the restify framework. I've tried two methods, but both are failing: The first method results in this error: { "code": "InternalError", "message": "Can ...

javascriptnode.jsexpressrestify

Using Javascript, delete all chosen HTML elements containing innerText

Looking to extract certain HTML tags from a block of code in TextArea1 and display the modified output in TextArea2 upon clicking a button. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8&quo ...

javascripthtml

Why does my JavaScript only trigger my web service request when I set a breakpoint?

Can you help me understand why my JavaScript code only calls my webservice when I set a breakpoint on the line ].getJSON, but not if I remove the breakpoint? $(function () { $("#" + @Model.BidObjectId).submit(function () { ale ...

c#javascriptjson

Issues related to ng-model within a dropdown list

Currently, I am facing an issue with retrieving the selected value from a select element using ng-model. Even though the value is displayed correctly on the application page, it remains at the initial value in the app controller. Despite my efforts to find ...

javascriptangularjs

Looking to transition from Angular 1.5x to ReactJS, what is the most effective method for conducting A/B tests and exploring different views?

As I transition part of the UI code to ReactJS, I am considering A/B testing my app for instrumentation. I have looked into Intuit's Wasabi as a potential framework but found its setup process in production to be cumbersome. I am seeking an alternativ ...

javascriptangularjsreactjsabtest

Unable to display JSON results in a tabular format

After successfully implementing the AJAX method in jQuery, I am able to receive a response. However, I am encountering difficulties when trying to display the arrays in a table format. success:function(resp){ var json =JSON.parse(JSON.stringif ...

javascriptjqueryjsonajax

Strip away encoded HTML tags using AngularJS

Can anyone help me with removing HTML code from text using the ng-bind-html option in AngularJS? Initially, my text looks like this: '&lt;p&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt; &lt;w:WordDocument&gt; &lt;w:Vie ...

angularjsng-bind-htmlngsanitize

"415 (Unsupported Media Type) encountered when making a POST request in a REST API

I've encountered an issue with a React component where a checkbox triggers a POST request to a REST API with a single parameter. Despite setting a breakpoint in the WebAPI code, it's not being hit and I'm receiving a 415 Unsupported Media Ty ...

javascriptjqueryreactjsasp.net-web-apiasp.net-web-api2