example-chart-modellist.js

YUI({gallery: 'gallery-2014.03.12-23-08'}).use('chart', 'lazy-model-list', 'gallery-io-utils', 'gallery-itsamodellistsyncpromise', function(Y) {
    var URL = "../data/PumpReports.php",
        cyclesChart, chartData;

    cyclesChart = new Y.Chart({
        categoryKey: "dateTime",
        categoryType: "time",
        seriesKeys:["temperature"],
        axes: {
            category: {
                title: "Time",
                type: "time",
                labelFormat: "%b %e",
                styles: {
                    label: {
                        fontFamily: "Helvetica",
                        fontSize: "100%",
                        color: "black",
                        rotation: -45
                    },
                    title: {
                        fontFamily: "Helvetica",
                        fontSize: "150%"
                    }
                }
            },
            values:{
                title: "Temperature",
                type:"numeric",
                labelFunction: function(val) {
                    return Math.round(val);
                },
                alwaysShowZero: false,
                styles: {
                    label: {
                        fontFamily: "Helvetica",
                        fontSize: "100%",
                        color: "black",
                        rotation: 0
                    },
                    title: {
                        fontFamily: "Helvetica",
                        fontSize: "150%"
                    }
                }
            }
        },
        seriesCollection:[{
            styles: {
                marker:{
                    width: 7,
                    height: 7
                },

                line:{
                    weight: 3
                }
            }
        }]
    });

    // Define the LazyModelList with synclayer:
    chartData = new Y.LazyModelList();
    chartData.syncPromise = function(action, options) {
        if (action==='read') {
            return Y.io.get(URL, options).then(
                function(response) {
                    // here you need to transform the responsedata into a valid array
                    var dataAsArray = response; // <-- need some logic
                    return dataAsArray;
                }
            );
        }
        // do not forget to reject the promise in case an invalid 'action' is defined
        return new Y.Promise(function (resolve, reject) {
            reject(new Error('The syncPromise()-method was is called with undefined action: '+action));
        });
    };

    // define eventlistener that makes sure the data is bound to the chart after loading:
    chartData.after('load', function(e) {
        cyclesChart.set('dataProvider', chartData.toArray());
    });

    // load first time and render
    chartData.loadPromise().then(
        function() {
            cyclesChart.render('#fr-results');
        }
    );

    // to re-load the data whenever needed:
    chartData.load();

});