Permalink
Browse files

update stock sample to exercise options overrides

Displays two charts, one with default options, other with few overrides.
  • Loading branch information...
smoothdeveloper committed May 24, 2012
1 parent dc9b069 commit 555ac12dfad3cdcb17ef833a3f350cbf1c3d6538
Showing with 82 additions and 70 deletions.
  1. +25 −19 examples/stock/index.haml
  2. +57 −51 examples/stock/index.html
View
@@ -13,6 +13,7 @@
%body
#container
#chart
+ #smallerchart
%script{:src => "../../js/d3.js", :type => "text/javascript"}
%script{:src => "../../js/d3.csv.js", :type => "text/javascript"}
%script{:src => "../../js/d3.time.js", :type => "text/javascript"}
@@ -22,24 +23,29 @@
:javascript
- // make chart object
- var chart = new d3_tsline("#chart");
+ function setupChart(id, options){
+ // make chart object
+ var chart = new d3_tsline("#"+ id, options);
- // override parse_date function to handle our data's date format
- chart.parse_date = d3.time.format("%Y-%m-%d").parse;
- chart.parse_val = function(v) {
- return parseInt(v)
+ // override parse_date function to handle our data's date format
+ chart.parse_date = d3.time.format("%Y-%m-%d").parse;
+ chart.parse_val = function(v) {
+ return parseInt(v)
+ }
+ // add some metadata about the series
+ chart.series = {
+ "aapl" : {
+ "name" : "AAPL",
+ "active" : true
+ }
+ };
+ chart.ref_series="aapl";
+ chart.view_span = 120;
+ // fetch data and draw the chart
+ var data = get_aapl();
+ chart.setSeriesData("aapl",data);
+ chart.render();
}
- // add some metadata about the series
- chart.series = {
- "aapl" : {
- "name" : "AAPL",
- "active" : true
- }
- };
- chart.ref_series="aapl";
- chart.view_span = 120;
- // fetch data and draw the chart
- var data = get_aapl();
- chart.setSeriesData("aapl",data);
- chart.render();
+
+ setupChart('chart');
+ setupChart('smallerchart', { width: 500, height: 150, tension: 0.5, interpolation: 'monotone', showSummary: false});
View
@@ -1,51 +1,57 @@
-<html>
- <head>
- <title>Stock Example - d3-tsline</title>
- <link href='../../css/d3.tsline.css' media='screen' rel='stylesheet' type='text/css'>
- </head>
- <style>
- /*<![CDATA[*/
- #container {
- font: 10px sans-serif;
- margin: 0px auto 22px;
- clear: both;
- width: 960px;
- }
- /*]]>*/
- </style>
- <body>
- <div id='container'>
- <div id='chart'></div>
- </div>
- <script src='../../js/d3.js' type='text/javascript'></script>
- <script src='../../js/d3.csv.js' type='text/javascript'></script>
- <script src='../../js/d3.time.js' type='text/javascript'></script>
- <script src='../../js/d3.tsline.js' type='text/javascript'></script>
- <script src='aapl.js' type='text/javascript'></script>
- <script>
- //<![CDATA[
- // make chart object
- var chart = new d3_tsline("#chart");
-
- // override parse_date function to handle our data's date format
- chart.parse_date = d3.time.format("%Y-%m-%d").parse;
- chart.parse_val = function(v) {
- return parseInt(v)
- }
- // add some metadata about the series
- chart.series = {
- "aapl" : {
- "name" : "AAPL",
- "active" : true
- }
- };
- chart.ref_series="aapl";
- chart.view_span = 120;
- // fetch data and draw the chart
- var data = get_aapl();
- chart.setSeriesData("aapl",data);
- chart.render();
- //]]>
- </script>
- </body>
-</html>
+<html>
+ <head>
+ <title>Stock Example - d3-tsline</title>
+ <link href='../../css/d3.tsline.css' media='screen' rel='stylesheet' type='text/css'>
+ </head>
+ <style>
+ /*<![CDATA[*/
+ #container {
+ font: 10px sans-serif;
+ margin: 0px auto 22px;
+ clear: both;
+ width: 960px;
+ }
+ /*]]>*/
+ </style>
+ <body>
+ <div id='container'>
+ <div id='chart'></div>
+ <div id='smallerchart'></div>
+ </div>
+ <script src='../../js/d3.js' type='text/javascript'></script>
+ <script src='../../js/d3.csv.js' type='text/javascript'></script>
+ <script src='../../js/d3.time.js' type='text/javascript'></script>
+ <script src='../../js/d3.tsline.js' type='text/javascript'></script>
+ <script src='aapl.js' type='text/javascript'></script>
+ <script>
+ //<![CDATA[
+ function setupChart(id, options){
+ // make chart object
+ var chart = new d3_tsline("#"+ id, options);
+
+ // override parse_date function to handle our data's date format
+ chart.parse_date = d3.time.format("%Y-%m-%d").parse;
+ chart.parse_val = function(v) {
+ return parseInt(v)
+ }
+ // add some metadata about the series
+ chart.series = {
+ "aapl" : {
+ "name" : "AAPL",
+ "active" : true
+ }
+ };
+ chart.ref_series="aapl";
+ chart.view_span = 120;
+ // fetch data and draw the chart
+ var data = get_aapl();
+ chart.setSeriesData("aapl",data);
+ chart.render();
+ }
+
+ setupChart('chart');
+ setupChart('smallerchart', { width: 500, height: 150, tension: 0.5, interpolation: 'monotone', showSummary: false});
+ //]]>
+ </script>
+ </body>
+</html>

0 comments on commit 555ac12

Please sign in to comment.