JSFiddle - React, Tailwind, and code Playground

by webxl

HTML

Non functional fiddle just showing configuration options for each chart and the domStats helper I whipped up for timing, and to count child nodes and listeners.

JavaScript

// rickshaw

data.getManagerReturns(function (data) {
            console.log('returns: ' + data.length);

            var rickshaw_fmt_data = data.map(function (obj) {
                return {
                    name: obj.name,
                    data: obj.returns.map(function (y, i) {
                        return {x: i, y: y};
                    }),
                    color: 'steelblue'
                }
            });

            stats.start('Random Chart', document.getElementById('randomChart'));

            var graph = new Rickshaw.Graph({
                element: document.getElementById("randomChart"),
                renderer: 'line',
                height: 300,
                width: 800,
                series: rickshaw_fmt_data

            });


            var y_ticks = new Rickshaw.Graph.Axis.Y({
                graph: graph,
                orientation: 'left',
                element: document.getElementById('randomChart_y_axis')
            });

            var x_ticks = new Rickshaw.Graph.Axis.X({
                graph: graph,
                orientation: 'bottom',
                element: document.getElementById('randomChart_x_axis')
            });


            graph.render();

            stats.stop('Random Chart');
            stats.report();


        });

// vega


data.getManagerReturns(function (data) {
        console.log('returns: ' + data.length);

        var trans = data.reduce(function (a, datum) {
            return a.concat(
                    datum.returns.map(function (obj, i) {
                        return {name: datum.name, x: i, y: obj};
                    })
            );

        }, []);

        var randomChartDef = {
            "width": 800,
            "height": 400,
            "padding": {"top": 10, "left": 50, "bottom": 80, "right": 10},
            "data": [
                {
                    name: "table",
                    values: trans,
                    "format": {"parse": {"x": "number",...