Permalink
Fetching contributors…
Cannot retrieve contributors at this time
414 lines (366 sloc) 13.2 KB
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://use.fontawesome.com/1ea8d4d975.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src='../dist/bouquet.js'></script>
<style>
body {
margin: 5px;
}
#script-body {
border: 1px solid #aaa;
padding: 3px;
}
#timeframe {
font-weight: bold;
color: orange;
}
.header2 {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
#code {
height: 600px;
overflow: auto;
background: #fff;
border: none;
}
#sql, #viz, #json {
height: 200px;
max-height: 200px;
overflow: auto;
background: #eee;
border: none;
font-size: smaller;
}
.running-on {
color: #ddd;
}
.running-off {
color: #000;
}
.popover {
max-width: 600px;
}
pre .com { color: #ffa0a0 }
pre .str {
color: #337ab7;
}
</style>
</html>
</head>
<body>
<div id="popover-content" class="hide">
<h3>
Intro
</h3>
<p>This short script aims at showing the basics of Bouquet API using our tiny Javascript client.</p>
<h3>
What's in here?
</h3>
<p>
When run, this script
<ol>
<li><b>Authenticates</b> to our Bouquet demo server using a scoped "guest" APIKey</li>
<li><b>Queries</b> the sample "Tickit" data-set showing 3 different output types of the same analysis
<ul>
<li>SQL view that gives the SQL query generated by our in-database engine</li>
<li>JSON view that gives the raw results of the query as a JSON object</li>
<li>Chart view that displays results of the query as a Chart</li>
</ul>
</li>
</ol>
</p>
<h3>
Going further
</h3>
<p>
For the sake of simplicity, only Bouquet relevant code is shown here. To view the full version, check it <a href="https://github.com/openbouquet/bouquet-js/tree/master/examples/example-highcharts2.html" target="_blank">here</a>.
</p>
<p>
To learn more about Bouquet check the <a href="https://docs.openbouquet.io/docs/welcome">API documentation</a> and <a href="https://openbouquet.io/bouquet-download/">give Bouquet a try</a>!
</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6" class="prettyprint">
<div id="script-header">
<span class="header2">Script</span>
</div>
<div id="script-body">
<form class="form-inline">
<div class="form-group">
<select class="form-control" id="time-selector">
<option value='["2008-01-01","2008-12-31"]' selected="selected">Year
2008</option>
<option value='["__CURRENT_MONTH"]'>Current month</option>
</select>
</div>
<a id="run" class="btn btn-success"><i class="fa fa-play"></i>
run</a>
<a class="btn btn-success hidden" data-placement="bottom" data-toggle="popover" data-container="body" type="button" data-html="true" href="#" id="info">
<span class="fa fa-info-circle"></span> info
</a>
</form>
<pre class="prettyprint" id="code">
var query = {
path : "/analytics/@'5899bc6715abcc6bed69d766'.@bookmark:'58a5dc6b45d778b2bdb231c9'/query",
data : {
timeframe: <span id="timeframe">["2008-01-01","2008-12-31"]</span>,
domain:"'Sales'",
groupBy:[
"to_date(__PERIOD) as 'period'",
"'Event > Category > Catname' as 'series'"
],
metrics:[
"'Total quantity sold'"
],
orderBy:[
"asc(to_date(__PERIOD))"
],
limit: 1000
}
}
var bouquetAPI = new Bouquet({
url : '//demo.openbouquet.io/release/v4.2',
clientId : 'api-key-client',
apiKey : 'eyJhbGciOiJSUzI1...ytR68CGURskRM2D0VPQ'
});
// API Request 1 - SQL
bouquetAPI.request(query, {data : 'SQL'}).then(function(response) {
displaySQL(response);
});
// API Request 2 - JSON
bouquetAPI.request(query).then(function(response) {
displayJSON(response);
});
// API Request 3 - Chart
bouquetAPI.request(query, {envelope : 'data',data : 'RECORDS'}).then(function(response) {
displayDataViz(response);
});
</pre>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div id="sql-header">
<span class="header2">API Request 1</span> SQL <i
class="fa fa-refresh fa-spin fa-fw hidden"></i> <span
class="status"></span>
</div>
<pre class="prettyprint" id="sql">
</pre>
</div>
<div class="row">
<div id="json-header">
<span class="header2">API Request 2</span> JSON <i
class="fa fa-refresh fa-spin fa-fw hidden"></i> <span
class="status"></span>
</div>
<pre class="prettyprint" id="json">
</pre>
</div>
<div class="row">
<div id="viz-header">
<span class="header2">API Request 3</span> Chart <i
class="fa fa-refresh fa-spin fa-fw hidden"></i> <span
class="status"></span>
</div>
<div id="viz"></div>
</div>
</div>
</div>
</div>
<script>
/*
demo using Bouquet analytics API with HighCharts to display data distribution by event category.
*/
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
var setStatus = function(id, computing, message) {
if (computing === true) {
$("#"+id+"-header"+" .status").html(message);
$("#"+id+"-header"+" i").removeClass("hidden");
$("#"+id).addClass("running-on");
$("#"+id).removeClass("running-off");
} else {
$("#"+id+"-header"+" .status").html(message);
$("#"+id+"-header"+" i").addClass("hidden");
$("#"+id).removeClass("running-on");
$("#"+id).addClass("running-off");
$("#info").removeClass("hidden");
}
};
$( "#time-selector" ).change(function() {
$( "#time-selector option:selected" ).each(function() {
$("#timeframe").html(this.value);
query.data.timeframe = JSON.parse(this.value);
});
});
$("#run").click(function() {
// running query
setStatus("sql", true, "Computing");
setStatus("json", true, "Computing");
setStatus("viz", true, "Computing");
bouquet.request(query)
.then(function(res) {
setStatus("json", false, "");
$('#json').html(JSON.stringify(res.result, undefined, 4));
})
.catch(function(err) {
console.error(err);
});
var vizQuery = jQuery.extend(true, {}, query);
vizQuery.path += "?envelope=data&data=RECORDS";
bouquet.request(vizQuery)
.then(function(res) {
setStatus("viz", false, "");
displayChart(transformData(res));
})
.catch(function(err) {
console.error(err);
});
var sqlQuery = jQuery.extend(true, {}, query);
sqlQuery.path += "?data=SQL";
bouquet.request(sqlQuery)
.then(function(res) {
setStatus("sql", false, "");
$('#sql').html(res.result);
})
.catch(function(err) {
console.error(err);
});
});
var query = {
path : "/analytics/@'5899bc6715abcc6bed69d766'"
+ ".@bookmark:'58a5dc6b45d778b2bdb231c9'/query",
data :{
"period":"'Saletime'",
"timeframe":[
"2008-01-01",
"2008-03-31"
],
"filters":[
],
"domain":"'Sales'",
"groupBy":[
"to_date(__PERIOD) as 'period'",
"'Event > Category > Catname' as 'series'"
],
"metrics":[
"'Total quantity sold'"
],
"orderBy":[
"asc(to_date(__PERIOD))"
],
"limit":1000,
"beyondLimit":[
"0"
],
"style":"HUMAN",
"queryID":"51740060f490741d388a42deea8105887aa7a1ca3bad90a4a1b9745f13d27c73"
}
}
var bouquet = new Bouquet({
url : '//demo.openbouquet.io/release/v4.2',
clientId : 'api-key-client',
apiKey : 'eyJhbGciOiJSUzI1NiJ9.eyJpc3MiOiJhcGkta2V5LWNsaWVudCIsInN1YiI6IjU4YWM1Y2FiMTVhYmNjMTJiYjUwYTU0MCIsInVzZXJFbWFpbCI6ImRlbW9AbG9jYWxob3N0LmNvbSIsImN1c3RvbWVySWQiOiI1OGFjNTNjMDE1YWJjYzEyYmI1MGE0NWIiLCJqdGkiOiJnTmF3dHdiZzRaYXRtQ1JXVVRQYnFnIiwiZXhwIjo0NjQxNTM0NTE5LCJpYXQiOjE0ODc5MzQ1MTksIm5iZiI6MTQ4NzkzNDM5OX0.g5f1DHxESj9PvC5meP8UKXmcZzbGZIiW-qwZ7mNAZWTlMlaAdIn1EBOZzB9oAwHzQxS0qez0iRDac874YCmnHrwYI8kgVoJQvbbJedKIJjfP_V_ZPvMiAfsX0wqeCmqG4_uXZoAh_sumvyDkKGfzutAfpR3DCVkWTqfYZ-iornkyYwH89Yqe_yBNQPO4pXpf3Dg68BlruZqc-tiow3ytynyxuEYEOPYIuyRL-fLpjNstRGa_gXIQYBx9v1yVGlZsQFVviJ5PMbCgIduM36g5leA_IXprw46KxjH_snbnEvAHypZCwhNaJJxlLGBEWTMnFKqytR68CGURskRM2D0VPQ'
});
// HighCharts display function
function displayChart(data) {
if (!Highcharts.theme) {
Highcharts.setOptions({
colors : [ '#00505b', '#00aa9e', '#c74150', '#ff7c46',
'#ffcb4d' ]
});
}
Highcharts.chart('viz', {
chart : {
type : 'area',
height : 180,
backgroundColor: '#eee'
},
title : {
text : 'TIckets sold by event category'
},
subtitle : {
text : 'Tickit database'
},
xAxis : {
type : 'datetime',
units : [ [ 'month' ] ]
},
yAxis : {
title : {
text : 'Total quantity sold'
}
},
tooltip : {
split : true
},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'middle',
name : 'event category'
},
plotOptions : {
area : {
stacking : 'normal',
lineColor : '#444444',
lineWidth : 1,
marker : {
enabled : false,
symbol : 'circle',
radius : 2,
states : {
hover : {
enabled : true
}
}
}
}
},
series : data
});
}
// convert table data to HighCharts series
function transformData(data) {
var lookup = [];
data.forEach(function(record) {
if (lookup[record.series] === undefined) {
lookup[record.series] = {
name : record.series,
data : [],
total : 0
};
}
var date = Date.parse(record.period);
lookup[record.series].data.push({
x : date,
y : record["Total quantity sold"]
});
lookup[record.series].total += record["Total quantity sold"];
});
var series = [];
for ( var key in lookup) {
series.push(lookup[key]);
}
;
series.sort(function(a, b) {
return a.total - b.total
});
return series;
}
</script>
</body>