Render for real time line chart

[Weng Keong Lan]

Hi, 

I am trying to make a real-time multiple series line chart. The chart will update with live data that changes over seconds or minutes. Could you provide us some examples how can we achieve this?

Thanks in advance.

[Srihari Muthukaruppan]

Hi Weng,  

 

We have prepared chart sample based on your requirement. In which, we have used JavaScript setInterval and clearInterval method for live update of chart data. Please find the sample and code snippet below. 

 

Code Snippet: 

<ejs-chart id="container">  

    <e-series-collection>  

        <e-series dataSource="ViewBag.chartData" xName="x"yName="y">  

        </e-series>      

    </e-series-collection>  

</ejs-chart>  

<script>  

    var intervalId;  

    var value = 80, count = 1;  

    var setTimeoutValue = 2000;  

    intervalId = setInterval(  

        function () {  

            if (document.getElementById('container') === null) {  

                clearInterval(intervalId);  

            } else {  

                var chart = document.getElementById('container').ej2_instances[0];  

                for (var j = 0; j < chart.series.length; j++) {  

                    chart.series[j].dataSource.shift();  

                    var dataSource = chart.series[j].dataSource;  

                    var xVal = parseInt(dataSource[dataSource.length - 1].x);  

                    if (Math.random() > .5) {  

                        value += Math.random();  

                    }  

                    else {  

                        value -= Math.random();  

                    }  

                    dataSource.push(  

                        {  

                            x: xVal + count,  

                            y: Math.round(value)  

                        }  

                    );  

                }  

                chart.refresh();  

            }  

        }, setTimeoutValue);  

</script>  

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/RealtimeChart-1193555094.zip  

 

Kindly revert us, if you have any concerns.  

 

Regards,  

Srihari M 

[kimdoyoon]

Hi That demo is very useful to me. However Is there any way to implement it with ej-chart? If there is no way, can ej1 and ej2 charts be used together? If so, please let me know how. Please use asp .net core. Thanks in advance.

[Srihari Muthukaruppan]

Hi kimdoyoon, 

 

We are analyzing your query and we will update the status within one business day(May 31, 2021). We appreciate your patience until then. 

 

Regards, 

Srihari M 

[Durga Gopalakrishnan]

Hi kimdoyoon, 

Thanks for being patience.  

We have prepared live data update sample with ej-chart. In the sample, we have used chart load event to generate data for chart series points and javascript setInterval, clearInterval methods to perform live update. Please check with the below sample. 

<ej-chart id="container" load="onChartLoad"> 

</ej-chart> 

<script> 

        var chartobj, count = 0, chartData = null, intervalId,value = 10; 

        generateData(); 

        function onChartLoad(sender) { 

            chartobj = this; 

            sender.model.series[0].points = chartData; 

            intervalId = window.setInterval(update, 500); 

        } 

        function update() { 

            if (chartobj.model != null) { 

                if (Math.random() > .5) { 

                    if (value < 45) 

                        value += Math.random() * 2.0; 

                    else 

                        value -= 2.0; 

                } 

                else { 

                    if (value > 5) 

                        value -= Math.random() * 2.0; 

                    else 

                        value += 2.0; 

                } 

                chartData.push({ x: i.toString(), y: value }); 

                i++; 

                chartData.shift(); 

                chartobj.model.series[0].points = chartData; 

                $("#container").ejChart("redraw"); 

            } 

            else { clearInterval(intervalId); } 

        };        

    </script> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/LiveChart-1644436325.zip 

Kindly revert us if you have any concerns. 

Regards,  

Durga G