GET v1/files/chart?id={id}&dark={dark}
Get HTML for the chart page depending on passed in parameter
Request Information
URI Parameters
| Name | Description | Type |
|---|---|---|
| id |
Tmp ID - Omit this parameter if current user's chart page is needed |
integer |
| dark |
optional, set to true for dark mode |
boolean |
Body Parameters
No parameters.
Response Information
Response Codes
| Status Code | Description |
|---|---|
| 200 |
OK
HTML content in the response body |
| 404 |
NotFound
No TMP information found. HTML page with this information is passed |
Resource Description
HTML content of the matching chart page
No parameters.
Response Formats
text/html
Sample:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale = 1.0" />
<title>TMP Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<link href="https://apis.2pauls.co.nz/Content/bootstrap.min.css" rel="stylesheet" />
<link href="https://apis.2pauls.co.nz/Content/tmpchart.css" rel="stylesheet" />
</head>
<body>
<div class="rido row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
Extrovert
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
15
</div>
</div>
<div class="rido row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
Creative
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
5
</div>
</div>
<div class="rido row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
Analytical
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
9
</div>
</div>
<div class="rido row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
Structured
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
12
</div>
</div>
<div class="row"> </div>
<hr class="row" />
<div class="row"> </div>
<div id="canvasContainer" style="width: 100%; margin: 0 auto; position: relative;">
<canvas id="tmpChart" aria-label="TMP Chart" role="img"></canvas>
<input type="hidden" id="chartIndex" />
</div>
<div class="row"> </div>
<div id="score0" class="row vertical-align invscores">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<div class="squarebox" style="background-color: #A3F466;">
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
Innovating
</div>
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-3">
7%
</div>
</div>
<div id="score1" class="row vertical-align invscores">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<div class="squarebox" style="background-color: #FFF500;">
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
Promoting
</div>
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-3">
19%
</div>
</div>
<div id="score2" class="row vertical-align invscores">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<div class="squarebox" style="background-color: #FAB250;">
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
Developing
</div>
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-3">
26%
</div>
</div>
<div id="score3" class="row vertical-align invscores">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<div class="squarebox" style="background-color: #F1647D;">
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
Organising
</div>
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-3">
21%
</div>
</div>
<div id="score4" class="row vertical-align invscores">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<div class="squarebox" style="background-color: #9F6186;">
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
Producing
</div>
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-3">
12%
</div>
</div>
<div id="score5" class="row vertical-align invscores">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<div class="squarebox" style="background-color: #0D7FD0;">
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
Inspecting
</div>
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-3">
5%
</div>
</div>
<div id="score6" class="row vertical-align invscores">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<div class="squarebox" style="background-color: #13B8DA;">
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
Maintaining
</div>
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-3">
5%
</div>
</div>
<div id="score7" class="row vertical-align invscores">
<div class="col-xs-2 col-sm-2 col-md-1 col-lg-1">
<div class="squarebox" style="background-color: #67CB42;">
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
Advising
</div>
<div class="col-xs-2 col-sm-2 col-md-3 col-lg-3">
5%
</div>
</div>
<script src="https://apis.2pauls.co.nz/Scripts/tmpchart.js" type="text/javascript"></script>
<script>
window.addEventListener('load', () => {
createTmpChart({
labels: ["Innovating","Promoting","Developing","Organising","Producing","Inspecting","Maintaining","Advising"],
scores: [7,19,26,21,12,5,5,5]
});
});
</script>
</body>
</html>