-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathexample.html
109 lines (109 loc) · 4.58 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected],npm/@sasjs/adapter@4"></script>
<script>
var sasJs = new SASjs.default({
appLoc: "/Public/app/readme"
,serverType:"SAS9"
,debug: false
});
function initSasJs() {
$('#loading-spinner').show()
// instantiate sasjs with options such as backend app location
// login (it's also possible to set an autologin when making requests)
sasJs.logIn(
$('#username')[0].value
,$('#password')[0].value
).then((response) => {
if (response.isLoggedIn === true) {
$('#loading-spinner').hide()
$('.login').hide()
$('#getdata').show()
$('#cars').show()
}
})
}
function getData(){
$('#loading-spinner').show()
$('#myChart').remove();
$('#chart-container').append('<canvas id="myChart" style="display: none;"></canvas>')
// make a request to a SAS service
var type = $("#cars")[0].options[$("#cars")[0].selectedIndex].value;
// request data from an endpoint under your appLoc (missing opening slash implies relative path)
sasJs.request("common/getdata", {
// send data as an array of objects - each object is one row
fromjs: [{ type: type }]
}).then((response) => {
$('#myChart').show();
var labels = []
var data = []
response.areas.map((d) => {
labels.push(d.MAKE);
data.push(d.AVPRICE);
})
$('#loading-spinner').hide()
initGraph(labels, data, type);
})
}
function initGraph(labels, data, type){
var myCanvas = document.getElementById("myChart");
var ctx = myCanvas.getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: "Average Invoice Price in USD for " + type + " Cars by Manufacturer",
data: data,
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 1,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
}]
},
options: {
maintainAspectRatio: false,
scales: {yAxes: [{ticks: {beginAtZero: true}}]}
}
});
}
</script>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid" style="text-align: center; margin-top: 10px;">
<div class="row">
<div class="col-lg-5 col-md-7 col-sm-10 mx-auto mx-auto">
<h1>Demo Seed App for <span class="code">SASjs</span></h1>
<div class="login" id="login-form">
<div class="form-group">
<input class="form-control" type="text" id="username" placeholder="Enter username" />
</div>
<div class="form-group">
<input class="form-control" type="password" id="password" placeholder="Enter password" />
</div>
<button id="login" onclick="initSasJs()" class="login btn btn-primary" style="margin-bottom: 5px;">Log In</button>
</div>
<select name="cars" id="cars" style="margin-bottom: 5px; display: none;" class="form-control">
<option value="Hybrid">Hybrid</option>
<option value="SUV">SUV</option>
<option value="Sedan">Sedan</option>
<option value="Sports">Sports</option>
<option value="Truck">Truck</option>
<option value="Wagon">Wagon</option>
</select>
<button id="getdata" onclick="getData()" style="margin-bottom: 5px; display: none;" class="btn btn-success">Get Data</button><br><br>
<div id="loading-spinner" class="spinner-border text-primary" role="status" style="display: none;">
<span class="sr-only">Loading...</span>
</div><br>
</div>
</div>
</div>
<div id="chart-container" style="height: 65vh; width: 100%; position: relative; margin: auto;">
<canvas id="myChart" style="display: none;"></canvas>
</div>
</body>
</head>