chart.q

chrome: "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome "

.nv.t1: {.j.j {{`key`values!(y;`x`y xcol (x,'y)#z)}[;;x]/:[c[0];1_c:cols x]} x}

.chart.libpath: "/" sv (getenv `QHOME;"ext";"chart")
.chart.template: {hsym `$"/" sv (.chart.libpath;"template";string ` sv (x;`html))}
.chart.tempfile: {hsym `$"/" sv (.chart.libpath;"tmp";string ` sv (`$-3_(string .z.Z) except ".:";`html))}

plot:{[template; data]
	lines: read0 .chart.template template;
	out: {ssr[y; "{{data}}"; x]}[data] each lines;
	tempfile: .chart.tempfile[];
	tempfile 0: out;
	system chrome, 1_string tempfile}

//test 
t1: ([]time: til 10; price: 10?100; r: 10?1.0)
t2: ([]t: til 10; p: 10?100; s: 10?1.0)
plot[`nvscatter; .nv.t1 t1]
plot[`nvscatter; .nv.t1 t]
plot[`nvscatter; .nv.t1 0^select `int$on, avail_price from f where id=`3797153]

nvscatter.html

<link href="css/nv.d3.css" rel="stylesheet" type="text/css">
<script src="lib/d3.js" charset="utf-8"></script>
<script src="lib/nv.d3.js"></script>
<div id='chart'></div>
<script>
  var data = 
  {{data}}
  ;

    // create the chart
    var chart;
    nv.addGraph(function() {
        chart = nv.models.scatterChart()
            // .showDistX(true)
            .showDistY(true)
            .useVoronoi(true)
            .color(d3.scale.category10().range())
            .duration(300)
        ;
        chart.dispatch.on('renderEnd', function(){
            console.log('render complete');
        });

        chart.xAxis.tickFormat(d3.format('.02f'));
        chart.yAxis.tickFormat(d3.format('.02f'));
        chart.tooltipContent(function(key) {
            return '<h2>' + key + '</h2>';
        });

        d3.select('#chart')
            .append('svg')
            .datum(data)
            .call(chart);

        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function(e) { ('New State:', JSON.stringify(e)); });
        return chart;
    });
</script>

need ability to customise axis format
i.e. x is date