// requires:
// https://datamatic-public.github.io/api/1/api-1.0.7.js
// and
// https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js
var datamatic = new Datamatic("117670017722819924657");
var chart = datamatic.chart("0B3wq5VFn9PllNWdyY3ZFRVZ3RFU", {
width: 600,
height: 400
});
function updateData() {
Datamatic.ajax.json("http://house.briskat.com/api/p/lruk/r/area", {
yr: parseInt(options.year),
pt: options.type,
dim: "pcdistrict",
pc: 1,
new: options.age,
hold: options.tenure
}).then(function (data) {
var metric = options.metric;
chart.setData(data.map(function (item) {
return {
name: item[0],
value: item[metric]
};
}));
});
}
chart.render(document.body).then(updateData);
function addController() {
var controller = gui.add.apply(gui, arguments);
var delayedTask = Datamatic.utils.delayTask(updateData)
controller.onChange(function () {
delayedTask.delay(50)
});
}
// create control panel
var gui = new dat.GUI();
// options model
var options = {
metric: 2,
year: 2015,
type: "",
age: "",
tenure: ""
};
addController(options, 'metric', {
"Num of properties": 1,
"Average Price": 2,
"Year over year": 3
});
// add year range
addController(options, 'year', 1995, 2015);
// types
addController(options, 'type', {
"All": "",
"Flat/Mais": 1,
"Detached": 2,
"Semi-Det": 3,
"Terraced": 4
});
// age
addController(options, 'age', {
"All": "",
"New": 1,
"Old": 2
});
// tenure
addController(options, 'tenure', {
"All": "",
"Free": 1,
});
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.