vinniefalco/gist:617836a19c75a6ba906a3273c326617f

## gistfile1.txt
<!DOCTYPE html>
<!--
    Copyright (c) 2019 Vinnie Falco (vinnie.falco@gmail.com)

    Distributed under the Boost Software License, Version 1.0. (See accompanying
    file LICENSE_1_0.txt or copy at http://www.boost.org/LICENSE_1_0.txt)

    Official repository: https://github.com/vinniefalco/json
-->
<html>
<head>
</head>
<body>
<h1>Boost.JSON Benchmarks</h1>
<canvas id="charts" width="800" height="600"></canvas>
<br>
<textarea id="data" cols="60" rows="20" overflow="hidden" onkeyup="autosize(this)">
parse,small.json,msvc,64,boost.pool,247
parse,small.json,msvc,64,rapidjson.memory,270
parse,small.json,msvc,64,boost.default,163
parse,small.json,msvc,64,rapidjson.crt,239
parse,small.json,msvc,64,nlohmann,68
parse,random.json,msvc,64,boost.pool,269
parse,random.json,msvc,64,rapidjson.memory,294
parse,random.json,msvc,64,boost.default,170
parse,random.json,msvc,64,rapidjson.crt,286
parse,random.json,msvc,64,nlohmann,73
parse,small.json,msvc,32,boost.pool,219
parse,small.json,msvc,32,rapidjson.memory,247
parse,small.json,msvc,32,boost.default,140
parse,small.json,msvc,32,rapidjson.crt,215
parse,small.json,msvc,32,nlohmann,62
parse,random.json,msvc,32,boost.pool,244
parse,random.json,msvc,32,rapidjson.memory,272
parse,random.json,msvc,32,boost.default,149
parse,random.json,msvc,32,rapidjson.crt,264
parse,random.json,msvc,32,nlohmann,63
</textarea>

<!--
parse,small.json,clang,64,boost.pool,325
parse,small.json,clang,64,rapidjson.memory,307
parse,small.json,clang,64,boost.default,199
parse,small.json,clang,64,rapidjson.crt,270
parse,small.json,clang,64,nlohmann,69
parse,random.json,clang,64,boost.pool,352
parse,random.json,clang,64,rapidjson.memory,389
parse,random.json,clang,64,boost.default,202
parse,random.json,clang,64,rapidjson.crt,367
parse,random.json,clang,64,nlohmann,70
parse,small.json,clang,32,boost.pool,285
parse,small.json,clang,32,rapidjson.memory,268
parse,small.json,clang,32,boost.default,166
parse,small.json,clang,32,rapidjson.crt,237
parse,small.json,clang,32,nlohmann,66
parse,random.json,clang,32,boost.pool,329
parse,random.json,clang,32,rapidjson.memory,333
parse,random.json,clang,32,boost.default,176
parse,random.json,clang,32,rapidjson.crt,329
parse,random.json,clang,32,nlohmann,62
-->
<script src="reimg.js"></script>
<script>

var Width = 800;
var Height = 600; // per graph
var mbsMax = 0;

function autosize (f) {
  if (f.scrollHeight > f.clientHeight) {
    f.style.height = f.scrollHeight + "px";
  }
}

function chart(title, rows)
{
    var xMax = Math.max(...Object.values(rows));

    var ctx = charts.getContext("2d");

    // gray separator
    ctx.beginPath();
    ctx.strokeStyle = "#A0A0A0";
    ctx.moveTo(20, 0.5);
    ctx.lineTo(Width - 20, 0.5);
    ctx.stroke();
    ctx.translate(0, 30);

    // title
    ctx.textAlign = "left";
    ctx.fillStyle = "#000000";
    ctx.font = 'bold 20px sans-serif';
    ctx.fillText(title, 20, 0);
    ctx.translate(0, 30);

    // chart rows
    Object.entries(rows).forEach(([name, mbs]) =>
    {
        var dy = 4;

        ctx.textAlign = "left";
        ctx.fillStyle = "#000000";
        ctx.font = '18px sans-serif';
        ctx.fillText(name, 20, 0);

        if(name.startsWith("boost"))
            ctx.fillStyle = "#ff6600";
        else
            ctx.fillStyle = "#808080";
        var x = (Width - 170 - 40) * mbs / mbsMax;
        ctx.fillRect(170, -20+dy, x, 20);

        ctx.textAlign = "right";
        ctx.fillStyle = "#ffffff";
        ctx.font = '15px sans-serif';
        ctx.fillText(mbs + " MB/s", 170 + x - 10, 0);

        ctx.translate(0, 24);
    });

    // gray separator
    ctx.translate(0, -4);
    ctx.beginPath();
    ctx.strokeStyle = "#A0A0A0";
    ctx.moveTo(20, 0.5);
    ctx.lineTo(Width - 20, 0.5);
    ctx.stroke();
}

function update()
{
    var tab = new Object();
    var lines = data.value.split('\n');
    mbsMax = 0;
    for (var i = 0; i < lines.length; i++)
    {
        if(lines[i].length == 0)
            continue;
        items = lines[i].split(',');
        var title =
            items[0] + ' ' +
            items[1] + ' (' +
            items[2] + ' ' +
            items[3] + '-bit)';
        var name = items[4];
        var mbs = items[5];
        if(! (title in tab))
            tab[title] = new Object();
        if(! (name in tab[title]))
            tab[title][name] = new Object();
        tab[title][name] = mbs;
    }
    Object.entries(tab).forEach(([name, rows]) =>
    {
        mbsMax = Math.max(mbsMax, ...Object.values(rows));
    });

    charts.width = Width;
    charts.height = Height * Object.entries(tab).length;
    var ctx = charts.getContext("2d");

    // fill canvas in white to make everything opaque
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0, 0, charts.width, charts.height);

    // leave a 20-pixel top margin
    ctx.translate(0, 10);

    // draw each chart
    Object.entries(tab).forEach(([name, rows]) =>
    {
        chart(name, rows);
    });
}

