I would like to make a ECG-like hear-beat diagram, but the default x-sampling rate shows a gap in the graph. Paste this into http://graphie-to-png.khanacademy.org/ to see the results. Any suggestions are welcome.

heart_beat_diagram.js

// X and Y ranges of the graph
var X_RANGE = [-2, 10];
var Y_RANGE = [-35, 100];

// Width of the graph in pixels
// Let's use 400 for "normal" graphs and 170 for "small" graphs
var SIZE = 400;

var xScale;
var yScale;
setup();

style({
    stroke: BLUE,
    fill: "none"
});


var peak_func = function (x, height, width, location) {
    var slope = 2*height/width;
    if (x===location) { return height}
    if (x===location+width/2) { return 0}
    if (x < (location-width/2)) {return 0}
    else if (x > (location+width/2)) {return 0}
    else if ((location-width/2) <= x  && x <= location ) {
        return slope*(x-location+width/2);
    }
    else if (location <= x  && x <= (location+width/2)  ) {
        return -1*slope*(x-(location+width/2));
    }
    else {
        return 0;
    }    
}

var heart_beat = function (x, location, size) {
    var width1 = 0.3, width2=0.2;
    return peak_func(x,size,width1,location-width1/2) 
            + peak_func(x,-0.3*size,width2,location+width2/2);
}


plot(function(x) {
    // Write down the function you want to plot here
    return heart_beat(x,2,100)+ heart_beat(x,4,100) + heart_beat(x,6,100) + heart_beat(x,8,100);
}, X_RANGE);



function setup() {
    xScale = SIZE / (X_RANGE[1] - X_RANGE[0]);
    yScale = SIZE / (Y_RANGE[1] - Y_RANGE[0]);
    var xAxisPadding = 70 / xScale;
    var yAxisPadding = 25 / yScale;
    var xStep = max(round(20 / xScale), 1);
    var yStep = max(round(20 / yScale), 1);
    graphInit({
        gridRange: [X_RANGE, Y_RANGE],
        range: [[X_RANGE[0], X_RANGE[1] + xAxisPadding],
                [Y_RANGE[0], Y_RANGE[1] + yAxisPadding]],
        scale: [xScale, yScale],
        gridStep: [xStep, yStep],
        tickStep: 1,
        labelStep: 1,
        unityLabels: false,
        labelFormat: function(s) { return "\\small{" + s + "}"; },

        //xLabelFormat: function(s) { return "\\tiny{" + s + "}"; },
        axisArrows: "<->"
    });
    style({
        clipRect: [[X_RANGE[0], Y_RANGE[0]],
                [X_RANGE[1] - X_RANGE[0],
                Y_RANGE[1] - Y_RANGE[0]]]
    });

    label([0, Y_RANGE[1]], "V", "above");
    label([X_RANGE[1], 0], "t[\\textrm{sec}]", "right");
}