Hi there,
I am fiddling with the custom HTML block because I need to build some basic histogram charts.
I am following the tutorial here (https://docs.losant.com/dashboards/custom-html/#time-series-queries) but something is not working (getting a lot of red on the console).
Chart block on the left looks good:
But right block is empty and errors on console.
Code as below:
Head:
<meta charset="UTF-8">
<!--
You can include any external JavaScript or CSS as needed.
This example demonstrates including Bootstrap and JQuery
into your custom HTML page.
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var googleLoaded = false
var drawChart = function() {
if (!googleLoaded) {
return
}
var data = [['Label', 'Value']]
if (DashboardBlock.input.queries.max-last-h.value) {
data.push(['FLOW', DashboardBlock.input.queries.max-last-h.value])
}
data = google.visualization.arrayToDataTable(data)
var options = {
width: DashboardBlock.input.size.width - 5,
height: DashboardBlock.input.size.height - 5,
redFrom: 40,
redTo: 50,
yellowFrom: 25,
yellowTo: 40,
minorTicks: 5,
majorTicks: ['0', '10', '20', '30', '40', '50'],
max: 50,
}
let chart = new google.visualization.Gauge(
document.getElementById('chart_div')
)
chart.draw(data, options)
}
DashboardBlock.on('change', drawChart)
google.charts.load('current', { packages: ['gauge'] })
google.charts.setOnLoadCallback(function() {
googleLoaded = true
drawChart()
})
</script>
<style>
body {
padding: 10px;
background: transparent;
}
</style>
<script type="text/javascript">
/*
Renders the block input to the page.
This function is simply printing the raw data to the page
for debugging purposes.
*/
function renderBlock(input) {
document.getElementById('blockInput').innerHTML =
JSON.stringify(input, undefined, 2);
}
/*
Add listeners to your required events. These listeners invoke
the functions above so that your code can handle the event
as needed.
*/
DashboardBlock.on('change', renderBlock);
/*
Render the initial state when the block loads.
*/
$(document).ready(function() {
renderBlock(DashboardBlock.input);
});
</script>
Body
<div id="chart_div"></div>