data.oninput = function()
{
    update();
}

update();

</script>
</body>
</html>
	<!DOCTYPE html>
	<!--
	Copyright (c) 2019 Vinnie Falco (vinnie.falco@gmail.com)

	Distributed under the Boost Software License, Version 1.0. (See accompanying
	file LICENSE_1_0.txt or copy at http://www.boost.org/LICENSE_1_0.txt)

	Official repository: https://github.com/vinniefalco/json
	-->
	<html>
	<head>
	</head>
	<body>
	<h1>Boost.JSON Benchmarks</h1>
	<canvas id="charts" width="800" height="600"></canvas>
	<br>
	<textarea id="data" cols="60" rows="20" overflow="hidden" onkeyup="autosize(this)">
	parse,small.json,msvc,64,boost.pool,247
	parse,small.json,msvc,64,rapidjson.memory,270
	parse,small.json,msvc,64,boost.default,163
	parse,small.json,msvc,64,rapidjson.crt,239
	parse,small.json,msvc,64,nlohmann,68
	parse,random.json,msvc,64,boost.pool,269
	parse,random.json,msvc,64,rapidjson.memory,294
	parse,random.json,msvc,64,boost.default,170
	parse,random.json,msvc,64,rapidjson.crt,286
	parse,random.json,msvc,64,nlohmann,73
	parse,small.json,msvc,32,boost.pool,219
	parse,small.json,msvc,32,rapidjson.memory,247
	parse,small.json,msvc,32,boost.default,140
	parse,small.json,msvc,32,rapidjson.crt,215
	parse,small.json,msvc,32,nlohmann,62
	parse,random.json,msvc,32,boost.pool,244
	parse,random.json,msvc,32,rapidjson.memory,272
	parse,random.json,msvc,32,boost.default,149
	parse,random.json,msvc,32,rapidjson.crt,264
	parse,random.json,msvc,32,nlohmann,63
	</textarea>

	<!--
	parse,small.json,clang,64,boost.pool,325
	parse,small.json,clang,64,rapidjson.memory,307
	parse,small.json,clang,64,boost.default,199
	parse,small.json,clang,64,rapidjson.crt,270
	parse,small.json,clang,64,nlohmann,69
	parse,random.json,clang,64,boost.pool,352
	parse,random.json,clang,64,rapidjson.memory,389
	parse,random.json,clang,64,boost.default,202
	parse,random.json,clang,64,rapidjson.crt,367
	parse,random.json,clang,64,nlohmann,70
	parse,small.json,clang,32,boost.pool,285
	parse,small.json,clang,32,rapidjson.memory,268
	parse,small.json,clang,32,boost.default,166
	parse,small.json,clang,32,rapidjson.crt,237
	parse,small.json,clang,32,nlohmann,66
	parse,random.json,clang,32,boost.pool,329
	parse,random.json,clang,32,rapidjson.memory,333
	parse,random.json,clang,32,boost.default,176
	parse,random.json,clang,32,rapidjson.crt,329
	parse,random.json,clang,32,nlohmann,62
	-->
	<script src="reimg.js"></script>
	<script>

	var Width = 800;
	var Height = 600; // per graph
	var mbsMax = 0;

	function autosize (f) {
	if (f.scrollHeight > f.clientHeight) {
	f.style.height = f.scrollHeight + "px";
	}
	}

	function chart(title, rows)
	{
	var xMax = Math.max(...Object.values(rows));

	var ctx = charts.getContext("2d");

	// gray separator
	ctx.beginPath();
	ctx.strokeStyle = "#A0A0A0";
	ctx.moveTo(20, 0.5);
	ctx.lineTo(Width - 20, 0.5);
	ctx.stroke();
	ctx.translate(0, 30);

	// title
	ctx.textAlign = "left";
	ctx.fillStyle = "#000000";
	ctx.font = 'bold 20px sans-serif';
	ctx.fillText(title, 20, 0);
	ctx.translate(0, 30);

	// chart rows
	Object.entries(rows).forEach(([name, mbs]) =>
	{
	var dy = 4;

	ctx.textAlign = "left";
	ctx.fillStyle = "#000000";
	ctx.font = '18px sans-serif';
	ctx.fillText(name, 20, 0);

	if(name.startsWith("boost"))
	ctx.fillStyle = "#ff6600";
	else
	ctx.fillStyle = "#808080";
	var x = (Width - 170 - 40) * mbs / mbsMax;
	ctx.fillRect(170, -20+dy, x, 20);

	ctx.textAlign = "right";
	ctx.fillStyle = "#ffffff";
	ctx.font = '15px sans-serif';
	ctx.fillText(mbs + " MB/s", 170 + x - 10, 0);

	ctx.translate(0, 24);
	});

	// gray separator
	ctx.translate(0, -4);
	ctx.beginPath();
	ctx.strokeStyle = "#A0A0A0";
	ctx.moveTo(20, 0.5);
	ctx.lineTo(Width - 20, 0.5);
	ctx.stroke();
	}

	function update()
	{
	var tab = new Object();
	var lines = data.value.split('\n');
	mbsMax = 0;
	for (var i = 0; i < lines.length; i++)
	{
	if(lines[i].length == 0)
	continue;
	items = lines[i].split(',');
	var title =
	items[0] + ' ' +
	items[1] + ' (' +
	items[2] + ' ' +
	items[3] + '-bit)';
	var name = items[4];
	var mbs = items[5];
	if(! (title in tab))
	tab[title] = new Object();
	if(! (name in tab[title]))
	tab[title][name] = new Object();
	tab[title][name] = mbs;
	}
	Object.entries(tab).forEach(([name, rows]) =>
	{
	mbsMax = Math.max(mbsMax, ...Object.values(rows));
	});

	charts.width = Width;
	charts.height = Height * Object.entries(tab).length;
	var ctx = charts.getContext("2d");

	// fill canvas in white to make everything opaque
	ctx.fillStyle = "#FFFFFF";
	ctx.fillRect(0, 0, charts.width, charts.height);

	// leave a 20-pixel top margin
	ctx.translate(0, 10);

	// draw each chart
	Object.entries(tab).forEach(([name, rows]) =>
	{
	chart(name, rows);
	});
	}

	data.oninput = function()
	{
	update();
	}

	update();

	</script>
	</body>
	</html>