JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<div id="report-graph" style="position: relative; " class="jqplot-target">
    <canvas width="920" height="344" class="jqplot-base-canvas" style="position: absolute; left: 0px; top: 0px; "></canvas>
    <div style="height: 0px; width: 0px; "></div>
    <div class="jqplot-axis jqplot-xaxis" style="height: 11px; position: absolute; left: 0px; width: 920px; bottom: -10px; ">
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: -1px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 97.1111px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 195.222px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 293.333px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 391.444px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 489.556px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 587.667px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 685.778px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 783.889px; " class="jqplot-xaxis-tick"></canvas>
        <canvas width="56" height="11" style="text-align: left; position: absolute; left: 882px; " class="jqplot-xaxis-tick"></canvas>
    </div>
    <div class="jqplot-axis jqplot-yaxis" style="width: 27px; position: absolute; top: 0px; height: 344px; left: -10px; ">
        <canvas width="26" height="11" style="text-align: left; position: absolute; top: 327.5px; "...

JavaScript

/*
1) create large "destination" canvas to use for saving to PNG
2) loop through the desired "source" canvases and save to "destination".
  drawImage() accepts a canvas object as its first argument
*/


/* Here's a function I used on Reconnoiter. 
  However, our markup used divs, not canvases, for each tick
function replace_with_image(gid, mime) {
    mime = mime || 'image/png';
    var $container = $('#' + gid),
        $grid = $('.plot-area canvas:eq(0)', $container),
        grid = $grid.get(0),
        grid_ctx = grid.getContext('2d'),
        $title = $('.graphTitle', $container),
        title_text = $title.html(),
        title_width = grid_ctx.measureText(title_text).width,
        title_height = 20,
        axis_labels = $('.tickLabel', $container).get().reverse(),
        y_axis_width = $(axis_labels.slice(0, 1)).width(),
        x_axis_width = $(axis_labels.slice(-1)).width(),
        $legend = $('.plot-legend', $container),
        output_canvas = document.createElement('canvas'),
        output_ctx = output_canvas.getContext('2d'),
        max_width = $grid.width(),
        diff_width = max_width - title_width,
        x = 0,
        y = 0;

    output_canvas.height = $container.height();
    output_canvas.width = $container.width();

    // title
    output_ctx.font = get_font_string($title);
    output_ctx.textAlign = $title.css('text-align');

    switch (output_ctx.textAlign) {
    case 'center':
        x = max_width / 2;
    }
    output_ctx.textBaseline = 'middle';
    switch (output_ctx.textBaseline) {
    case 'middle':
        y = parseInt($title.css('line-height')) / 2;
    }

    output_ctx.fillText(title_text, x, y, max_width);
    output_ctx.drawImage(grid, 0, title_height); // end title
    output_ctx.font = '';
    for (var i = 0, l = axis_labels.length; i < l; i++) {
        var $label = $(axis_labels[i]);
        if (!output_ctx.font) output_ctx.font = get_font_string($label);
        //output_ctx.textAlign =...