Stream Data to Create Realtime Charts w/ D3.js and Rickshaw

1.html

<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
<script src="../vendor/d3.v3.js"></script>
<script src="../rickshaw.min.js"></script>
<script src="../src/js/Rickshaw.Fixtures.PubNub.js"></script>

2.js

<div id="chart"></div>

<script>
var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 900,
    height: 500,
    renderer: 'area',
    stroke: true,
    preserve: true,
    series: [
        {
            color: 'steelblue',
            name: 'Cats',
            data: []
        },
        {
            color: 'lightblue',
            name: 'Dogs',
            data: []
        }
    ]
});
graph.render();
</script>

3.js

<script>
new Rickshaw.Fixtures.PubNub({
  channel: 'rickshaw-channel-1',
  graph: graph
});
</script>

4.js

{
  y: [
    Math.random() * 99, 
    Math.random() * 99
  ],
  x: new Date().getTime()
}

5.js

var pubnub = PUBNUB.init({
  publish_key: 'demo',
  subscribe_key: 'demo'
});

setInterval(function(){
  pubnub.publish({
    channel: 'rickshaw-channel-1',
    message: {
      y: [
        Math.random() * 99, 
        Math.random() * 99
      ],
      x: new Date().getTime()
    }
  })
}, 1000);
</script>