var pixelgraph = function(canvas_id, data_series, bg_color='#000000', border_color='#FFFFFF', dot_color='#6666dd', current_dot_color='#FF1133', dot_size=1) {
    const canvas = document.getElementById(canvas_id);
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;

    ctx.lineWidth = 1;

    // draw background

    ctx.fillStyle = bg_color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // draw border

    ctx.strokeStyle = border_color;

    ctx.moveTo(0, 0);
    ctx.lineTo(width, 0);
    ctx.stroke();

    ctx.lineTo(width, height);
    ctx.stroke();

    ctx.lineTo(0, height);
    ctx.stroke();

    ctx.lineTo(0, 0);
    ctx.stroke();

    ctx.fillStyle = dot_color;

    var data_max = Math.max(...data_series);

    for (var i=0; i<data_series.length; i++){
        var height_scale = parseInt(height * (data_series[i] / data_max));
        if (height_scale == height){
            height_scale = height - 1;
        }
        if (height_scale == 0){
            height_scale = 1;
        }
        if (i == data_series.length - 1){
            ctx.fillStyle = current_dot_color;
        }
        ctx.fillRect(i, height - height_scale, dot_size, dot_size);
    }
}

var pixelgraph_multiseries = function(canvas_id, data_series, bg_color='#000000', border_color='#FFFFFF', dot_colors=['#6666dd', '#FF1133'], dot_size=1, common_scale=true, disp_zero_opt=undefined, bar_opt=undefined, horiz_stretch=true, y_limit=undefined, first_as_common=undefined) {
    const canvas = document.getElementById(canvas_id);
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;

    ctx.lineWidth = 1;

    // draw background

    ctx.fillStyle = bg_color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // draw border

    ctx.strokeStyle = border_color;

    ctx.moveTo(0, 0);
    ctx.lineTo(width, 0);
    ctx.stroke();

    ctx.lineTo(width, height);
    ctx.stroke();

    ctx.lineTo(0, height);
    ctx.stroke();

    ctx.lineTo(0, 0);
    ctx.stroke();

    var max_points = [];
    var max_so_far = 0;
    var max_width = 0;
    for (var i=0; i<data_series.length; i++){
        var max = Math.max(...data_series[i]);
        max_points.push(max);
        if (max > max_so_far){
            max_so_far = max;
        }
        if (data_series[i].length > max_width){
            max_width = data_series[i].length;
        }
    }

    var width_scale = width / max_width;


    for (var i=0; i<data_series.length; i++){
        if (dot_colors.length >= data_series.length){
            ctx.fillStyle = dot_colors[i];
        } else {
            ctx.fillStyle = dot_colors[i % dot_colors.length];
        }
        if (common_scale){
            var data_max = max_so_far;
        } else if (!common_scale && (first_as_common && first_as_common[i])) {
            var data_max = max_points[0];
        } else {
            var data_max = max_points[i];
        }
        if (y_limit){
            data_max = y_limit;
        }

        var position = 0;
        for (var j=0; j<data_series[i].length; j++){
            if (data_series[i][j] > 0 || (disp_zero_opt && disp_zero_opt[i])){
                var height_scale = parseInt(height * (data_series[i][j] / data_max));
                if (height_scale >= height){
                    height_scale = height - 1;
                }
                if (height_scale == 0){
                    height_scale = 1;
                }
                if (bar_opt && bar_opt[i]) {
                    fill_height = height_scale;
                } else {
                    fill_height = dot_size;
                }
                var horiz_mod = 0;
                if (horiz_stretch){
                    horiz_mod = width_scale;
                }
                ctx.fillRect(position, height - height_scale, dot_size + horiz_mod, fill_height);
            }
            position += width_scale;
        }
    }
}