kendo chart refresh data not change

Question

I'm using a Kendo Chart, the first call works fine but when I call refresh_interval 5000 is called, the charts doesn't update. he updated data is displayed on the console. brings back the old results every time. When I refresh the page, I want the chart to bring the updated results. What am i doing wrong?

my code :

<script th:inline="javascript">
  $(function(){
        var page = 1;
    
    createMonthChart(today, 1);
    
    $(window).resize(function(){
            $("#chart_month").data("kendoChart").refresh();
        });
    
  }); 
  
  function createMonthChart(today, page) {
        var date = today;
        $("#chart_month").kendoChart({
            dataSource: {
                transport: {
                    read: {
                        url: "dashboard/monthProcess.json?date="+date+"&&pageNo="+page
                    }
                }
                
            },
            legend: {
                position: "bottom",
                labels: {
                    margin:5,
                },
             },
            seriesDefaults: {
                type: "column",
                stack: true,
                labels:{
                  visible :true,
                  position:"center",
                  background : "transparent",
                template: "#if (value > 0) {# #: value # #}#"
                }
             },
            series: [{
                field: "success",
                name : "success",
                categoryField: "processName"
            },
            {
                field: "fail",
                name : "fail",
                categoryField: "processName"
                
            }
            ],
            seriesColors: ["#3CB371", "#FF6347"],
        });
      } 
    
</script>
<script th:inline="javascript">
  var refresh_interval = 5000;
  $(function(){
    var timer;
    var select = $("select#resetTimeSelect");
    select.siblings("label").text(select.children("option:selected").text());   //refresh time select
    select.change(function(){
        var select_name = $(this).children("option:selected").text();
        $(this).siblings("label").text(select_name);
        
        window.refresh_interval = $(this).children("option:selected").val();
        
        refresh();
    });
    
    
    window.onbeforeunload = function() {
        clearInterval(window.timer);
    }
    
    var ajaxRunning = false;
  
  refresh();
  
  });
  
  function refresh(){
     if(window.refresh_interval != "stop"){
            window.timer = setInterval(function(){
                loadRobotCount();
                pageNo = pageNo + 1;
                if(pageNo == totalPage){
                    pageNo = 1;
                }
                ChartRefreshMonth(today, pageNo);
            
            }, window.refresh_interval);
         }
  
  }
  
  function ChartRefreshMonth(today, page){
        var date = today;
        $.ajax({
             url: "dashboard/monthProcess.json?date="+date+"&&pageNo="+page,
            type : "GET",
            dataType : "json",
            cache : false,
            contentType : "text/json; charset=UTF-8",
            success : function(data) {
                totalPage = data[0].recordCountPerPage;
                $("#chart_month").data("kendoChart").dataSource.read();
                var chart = $("#chart_month").data("kendoChart");
                chart.refresh();
            },
            error : function(xhr, status, err){
                alert(FailMessage);
            }
        });
    }
  

</script>

GaloisGirl GaloisGirl · Accepted Answer · 2020-10-12T10:53:03

In ChartRefreshMonth, this code:

$("#chart_month").data("kendoChart").dataSource.read();

does a call to the backend with the old url.

The result of the call that you are making isn't passed anywhere.

You need to pick 1 of 2 approaches:

the dataSource handles the back-end calls
you handle the calls and then do dataSource.data(result)

Both will work, but you need to pick one and do it right.

kendo chart refresh data not change

1 Answers