Using Javascript to Set the Datasource for a Sparkline

[Lance Harwell]

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?

[Dharanidharan Dharmasivam]

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 

            spark1Obj.refresh(); 

             //... 

        }, 3000); 

    } 

 

 

Screenshot: 

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. 

http://www.syncfusion.com/downloads/support/forum/142602/ze/SparkLine-1223046993  

 

Thanks, 

Dharani.