在ASP.NET MVC中自动刷新Highcharts

Question

I am working on asp.net MVC 5. I have created 4 different types of charts in it which are viewing on same page. I am getting data from a meter at almost 15-20 seconds interval. All i want to do is to refresh my charts after each 15/20 seconds so for every new entry in DB i should not refresh my page manually. For this i have used javascript setInterval in my graph view like bellow

setInterval(function () {
    $.ajax({
        url: '/Home/MultiGraph',
        type: "POST",
        success: function (result) {
            $("#c1").html(result);
        }
    });        
    alert("hello");
}, 3000);

Bellow are my divs in which i have placed my charts

<div id="c1">
    <div id="container1" style="height: 400px; width:auto"></div>


    <div id="container2" style="height: 400px; width:auto"></div>


    <div id="container3" style="height: 400px; width:auto"></div>


    <div id="container4" style="height: 400px; width:auto"></div>
</div>

At $(window).on('load', function () { } i have placed my 4 charts initialization like bellow

var chart1 = new Highcharts.Chart({//rendered to container1});
var chart2 = new Highcharts.Chart({//rendered to container2});
var chart3 = new Highcharts.Chart({//rendered to container3});
var chart4 = new Highcharts.Chart({//rendered to container4});

All the data in charts are coming in array format

So after running my page look like bellow image

After i press Ok i get bellow

I don't know why it's happening, i just want to refresh/reload the charts only but all i am getting the above results as it's refresh the whole page also on refresh i am unable to view my charts

Moreover my charts are placed in a view and this view is following the main layout ie else charts and search bar all my view is coming from layout

UPDATE:

Bellow is the image which is showing me the data in result

Any help would be highly appreciated

Answer 1

since you are using setInterval it repeats everything inside on that clause, it keeps adding HighChart object in that object.

What you can do is add beforeSend in your ajax:

$.ajax({
    url: '/Home/MultiGraph',
    type: "POST",
    beforeSend: function (result) {
            $("#c1").empty(); //empty first the div
    },
    success: function (result) {
        $("#c1").html(result);
    }
});