Amchart x-axis values are changing not moving/shifting

Question

I have a problem with my x-axis values, since I'm using real time amchart my x-axis values are changing every 3 seconds but the problem is that they're changing not moving, let's say I have (Aug 3) instead of it moving to the left the value changes to the next one! I want it so slide like this one: https://codepen.io/team/amcharts/pen/be2767157df98e1f26caf7f50c524a9a

Mine looks like this: https://codepen.io/team/amcharts/pen/e22f40f4db023433b142f0a01d165adb

If you can notice if there's (Aug 3) the value doesn't move or keeps moving to the end of the chart it changes to the next value, as my problem!

And this is my code if it helps:

  methods:{
    initChart(dataProvieded){
        chart = AmCharts.makeChart("chart"+num, {
              "type": "serial",
              "theme": "light",
              "synchronizeGrid":true,
              "marginTop":0,
              "marginRight": 80,
               "autoMarginOffset":90,
               "dataDateFormat": "YYYY-MM-DD",
              "dataProvider": dataProvieded,
              "zoomOutButton": {
                "backgroundColor": '#000000',
                "backgroundAlpha": 0.15
              },

              "valueAxes": [{ 
                  "axisAlpha": 1,
                  "position": "left",
              //   "autoWrap" : false,
                "minorGridEnabled": true,
                "autoGridCount": false,
                 "gridCount": 3,
             //    "min" : 5 ,
              //   "max" : 2,
            //     "strictMinMax": true,


              }],
              "graphs": [
                {  "id":"g1",
     "balloonText": "[[value]][[category]]",

                  "bullet": "round",
                  "bulletSize": 6,
                  "lineColor": "#003366",
                  "lineThickness": 1.5,
                  "negativeLineColor": "#637bb6",
                  "type": "smoothedLine",
                 "valueField": "value" },

              {
                  "id":"g2",
             "balloonText": "[[value]][[category]]"+ new Date().toJSON().slice(0,10).replace(/-/g,'/') +"",

                  "bullet": "round",
                  "bulletSize": 6,
                  "lineColor": "#00c78c",
                  "lineThickness": 1.5,
                  "negativeLineColor": "#637bb6",
                  "type": "smoothedLine",
                   "valueField": "value2"

              },
              {
                  "id":"g3",

               "balloonText": "[[value]][[category]]",

                  "bullet": "round",
                  "bulletSize": 6,
                  "lineColor": "#f23452",
                  "lineThickness": 1.5,
                  "negativeLineColor": "#637bb6",
                  "type": "smoothedLine",
                   "valueField": "value3",

              }],

              "chartScrollbar": {
                  "graph":"g1",
                  "gridAlpha":0,
                  "color":"#888888",
                  "scrollbarHeight":55,
                  "backgroundAlpha":0,
                  "selectedBackgroundAlpha":0.1,
                  "selectedBackgroundColor":"#000000",
                  "graphFillAlpha":0,
                  "autoGridCount":true,
                  "selectedGraphFillAlpha":0,
                  "graphLineAlpha":0.2,
                  "graphLineColor":"#c2c2c2",
                  "selectedGraphLineColor":"#888888",
                  "selectedGraphLineAlpha":1,
                  "autoGridCount": false,
                   "gridCount": 5,

              },
              "categoryField": "date",
              "categoryAxis": {
                 "minorGridEnabled": true,
                 "autoGridCount": false,
                 "gridCount": 5,
                 "dashLength" : 5,
              }


          }) 


           console.log ('zero');
                setInterval(function(){
                 console.log ('one');
                axios.get('/feeder/1/1').then(function(response){
                console.log ('two');
                    chart.dataProvider.shift();
                    var date0 = new Date(response.data[7]);
                    var hours = date0.getHours();
                    var minutes = "0" + date0.getMinutes();
                    var seconds = "0" + date0.getSeconds();
                    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
                    console.log(formattedTime);
                    chart.dataProvider.push( {
                        date: formattedTime,
                        value: response.data[0] / 1000,
                        value2: response.data[1] / 1000,
                        value3: response.data[2] / 1000
                    } );
                    chart.validateData();
                    }); } , 3000);


        },

Thank you.

Robbert · Accepted Answer

Try removing the line chart.dataProvider.shift(); in your interval function. This line keeps your dataProvider the same length, and this causes the "replace" effect, instead of the move effect that you are looking for.

To keep the chart zoomed in to a specific period (instead of the entire data range) you can use the chart's built-in zoomToIndexes method.

Example: if you want to display the last 30 days/data items, add:

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

(Just after the line chart.validateData();).

(The Stock Chart demo doesn't need this as the "1 month" period is selected, so the chart is automatically re-zoomed after each dataProvider update).

Here's the updated Codepen demo: https://codepen.io/team/amcharts/pen/5657b6c9662913a4693a370fd12d2a7b?editors=1010

Amchart x-axis values are changing not moving/shifting

Answers (1)

Related Questions