Displaying live highcharts data dynamically without alert

Question

Below is my code ,Firstly i had fetched data from database using JSON,after that i binded initial 15 rows to chart,and in setInterval function i am continually binding 1 row after interval of 1 second ,My question is without alert i.e alert("hi") i am not getting initial result,how can i get result without alert?

$(function () {
      $(document).ready(function () {
                var Data = "";
                var dataarray = [];
                var IdArray = [];
                var counter = 0;
                var chart;
                $('#container').highcharts({
                    chart: {
                        type: 'spline',
                        animation: Highcharts.svg, // don't animate in old IE
                        marginRight: 10,
                        events: {
                            load: function () {

                                var series = this.series[0];
                                setInterval(function () {
                                    var i = 16 + counter;
                                    var x = IdArray[i], // current time
                                     y = dataarray[i];
                                    series.addPoint([x, y], true, true);
                                    counter = counter + 1;
                                }, 1000);
                            }
                        }
                    },
                    title: {`enter code here`
                        text: 'Live HighChart From Database'
                    },
                    xAxis: {
                        type: 'decimal'

                    },
                    yAxis: {

                        title: {
                            text: 'Value'
                        }

                    },

                    series: [{
                        name: 'Data from database',
                        data: (function () {
                            // generate an array of random data

                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                contentType: 'application/json',
                                url: 'LiveHighchart.aspx/GetData',  
                                data: '{}',
                                success:
                    function (response) {
                        Data = response.d;
                        for (var i = 0; i < Data.length; i++) {
                            dataarray[i] = Data[i].random;
                            IdArray[i] = Data[i].Id;
                        }
                    }
                            });
                            var data = [];
                            alert("hi");

                            for (var i = 0; i < 15; i++) {
                                data.push({
                                    x: IdArray[i],
                                    y: dataarray[i]
                                });
                            }

                            return data;

                        })()
                    }]
                });
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
        </div>
    </div>
    </form>
</body>
</html>

Can you share your code in that aspx page and the code behind that as well. It will really be helpful — SPandya, Dec 04 '13 at 10:23
url: 'LiveHighchart.aspx/GetData', I have getdata() method in aspx.cs page,In GetData() method I'm fetching data from database and then through ajax request fetching data from getdata() method,code is too long ,this site doesn't supports posting too long codes — Amit, Dec 04 '13 at 10:45

score 0 · Answer 1 · answered Nov 13 '13 at 14:16

0

I think it's because the query hasn't return the result yet - the alert is causing a pause in your app that means the result can be delivered in time. You should think about using callbacks - functions that only run when the data from your AJAX call is returned.

answered Nov 13 '13 at 14:16

Pete Thorne

2,656
4
21
29

I hadn't used callback functions before ,i tried but did not got the result ,can you please explain it more ,or if you could edit the code ,it will be more helpfull – Amit Nov 14 '13 at 06:25
There's an example here that is useful, your solution above won't work in every case so it's worth getting to grips with the way asynchronous calls work: http://stackoverflow.com/questions/1457690/jquery-ajax-success-anonymous-function-scope – Pete Thorne Nov 14 '13 at 09:54
I saw your link above ,callback function is doing exactly what i need ,but while doing it series is not appending to chart so i am not applying callback function as of now ,might be some other issue,thanks for the input – Amit Nov 14 '13 at 13:33

score 0 · Accepted Answer · answered Nov 14 '13 at 09:49

0

I Solved it myself ,code after ajax request was executing before ajax request loads data: this line (async: false) in ajax request forced code after ajax to pause until ajax loads data

answered Nov 14 '13 at 09:49

Amit

11
4

Displaying live highcharts data dynamically without alert

2 Answers2