c3/htdocs/js/samples/zoom2.js

///<reference path="http://localhost/cockpit/js/playground/utils.js"></script>



var chart;
function refresh() {
    if (suspendRefresh)
        return;
    chart.load({
        columns: [
            ["Value"].concat(zoom(column, currentZoom, "t=>Math.round(t.avg())".toLambda())),
            ["xColumn"].concat(zoom(xColumn, currentZoom, "t=>t[0]".toLambda())),
        ]
    });
}

function getChart() {
    return chart;
}
function main() {
    var last = 0;
    var max = 10000;
    var column = Array.generate(max, function (i) {
        return last += Math.randomInt(-10, 10);
    });
    var xColumn = Array.generateNumbers(0, max);
    var options = {
        bindto: "#divChart",
        //transition: { duration: 0 },
        data: {
            columns: [
                ["Value"].concat(column),
                ["x"].concat(xColumn),
            ],//column
            type: "line",
            x: "x"
        },
        zoom2: { 
            enabled: true, 
            //reducers: { 
            //    col: "t=>Math.round(t.avg())".toLambda(), 
            //    xColumns: "t=>t[0]".toLambda() 
            //} 
        }
    };
    chart = c3ext.generate(options);


    //var deltaY = 0;
    //var leftRatio = 0;
    //var el = $("#divChart");
    //var timer = new Timer(doZoom);
    //el.mousewheel(function (e) {
    //    deltaY += e.deltaY;
    //    leftRatio = (e.offsetX - 70) / (e.currentTarget.offsetWidth - 70);
    //    console.log({ "e.offsetX": e.offsetX, "e.currentTarget.offsetWidth": e.currentTarget.offsetWidth, leftRatio: leftRatio });
    //    timer.set(150);
    //    e.preventDefault();
    //    //if(e.deltaY>0)
    //    //    chart.zoom2.zoomIn();
    //    //else if(e.deltaY<0)
    //    //    chart.zoom2.zoomOut();
    //    //console.log(e.deltaX, e.deltaY, e.deltaFactor);
    //});

    window.setInterval(refreshStatus, 1000);

    function refreshStatus() {
        var zoomInfo = chart.zoom2.getZoom();
        var info = {
            reduced:chart.zoom2.maxItems(), 
            actual:(zoomInfo.currentZoom[1]-zoomInfo.currentZoom[0]),
            range:zoomInfo.currentZoom[0] + "-" + zoomInfo.currentZoom[1],
            total: zoomInfo.totalItems
        };
        $("#status").text(JSON.stringify(info, null, " "));
    }
    //function doZoom() {
    //    if (deltaY != 0) {
    //        var maxDelta = 10;
    //        var multiply = (maxDelta + deltaY) / maxDelta;
    //        //var factor = chart.zoom2.factor()*multiply;
    //        //factor= Math.ceil(factor*100) / 100;
    //        console.log({ deltaY: deltaY, multiply: multiply });
    //        chart.zoom2.zoomAndPanByRatio(multiply, leftRatio);//0.5);//leftRatio);
    //        deltaY = 0;
    //    }
    //}

};