Skip to content

Instantly share code, notes, and snippets.

@sang4lv
Last active August 29, 2015 14:05
Show Gist options
  • Save sang4lv/1d2d389f9cb28397b799 to your computer and use it in GitHub Desktop.
Save sang4lv/1d2d389f9cb28397b799 to your computer and use it in GitHub Desktop.
nv.addGraph( function() {
var data = [
{"key" : "Amount", "values" : [
["1406188303", 383],
["1407121032", 1176],
["1407121182", 799],
["1408066502", 0]
]},
{"key" : "Count", "values" : [
["2014-07-24", 1],
["2014-08-04", 2],
["2014-08-15", 1]
]}
];
var is_amount = false;
var xval = function( d ) {
if( is_amount ) {
return new Date( d[0] * 1000 );
} else {
return d[0];
}
};
var yval = function( d ) {
return d[1];
};
var xlabel = 'Date';
var ylabel = 'Total Count';
var data = [( is_amount ? data[0] : data[1] )];
var chart = nv.models.lineChart().margin( {left : 100} )
.useInteractiveGuideline( true )
.transitionDuration( 350 ) //how fast do you want the lines to transition?
.showLegend( true ) //Show the legend, allowing users to turn on/off line series.
.showYAxis( true ) //Show the y-axis
.showXAxis( true ) //Show the x-axis
.x( xval )
.y( yval );
chart.xAxis.axisLabel( xlabel ).tickFormat( function( d ) {
return d3.time.format( '%Y-%m-%d' )( new Date( d ) ); //Here d is always -1 to 1, why?
} );
chart.yAxis.axisLabel( ylabel );
d3.select( '#order_line svg' ) //Select the <svg> element you want to render the chart in.
.datum( data ) //Populate the <svg> element with chart data...
.call( chart ); //Finally, render the chart!
nv.utils.windowResize( function() {
chart.update();
} );
return chart;
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment