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: http://ift.tt/2f6Tmt2
Mine looks like this: http://ift.tt/2hmew7g
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": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]</b></span>",
"bullet": "round",
"bulletSize": 6,
"lineColor": "#003366",
"lineThickness": 1.5,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value" },
{
"id":"g2",
"balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]"+ new Date().toJSON().slice(0,10).replace(/-/g,'/') +"</b></span>",
"bullet": "round",
"bulletSize": 6,
"lineColor": "#00c78c",
"lineThickness": 1.5,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value2"
},
{
"id":"g3",
"balloonText": "<img src='javascripts/images/info.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[value]]</b></span><img src='javascripts/images/time.png' style='vertical-align:bottom; margin-right: 5px; width:28px; height:21px;'><span style='font-size:10px; color:#000000;'><b>[[category]]</b></span>",
"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.
