D3 Examples - Bearcart Area Plot

xxxxxxxxxx
 
<!doctype>
<head>
  <link rel="stylesheet" href="rickshaw.min.css">
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="rickshaw.min.js"></script>
​
<style>
body {
  font: 10px sans-serif;
}
#chart {
    float: left;
    margin-top: 70px;
          }
#y_axis {
   float: left;
   margin-top: 70px;
          }
#legend {
        float: left;
        margin-left: 15px;
        margin-top: 70px;
}
</style>
</head>
<body>
​
        <div id="y_axis"></div>
        <div id="chart"></div>
        <div id="legend"></div>
​
​
<script>
​
var palette = new Rickshaw.Color.Palette( {scheme: 'spectrum14'} );
​
d3.json('stock_data.json', function(error, json) {
​
var graph = new Rickshaw.Graph( {
                element: document.querySelector("#chart"),
                width: 750,
                height: 400,
                renderer: 'area',
                series: [
                         {name: 'AAPL', 
                          color: palette.color(),
                          data: json[0].data},
                          
                         {name: 'GOOG', 
                          color: palette.color(),
                          data: json[1].data},
                          
                         {name: 'INTC', 
                          color: palette.color(),
                          data: json[2].data},
                          
                         {name: 'MSFT', 
                          color: palette.color(),
                          data: json[3].data},
                          
                         {name: 'XOM', 
                          color: palette.color(),
                          data: json[4].data},
                          
                         {name: 'YHOO', 
                          color: palette.color(),
                          data: json[5].data}
                          ]
                })
​
var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );
​
var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis')
} );
​
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph
} );
​
var legend = new Rickshaw.Graph.Legend( {
    graph: graph,
    element: document.getElementById('legend')
​
} );
​
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
    graph: graph,
    legend: legend
});
​
graph.render();
​
});
​
​
</script>
​
</body>
    