function DebugChart($canvas) {

    var canvas = $canvas[0];

    var context = canvas.getContext('2d');

    var magnitude = 100;

    var margin = 5;
    var height = canvas.height - margin * 2;
    var width = canvas.width - margin * 2;

    function calcY(y) {
        return height - margin - (Math.min(y / magnitude, 1) * height);
    }
    function calcX(x, start, end) {
        return margin + width * ((x - start) / (end - start));
    }

    this.render = function(series, intervals, start, end) {

        context.clearRect(0, 0, canvas.width, canvas.height);

        context.fillStyle="#B2EBF2";
        for (var i = 0; i < intervals.length; i++) {
            var interval = intervals[i];
            var left = calcX(interval.startTime, start, end);
            var right = calcX(interval.endTime, start, end);
            context.fillRect(left, 0, right - left, canvas.height);
        }

        context.strokeStyle = "#00BFA5";
        context.lineWidth = 2;
        context.beginPath();
        for (var i = 0; i < series.length - 1; i++) {

            var point = series[i];

            var y = calcY(point.volClippedSmooth);
            var x = calcX(point.timestamp, start, end);
            if (i == 0) {
                context.moveTo(x, y);
            } else {
                context.lineTo(x, y);
            }
            x++;
        }
        context.stroke();

        context.strokeStyle = "#FF4500";
        context.lineWidth = 2;
        context.beginPath();
        for (var i = 0; i < series.length - 1; i++) {

            var point = series[i];

            var y = calcY(point.mean);
            var x = calcX(point.timestamp, start, end);
            if (i == 0) {
                context.moveTo(x, y);
            } else {
                context.lineTo(x, y);
            }
            x++;
        }
        context.stroke();

    }

    return this;
}
/**
 * This is a chart that displays raw volume and speaking interval data, for debug purposes
 */
This is a chart that displays raw volume and speaking interval data, for debug purposes
This is a chart that displays raw volume and speaking interval data for debug purposes
function DebugChart($canvas) {
    var canvas = $canvas[0];
    var context = canvas.getContext('2d');
    var magnitude = 100;
    var margin = 5;
    var height = canvas.height - margin * 2;
    var width = canvas.width - margin * 2;
    function calcY(y) {
        return height - margin - (Math.min(y / magnitude, 1) * height);
    }
    function calcX(x, start, end) {
        return margin + width * ((x - start) / (end - start));
    }
    this.render = function(series, intervals, start, end) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillStyle="#B2EBF2";
        for (var i = 0; i < intervals.length; i++) {
            var interval = intervals[i];
            var left = calcX(interval.startTime, start, end);
            var right = calcX(interval.endTime, start, end);
            context.fillRect(left, 0, right - left, canvas.height);
        }
        context.strokeStyle = "#00BFA5";
        context.lineWidth = 2;
        context.beginPath();
        for (var i = 0; i < series.length - 1; i++) {
            var point = series[i];
            var y = calcY(point.volClippedSmooth);
            var x = calcX(point.timestamp, start, end);
            if (i == 0) {
                context.moveTo(x, y);
            } else {
                context.lineTo(x, y);
            }
            x++;
        }
        context.stroke();
        context.strokeStyle = "#FF4500";
        context.lineWidth = 2;
        context.beginPath();
        for (var i = 0; i < series.length - 1; i++) {
            var point = series[i];
            var y = calcY(point.mean);
            var x = calcX(point.timestamp, start, end);
            if (i == 0) {
                context.moveTo(x, y);
            } else {
                context.lineTo(x, y);
            }
            x++;
        }
        context.stroke();
    }
    return this;
}
function DebugChart ( $canvas ) { var canvas = $canvas [ 0 ] ; var context = canvas . getContext ( '2d' ) ; var magnitude = 100 ; var margin = 5 ; var height = canvas . height - margin * 2 ; var width = canvas . width - margin * 2 ; function calcY ( y ) { return height - margin - ( Math . min ( y / magnitude , 1 ) * height ) ; } function calcX ( x , start , end ) { return margin + width * ( ( x - start ) / ( end - start ) ) ; } this . render = function ( series , intervals , start , end ) { context . clearRect ( 0 , 0 , canvas . width , canvas . height ) ; context . fillStyle = "#B2EBF2" ; for ( var i = 0 ; i < intervals . length ; i ++ ) { var interval = intervals [ i ] ; var left = calcX ( interval . startTime , start , end ) ; var right = calcX ( interval . endTime , start , end ) ; context . fillRect ( left , 0 , right - left , canvas . height ) ; } context . strokeStyle = "#00BFA5" ; context . lineWidth = 2 ; context . beginPath ( ) ; for ( var i = 0 ; i < series . length - 1 ; i ++ ) { var point = series [ i ] ; var y = calcY ( point . volClippedSmooth ) ; var x = calcX ( point . timestamp , start , end ) ; if ( i == 0 ) { context . moveTo ( x , y ) ; } else { context . lineTo ( x , y ) ; } x ++ ; } context . stroke ( ) ; context . strokeStyle = "#FF4500" ; context . lineWidth = 2 ; context . beginPath ( ) ; for ( var i = 0 ; i < series . length - 1 ; i ++ ) { var point = series [ i ] ; var y = calcY ( point . mean ) ; var x = calcX ( point . timestamp , start , end ) ; if ( i == 0 ) { context . moveTo ( x , y ) ; } else { context . lineTo ( x , y ) ; } x ++ ; } context . stroke ( ) ; } return this ; }
This is a chart that displays raw volume and speaking interval data, for debug purposes
This is a chart that displays raw volume and speaking interval data for debug purposes