Sample setup for refreshing a Rickshaw graph from remote JSON source

data.json

[{"color":"#DDDF0D","name":"maps.googleapis.com","data":[{"x":1397779200,"y":13},{"x":1397782800,"y":11},{"x":1397786400,"y":10},{"x":1397790000,"y":12},{"x":1397793600,"y":14},{"x":1397797200,"y":13},{"x":1397800800,"y":6},{"x":1397804400,"y":0},{"x":1397808000,"y":0},{"x":1397811600,"y":2},{"x":1397815200,"y":33},{"x":1397818800,"y":17},{"x":1397822400,"y":7},{"x":1397826000,"y":16},{"x":1397829600,"y":29},{"x":1397833200,"y":25},{"x":1397836800,"y":22},{"x":1397840400,"y":30},{"x":1397844000,"y":27},{"x":1397847600,"y":27},{"x":1397851200,"y":18},{"x":1397854800,"y":23},{"x":1397858400,"y":19},{"x":1397862000,"y":7},{"x":1397865600,"y":9},{"x":1397869200,"y":8},{"x":1397872800,"y":21},{"x":1397876400,"y":9},{"x":1397880000,"y":5},{"x":1397883600,"y":6},{"x":1397887200,"y":2},{"x":1397890800,"y":0},{"x":1397894400,"y":0},{"x":1397898000,"y":0},{"x":1397901600,"y":23},{"x":1397905200,"y":0},{"x":1397908800,"y":5},{"x":1397912400,"y":2},{"x":1397916000,"y":5},{"x":1397919600,"y":14},{"x":1397923200,"y":21},{"x":1397926800,"y":19},{"x":1397930400,"y":19},{"x":1397934000,"y":13},{"x":1397937600,"y":9},{"x":1397941200,"y":15},{"x":1397944800,"y":22},{"x":1397948400,"y":7},{"x":1397952000,"y":6},{"x":1397955600,"y":5},{"x":1397959200,"y":0},{"x":1397962800,"y":0},{"x":1397966400,"y":1},{"x":1397970000,"y":0},{"x":1397973600,"y":0},{"x":1397977200,"y":0},{"x":1397980800,"y":0},{"x":1397984400,"y":0},{"x":1397988000,"y":2},{"x":1397991600,"y":0},{"x":1397995200,"y":2},{"x":1397998800,"y":10},{"x":1398002400,"y":21},{"x":1398006000,"y":16},{"x":1398009600,"y":7},{"x":1398013200,"y":14},{"x":1398016800,"y":10},{"x":1398020400,"y":11},{"x":1398024000,"y":4},{"x":1398027600,"y":11},{"x":1398031200,"y":5},{"x":1398034800,"y":1},{"x":1398038400,"y":5},{"x":1398042000,"y":14},{"x":1398045600,"y":36},{"x":1398049200,"y":6},{"x":1398052800,"y":3},{"x":1398056400,"y":0},{"x":1398060000,"y":0},{"x":1398063600,"y":0},{"x":1398067200,"y":0},{"x":1398070800,"y":0},{"x":1398074400,"y":3},{"x":1398078000,"y":6},{"x":1398081600,"y":10},{"x":1398085200,"y":20},{"x":1398088800,"y":30},{"x":1398092400,"y":30},{"x":1398096000,"y":55},{"x":1398099600,"y":69},{"x":1398103200,"y":46},{"x":1398106800,"y":52},{"x":1398110400,"y":38},{"x":1398114000,"y":2077},{"x":1398117600,"y":0},{"x":1398121200,"y":0},{"x":1398124800,"y":37},{"x":1398128400,"y":26},{"x":1398132000,"y":23},{"x":1398135600,"y":8},{"x":1398139200,"y":11},{"x":1398142800,"y":2},{"x":1398146400,"y":2},{"x":1398150000,"y":0},{"x":1398153600,"y":6},{"x":1398157200,"y":0},{"x":1398160800,"y":2385},{"x":1398164400,"y":0},{"x":1398168000,"y":0},{"x":1398171600,"y":0},{"x":1398175200,"y":0},{"x":1398178800,"y":0},{"x":1398182400,"y":0},{"x":1398186000,"y":0},{"x":1398189600,"y":0},{"x":1398193200,"y":0},{"x":1398196800,"y":0},{"x":1398200400,"y":0},{"x":1398204000,"y":0},{"x":1398207600,"y":0},{"x":1398211200,"y":22},{"x":1398214800,"y":18},{"x":1398218400,"y":36},{"x":1398222000,"y":20},{"x":1398225600,"y":10},{"x":1398229200,"y":7},{"x":1398232800,"y":8},{"x":1398236400,"y":1},{"x":1398240000,"y":0},{"x":1398243600,"y":0},{"x":1398247200,"y":2378},{"x":1398250800,"y":0},{"x":1398254400,"y":0},{"x":1398258000,"y":0},{"x":1398261600,"y":0},{"x":1398265200,"y":0},{"x":1398268800,"y":0},{"x":1398272400,"y":0},{"x":1398276000,"y":0},{"x":1398279600,"y":0},{"x":1398283200,"y":0},{"x":1398286800,"y":0},{"x":1398290400,"y":0},{"x":1398294000,"y":0},{"x":1398297600,"y":13},{"x":1398301200,"y":23},{"x":1398304800,"y":18},{"x":1398308400,"y":8},{"x":1398312000,"y":19},{"x":1398315600,"y":23},{"x":1398319200,"y":11},{"x":1398322800,"y":8},{"x":1398326400,"y":0},{"x":1398330000,"y":0},{"x":1398333600,"y":0},{"x":1398337200,"y":0},{"x":1398340800,"y":0},{"x":1398344400,"y":0},{"x":1398348000,"y":0},{"x":1398351600,"y":0},{"x":1398355200,"y":0},{"x":1398358800,"y":0},{"x":1398362400,"y":0},{"x":1398366000,"y":0},{"x":1398369600,"y":0},{"x":1398373200,"y":0},{"x":1398376800,"y":0},{"x":1398380400,"y":0},{"x":1398384000,"y":0}]}]

