Chart from DataScript

by Trever Shick

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.3.0/lodash.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/datascript.js"></script>
<div id="chart"></div>
<script>
    d = datascript;
    dataUrl = '//s3.amazonaws.com/trevershick-experiments/ITJcgK6';
</script>
<script src="//rawgit.com/trevershick/6d9364085a1e566b2e18/raw/console.js"></script>

JavaScript

var chart1 = new Highcharts.Chart({
    chart: {
        renderTo: "chart",
        animation: false
    },
    title: {
        text: 'Data Sizes'
    },
    yAxis: {
        title: {
            text: 'Megabytes'
        }
    }
});
chart1.showLoading();

console.log("Creating DataScript Connection");
conn = d.create_conn();

function populateChart(data) {
    populateData(data);
    buildPlotLines();
   chart1.hideLoading();    
}

function buildPlotLines() {
var qs = []
    qs.push('[ ');
    qs.push('    :find (avg ?dataSize) (max ?dataSize) (min ?dataSize)');
    qs.push('    :where');
    qs.push('    [ ?e "dataSize" ?ds ]');
    qs.push('    [(/ ?ds 1048576) ?dataSize]');
    qs.push(']');
    result = d.q(qs.join(''), d.db(conn));
    console.log("Avg Max Min -> ", result);
    var avgMaxMin = result[0];
    chart1.yAxis[0].addPlotLine({
        value: avgMaxMin[0],
        width: 2,
        color: 'green',
        label: {
            text: 'Avg',
            style: {
                color: 'green'
            }
        }
    });
    chart1.yAxis[0].addPlotLine({
        value: avgMaxMin[1],
        width: 2,
        color: 'blue',
        label: {
            text: 'Max',
            style: {
                color: 'blue'
            }
        }
    });
    chart1.yAxis[0].addPlotLine({
        value: avgMaxMin[2],
        width: 2,
        color: 'pink',
        label: {
            text: 'Min',
            style: {
                color: 'pink'
            }
        }
    });
}    

function populateData(tx) {
    var tx_report = d.transact(conn, tx);
    //console.group("Initial Transaction")
    //console.log("Tx Report", tx_report);
    //console.table( [tx_report.tempids]);
    //console.table(d.datoms(d.db(conn), ":eavt", 1));
    //console.groupEnd();
    console.log("Populated Data.");
    

    qs = []
    qs.push('[ ');
    qs.push('    :find ?db ?dataSize');
    qs.push('    :where');
    qs.push('    [ ?e "dataSize" ?ds ]');
    qs.push(' ...