We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Using Javascript to Set the Datasource for a Sparkline

I have a javascript interval that periodically changes (not refresh but completely change) the datasource for all controls on the page. I have a 3 sparklines that I need to change datasources for as well but I've yet to find an example of how to deal with them using javascript. Can you please help?

1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team February 13, 2019 11:45 AM UTC

Hi Lance, 
Greetings from Syncfusion.  
We have analyzed the enquired requirement. We have prepared a sample in which we have updated the data source for every 3 seconds using setInterval method of Javascript method. Find the code snippet below to achieve this. 
function update() { 
        setInterval(function () { 
            Getting instance of chart 
            var spark1Obj = document.getElementById('spark1').ej2_instances[0], 
            Assigned data soruce 
            spark1Obj.dataSource = [{ xval: 'X1', yval: Math.floor(Math.random() * 6) + 1 }, 
            Refreshed the sparkline using refresh method 
        }, 3000); 
Before Refreshing: 
After Refreshing: 
Here we have changed the data source alone. You can change this based on your scenario. Sample for reference can be found below. 

Live Chat Icon For mobile
Up arrow icon