Commit 3bd281d8 authored by Kjetil Thuen's avatar Kjetil Thuen
Browse files

Pass in request details when initializing the chart.

Specify charset for javascript file.
parent 1ad505ca
......@@ -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.
......@@ -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
......
......@@ -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
......@@ -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
......
......@@ -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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment