hbin/dashboard_controller.rb

## dashboard_controller.rb
class DashboardController < ApplicationController
  def index
  end

  def status
    failed    = rand(100)
    processed = rand(100) + 500

    render json: {
      Total: failed + processed,
      Failed: failed
    }
  end
end

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
    <link type="text/css" rel="stylesheet" href="/assets/detail.css">
    <link type="text/css" rel="stylesheet" href="/assets/graph.css">
    <link type="text/css" rel="stylesheet" href="/assets/legend.css">
    <link type="text/css" rel="stylesheet" href="/assets/lines.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/assets/d3.v3.js" type="text/javascript" charset="utf-8"></script>
    <script src="/assets/rickshaw.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body>
    <div class="container">
      <div id="chart_container">
        <div id="chart"></div>
      </div>
      <div id="legend"></div>

      <script type="text/javascript" charset="utf-8">
        var timeInterval = 2000;
        var url = "http://localhost:3000/dashboard/status.json";

        // instantiate our graph!
        var graph = new Rickshaw.Graph({
          element: document.getElementById("chart"),
          width: 900,
          height: 500,
          renderer: 'line',
          series: new Rickshaw.Series.FixedDuration([{ name: 'Failed', color: '#B1003E' }, { name: 'Total', color: '#006f68' }], undefined, {
            timeInterval: timeInterval,
            maxDataPoints: 100,
          })
        });

        graph.render();

        var ticksTreatment = 'glow';

        var xAxis = new Rickshaw.Graph.Axis.Time( {
          graph: graph,
          ticksTreatment: ticksTreatment,
          timeFixture: new Rickshaw.Fixtures.Time.Local()
        } );

        xAxis.render();

        var yAxis = new Rickshaw.Graph.Axis.Y({
          graph: graph,
          ticksTreatment: ticksTreatment,
          tickFormat: Rickshaw.Fixtures.Number.formatKMBT
        });

        yAxis.render();

        var hoverDetail = new Rickshaw.Graph.HoverDetail({
          graph: graph,
          xFormatter: function(x) { return new Date(x * 1000).toString() },
          yFormatter: function(y) { return Math.floor(y) }
        });


        var legend = new Rickshaw.Graph.Legend( {
          graph: graph,
          element: document.getElementById('legend')

        } );

        var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
          graph: graph,
          legend: legend
        } );

        var order = new Rickshaw.Graph.Behavior.Series.Order( {
          graph: graph,
          legend: legend
        } );

        var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
          graph: graph,
          legend: legend
        } );

        // add some data every so often

        var i = 0;
        var iv = setInterval(function() {
          $.getJSON(url, function(data) {
            graph.series.addData(data);
            graph.render();
          });
        }, timeInterval);
      </script>
    </div>
  </body>
</html>
	class DashboardController < ApplicationController
	def index
	end

	def status
	failed = rand(100)
	processed = rand(100) + 500

	render json: {
	Total: failed + processed,
	Failed: failed
	}
	end
	end
	<!DOCTYPE html>
	<html>
	<head>
	<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
	<link type="text/css" rel="stylesheet" href="/assets/detail.css">
	<link type="text/css" rel="stylesheet" href="/assets/graph.css">
	<link type="text/css" rel="stylesheet" href="/assets/legend.css">
	<link type="text/css" rel="stylesheet" href="/assets/lines.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/assets/d3.v3.js" type="text/javascript" charset="utf-8"></script>
	<script src="/assets/rickshaw.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
	<div class="container">
	<div id="chart_container">
	<div id="chart"></div>
	</div>
	<div id="legend"></div>

	<script type="text/javascript" charset="utf-8">
	var timeInterval = 2000;
	var url = "http://localhost:3000/dashboard/status.json";

	// instantiate our graph!
	var graph = new Rickshaw.Graph({
	element: document.getElementById("chart"),
	width: 900,
	height: 500,
	renderer: 'line',
	series: new Rickshaw.Series.FixedDuration([{ name: 'Failed', color: '#B1003E' }, { name: 'Total', color: '#006f68' }], undefined, {
	timeInterval: timeInterval,
	maxDataPoints: 100,
	})
	});

	graph.render();

	var ticksTreatment = 'glow';

	var xAxis = new Rickshaw.Graph.Axis.Time( {
	graph: graph,
	ticksTreatment: ticksTreatment,
	timeFixture: new Rickshaw.Fixtures.Time.Local()
	} );

	xAxis.render();

	var yAxis = new Rickshaw.Graph.Axis.Y({
	graph: graph,
	ticksTreatment: ticksTreatment,
	tickFormat: Rickshaw.Fixtures.Number.formatKMBT
	});

	yAxis.render();

	var hoverDetail = new Rickshaw.Graph.HoverDetail({
	graph: graph,
	xFormatter: function(x) { return new Date(x * 1000).toString() },
	yFormatter: function(y) { return Math.floor(y) }
	});


	var legend = new Rickshaw.Graph.Legend( {
	graph: graph,
	element: document.getElementById('legend')

	} );

	var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
	graph: graph,
	legend: legend
	} );

	var order = new Rickshaw.Graph.Behavior.Series.Order( {
	graph: graph,
	legend: legend
	} );

	var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
	graph: graph,
	legend: legend
	} );

	// add some data every so often

	var i = 0;
	var iv = setInterval(function() {
	$.getJSON(url, function(data) {
	graph.series.addData(data);
	graph.render();
	});
	}, timeInterval);
	</script>
	</div>
	</body>
	</html>