index.html

<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.css">

  <style>
.rickshaw_graph svg {
	padding-bottom:25px;
}
.chart-buttons {
	margin-bottom:10px;
}
</style>
</head>
<body>
<div class="chart-buttons btn-group" data-toggle="buttons">
	<label id="24hour" class="btn btn-default">
  	<input  name="options" type="radio" class="btn btn-default">24 hours</input>
  </label>
 	<label id="7day" class="btn btn-default">
  	<input  name="options" type="radio" class="btn btn-default">7 day</input>
  </label>
  <label id="3month"  class="btn btn-default">
  	<input  name="options" type="radio" class="btn btn-default">3 month</input>
  </label>
  <label id="12month" class="btn btn-default">
  	<input name="options" type="radio" class="btn btn-default">12 month</input>
  </label>
</div>
<div id="chart_container">
<div id="placeholder">No data available. Usually this means you haven't made any requests yet.</div>
	<div id="y_axis"></div>
	<div id="chart" ></div>
	<div id="legend_container">
		<div id="smoother" title="Smoothing"></div>
		<div id="legend"></div>
	</div>
</div>
<script>
// instantiate our graph!
var legend, yAxis, axes,hoverDetail;
var graph = new Rickshaw.Graph.Ajax( {
	element: document.getElementById("chart"),
	width: 800,
	height: 300,
	renderer: 'line',
	stroke: true,

	dataURL: '/dashboard/data.json',
	onComplete: function(transport) {
		if(transport.graph.series){
			$("#placeholder").hide();
		}
		else{
			$("#placeholder").show();
		}
		var graph = transport.graph;
		if(!hoverDetail){
				hoverDetail = new Rickshaw.Graph.HoverDetail( {
						graph: graph
				} );
			}
		if(!yAxis){
			yAxis = new Rickshaw.Graph.Axis.Y({
    		graph: graph,
    		orientation:'left',
    		element: document.getElementById('y_axis')
			});		
			yAxis.render();
		}
		//$('#legend').html('');
		if(!legend){
			legend = new Rickshaw.Graph.Legend( {
					graph: graph,
					element: document.getElementById('legend')
			} );
			var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
				graph: graph,
				legend: legend
			} );
		}
		if(!axes){
			axes = new Rickshaw.Graph.Axis.Time( {
				graph: graph
			} );
			axes.render();
		}
	}
} );

//Bind the click event to the parent div containing both buttons. Tell it to fire on any element containing the class btn.
$('.chart-buttons').on('click', '.btn', function () {
    btn_id = $(this)[0].id;
    url = '/dashboard/data.json?report_type='+btn_id
    graph.dataURL = url;
    graph.request();
  
});

$(document).ready(function() {
	$("#7day").button('toggle');
});

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