Pass in request details when initializing the chart.

Specify charset for javascript file.

Pass in request details when initializing the chart.
Specify charset for javascript file.
3bd281d8 · Kjetil Thuen · 1ad505ca · 3bd281d8 · 3bd281d8 · 3bd281d8
Commit 3bd281d8 authored Mar 06, 2014 by Kjetil Thuen
5 changed files
--- a/README.md
+++ b/README.md
@@ -18,3 +18,11 @@ To run this code you will need npm and grunt installed. Once those are in place,

 Then point your (modern) webbrowser to http://localhost:9001

+
+Deploying
+---------
+To deploy the demo, simply copy the buildt www folder to a web server. To use
+the chart in you own page, copy www/js/ and www/css/ to your website, include
+them in your page and have a look at look at to see how to insert the cahrt in
+your page.
+
--- a/src/app/main.coffee
+++ b/src/app/main.coffee
@@ -5,7 +5,7 @@ timeBarAnim = undefined
 currentFrame = 0
 window.nesstartimebars = {}

-window.nesstartimebars.main = (containerId) ->
+window.nesstartimebars.main = (containerId, dataDesc) ->
  nesstarloader.reloadNesstarData( (data) ->
    timebars.setupChart containerId, data
    currentFrame = timebars.nextFrame containerId, currentFrame

--- a/src/app/nesstarloader.coffee
+++ b/src/app/nesstarloader.coffee
@@ -38,8 +38,8 @@ fetchData = (url, callback) ->
  request.open 'GET', url, true
  request.send()

-assembleDataRequest = () ->
-  datadesc = requestDescription()
+assembleDataRequest = (dataDesc) ->
+  datadesc = dataDesc or requestDescription()
  datadesc.host + ":" +
  datadesc.port + "/" +
  datadesc.service + "/cube/" +
@@ -88,8 +88,8 @@ prepareFuncFactory = (callback) ->

  prepareDataForTimeBar

-reloadData = (consumerFunc) ->
+reloadData = (consumerFunc, dataDesc) ->
  prep = prepareFuncFactory consumerFunc
-  fetchData assembleDataRequest(), prep
+  fetchData assembleDataRequest(dataDesc), prep

 exports.reloadNesstarData = reloadData
--- a/src/app/timebars.coffee
+++ b/src/app/timebars.coffee
@@ -35,9 +35,11 @@ y = (chartId, val) ->
    .domain(d3.extent valuesFromFrame(chartId, 0), (d) -> d.age)
    .range [ 0, chartHeight(chartId) ]

-x_axis = d3.svg.axis()
-  .orient "bottom"
-  .ticks 5
+x_axis = (chartId) ->
+  d3.svg.axis()
+    .scale x(chartId)
+    .orient "bottom"
+    .ticks 5

 y_axis = d3.svg.axis()
  .orient "left"
@@ -69,6 +71,8 @@ valuesFromFrame = (chartId, frameNum) ->
 updateChart = (chartId, frameNum) ->
  data = valuesFromFrame chartId, frameNum
  chart = d3.select chartId + " svg.chart"
+  xAxesGroup = chart.select "xAxesGroup"
+
  valuepoints = chart.selectAll "g.valuepoint"
    .data data, (d) -> d.birthyear

@@ -76,6 +80,8 @@ updateChart = (chartId, frameNum) ->
    .attr "transform", (d, i) ->
      "translate(0, " + (y(chartId)(i) + 1) + ")"

+  xAxesGroup.call x_axis(chartId)
+
  addBar valuepoints.enter(), chartId

  valuepoints.exit()
@@ -110,17 +116,20 @@ setupChart = (chartId, data) ->
    d3.select id
      .html ""

-    d3.select id
+    svg = d3.select id
      .insert "svg"
        .attr "class", "chart"
        .attr "shape-rendering", "geometricPrecision"
        .attr "width", chartWidth(id)
        .attr "height", chartHeight(id)
-      .call x_axis
-      .call y_axis

    nextFrame id, 0

+    axisGroup = svg.append "g"
+      .attr "class", "xAxesGroup"
+      .attr "transform",
+            "translate("+ chartWidth(id) / 2 + "," + margin(id) + ")"
+
  window.onresize = setupChart

 exports.setupChart = setupChart

--- a/www/index.html
+++ b/www/index.html
@@ -6,17 +6,52 @@
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
    <link href="css/timebars.css" rel="stylesheet">
-    <script src="js/timebars.js"></script>
+    <script src="js/timebars.js" charset="utf8"></script>
  </head>
  <body>
-    <section id="main"> 
+    <section id="main">
      <div id="content"></div>
      <button id="playBtn" class="btn btn-primary" onclick="window.nesstartimebars.toggleAnimation('#content')">
        <i class="fa fa-play"></i>
      </button>
-   </section> 
+   </section>
    <script>
-      window.nesstartimebars.main("#content");
+      //Values for hfk Nesstar REST api proxied through Grunt
+      dataDesc = {
+        host: "http://localhost",
+        port: 9001,
+        service: "touch/hfk/restdata",
+        cube: "Fypr-2014-Bef_C1",
+        filter: {
+          measures: [ "Befolkning" ],
+          dimensions: [
+            {
+              "id": "tid"
+            },
+            {
+              "id": "alder",
+              "members": []
+            },
+            {
+              "id": "Kjnn",
+              "members": ["1","2"]
+            },
+            {
+              "id": "Framskrivingsalternativ",
+              "members": ["1"]
+            },
+            {
+              "id": "Region",
+              "members": ["12"]
+            }
+          ]
+        }
+      };
+
+      /* #content is the id of the container that should contain the chart. The
+         dataDesc object is a copy of the hardcoded defaults. Omitting the
+         dataDesc parameter is equivalent to passing the object above. */
+      window.nesstartimebars.main("#content", dataDesc);
    </script>
  </body>
 </html>