Как передавать данные в режиме реального времени AmCharts

Я работаю над AmCharts в реальном времени в своем приложении AngularJS, и я хотел знать, как я могу помещать точки данных в диаграмму. Ниже приведен код в моем контроллере:

$http.get(hostNameService.getHostName()+"/dashboard/itemValue")
            .then(function (response) {$scope.item = response.data.items;
                function generateChartData(){
                    var chartData = [];
                    for (var i = 0; i < $scope.item.length; i++ ) {
                        var itemId = $scope.item[i].itemId;
                        var avail = $scope.item[i].itemAvailability;

                        chartData.push( {
                            "itemId": itemId,
                            "avail": avail
                        } );
                    }

                    return chartData;
                }

                /**
                 * Create the chart
                 */
                var chart = AmCharts.makeChart( "toolAvailability", {
                    "type": "serial",
                    "theme": "light",
                    "zoomOutButton": {
                        "backgroundColor": '#000000',
                        "backgroundAlpha": 0.15
                    },
                    "dataProvider": generateChartData(),
                    "categoryField": "itemId",
                    "graphs": [ {
                        "id": "g1",
                        "valueField": "avail",
                        "bullet": "round",
                        "bulletBorderColor": "#FFFFFF",
                        "bulletBorderThickness": 2,
                        "lineThickness": 2,
                        "lineColor": "#b5030d",
                        "negativeLineColor": "#0352b5",
                        "hideBulletsCount": 50
                    } ],
                    "chartCursor": {
                        "cursorPosition": "mouse"
                    }
                } )

                /**
                 * Set interval to push new data points periodically
                 */
                // set up the chart to update every second
                setInterval( function() {
                    // normally you would load new datapoints here,
                    // but we will just generate some random values
                    // and remove the value from the beginning so that
                    // we get nice sliding graph feeling

                    // remove datapoint from the beginning
                    chart.dataProvider.shift();

                    // for (var i = 0; i < $scope.item.length; i++ ) {
                    //     var itemId = $scope.item[i].itemId;
                    //     var avail = $scope.item[i].itemAvailability;
                    // }


                    chart.dataProvider.push( {// not sure how I can push the json data here
                        date: //need to push the value here,
                        visits: //need to push the value here
                    } );
                    chart.validateData();
                }, 1000 );
            });

Моя диаграмма получает данные из веб-службы. Веб-служба возвращает 10 элементов, и доступность каждого элемента должна обновляться в режиме реального времени. Я использую itemId и доступность на диаграмме. Первоначально я могу загрузить данные в диаграмму. Но когда диаграмма смещается на одно значение, как мне нажать новое значение. Может ли кто-нибудь сообщить мне, как я могу достичь этой функциональности.


angularjs amcharts ammap
person Valla    schedule 31.08.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я смог добиться этого, внеся следующие изменения в свой код. Я добавил следующую функцию и вызвал эту функцию в заданной функции тайм-аута. Таким образом, для каждого сдвига в диаграмме одно значение будет помещено в диаграмму.

    function pushNewData(index){
                        var itemId = $scope.tools[index].itemId;
                        var avail = $scope.tools[index].availability;

                        chart.dataProvider.push( {
                            itemId: itemId,
                            avail: avail
                        } );

                    }

                var i =0;
                setInterval( function() {
                    chart.dataProvider.shift();
                    pushNewData(i);
                    if(i < $scope.items.length - 1){
                        i++;
                    }else{
                        i = 0;
                    }


                    chart.validateData();
                }, 1000 );
person Valla    schedule 31.08.2016