Dynamically Updating Chart Values

[Phil Feldman]

Hi All,

I'm in the process of figuring out charts and tables.

For purposes of learning, I have set up some chart values that in turn are used to feed into a data table. I am using 'charts' and 'datatable' with YUI 3.14.0:

        var myChartValues = [

            {category:"a", values:0},

            {category:"b", values:0},

            {category:"c", values:0},

            {category:"d", values:0},

            {category:"e", values:0}

        ];

        var myDataTable = new Y.DataTable({

            columns: ["category", "values"],

            data :myChartValues,

            summary: "This is my summary",

            caption: "This is my caption"

        });

The chart and table are then set up:

        var mychart = new Y.Chart({dataProvider:myChartValues, render:"#mychart"});

        myDataTable.render('#myTable');

Last, I set up a timer callback that updates the data every 100 msec:

        var doChange = function(){

            for(var i = 0; i < myChartValues.length; ++i){

                var val = Math.sin(seconds+i);

                myChartValues[i].values = val;

            }

            myDataTable.set('data', myChartValues);

            // mychart.set('seriesCollection', myChartValues); // why can't I just do this? (1)

            mychart.set('dataProvider', myChartValues); // why do I have to do this? (2)

            mychart.render("#mychart"); // why do I have to do this? (3)

            seconds += (msecs/1000.0);

            setTimeout(doChange, msecs);

        }

I'd like to know how to set the data in the chart so that it behaves like the DataTable, where the set() fires an event that causes a refresh (like comment(1)). Instead, the only thing I can get to work is resetting the dataProvider and forcing a render (comments (2) and (3). 

Thanks in advance, and I'm enclosing the full file if that's useful.

[tripp]

You should not have to force a render after setting your dataProvider. For example, this works as expected.

        var doChange = function(){
            for(var i = 0; i < myChartValues.length; ++i){
                var val = Math.sin(seconds+i);
                myChartValues[i].values = val;
            }
            myDataTable.set('data', myChartValues);

            mychart.set('dataProvider', myChartValues);

            seconds += (msecs/1000.0);
            setTimeout(doChange, msecs);

         };

Setting the dataProvider attribute updates the chart with the new values. In my testing (3.14.), there was no need to force a render.

Thanks.

[Phil Feldman]

That is the strangest thing. This was not working yesterday, and today it's fine. Kudos on that whole "spooky action at a distance" superpower of yours.