The x-axis values in Amchart are transitioning rather than shifting

Question

The x-axis values in Amchart are transitioning rather than shifting

I'm facing an issue with my x-axis values as I'm using real-time amcharts. The x-axis values change every 3 seconds, but instead of smoothly moving, they abruptly change to the next value. I would like it to slide smoothly like this example: https://codepen.io/team/amcharts/pen/be2767157df98e1f26caf7f50c524a9a

Here is how my chart currently looks like: https://codepen.io/team/amcharts/pen/e22f40f4db023433b142f0a01d165adb

The problem is that when the x-axis value is (Aug 3), instead of smoothly transitioning to the next value to the left, it abruptly changes. This reflects the issue I'm encountering.

Below is a snippet of my code for reference:

methods:{
    initChart(dataProvieded){
        // Insert your chart initialization code here
        // Data and configuration options are included in this section
        
    },

Any help or guidance in resolving this issue would be highly appreciated. Thank you.

javascript css web amcharts

Answer 1

Answer №1

To achieve the desired move effect instead of the replace effect in your chart, consider removing the line chart.dataProvider.shift(); from your interval function. This will maintain the length of your dataProvider.

To focus the chart on a specific period rather than the entire data range, utilize the chart's zoomToIndexes method.

For instance, if you wish to show the last 30 days or data items, include the following code:

chart.zoomToIndexes(chart.dataProvider.length - 30, chart.dataProvider.length - 1);

(Place this code right after chart.validateData(); line).

(Please note that the Stock Chart demo automatically re-zooms when the "1 month" period is selected, so it doesn't require this adjustment).

Check out the updated Codepen demo here: https://codepen.io/team/amcharts/pen/5657b6c9662913a4693a370fd12d2a7b?editors=1010

Answer 2

To achieve the desired move effect instead of the replace effect in your chart, consider removing the line chart.dataProvider.shift(); from your interval function. This will maintain the length of your dataProvider.

To focus the chart on a specific period rather than the entire data range, utilize the chart's zoomToIndexes method.

For instance, if you wish to show the last 30 days or data items, include the following code:

chart.zoomToIndexes(chart.dataProvider.length - 30, chart.dataProvider.length - 1);

(Place this code right after chart.validateData(); line).

(Please note that the Stock Chart demo automatically re-zooms when the "1 month" period is selected, so it doesn't require this adjustment).

Check out the updated Codepen demo here: https://codepen.io/team/amcharts/pen/5657b6c9662913a4693a370fd12d2a7b?editors=1010

The x-axis values in Amchart are transitioning rather than shifting

Answer №1

Similar questions

JavaScript not displaying properly in Django application deployed on Heroku

Can you explain the definition of "mount" in the context of Express?

Injecting SVG styling into HTML using the content tag and CSS

enhance the brilliance of elements at different intervals

Encountering difficulties in populating mongoose document following a model query

Re-rendering multiple components with the new `use` feature in React version 18.3.0

Resizing the window causes divs to be positioned relative to the image (almost functional)

Vue/Vite vanilla setup encountering a 'Failed to fetch dynamically imported module' TypeError

What is the proper way to utilize several initialization functions simultaneously?

Synchronous AJAX requests do not function properly in IE and Firefox, but they do work in Chrome and Safari

When interacting with the iframe in an Ionic3 app, it suddenly crashes

tips for optimizing javascript file caching

Introducing the innovative Icon Collapsable JQuery - a versatile tool that

I am having difficulty retrieving the user's IP address in VueJs

Tips for saving the recently assigned IP address from Terraform?

ToggleButtonGroup in Material UI is a great way to create toggle

Angular - a simple method to determine the number of non-empty inputs in a complex template-driven form

How about trying out some dropdowns?

Achieving a consistent scroll value using RxJs

Update header component dynamically upon successful login with Angular 11