# Custom HTML tutorial errors

**URL:** <https://forums.losant.com/t/custom-html-tutorial-errors/4579>\
**Category:** Help\
**Tags:** custom-chart-block\
**Created:** [June 7, 2022, 1:43pm UTC](https://forums.losant.com/t/custom-html-tutorial-errors/4579 "2022-06-07T13:43:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paolo\_Proxy](https://avatars.discourse-cdn.com/v4/letter/p/b5ac83/32.png) [@Paolo\_Proxy](https://forums.losant.com/u/Paolo_Proxy)\
**Post date:** [June 7, 2022, 1:43pm UTC](https://forums.losant.com/t/custom-html-tutorial-errors/4579/1 "2022-06-07T13:43:28Z")

</div>

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](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:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/0/01871e8b62c91db182ed56c3d3f2ca7c4a20f2fd.png)

But right block is empty and errors on console.

Code as below:

Head:

```auto

<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>`

---

<div class="post-metadata">

**Author:** ![Dylan\_Schuster](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/dylan_schuster/32/2850_2.png) [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\
**Post date:** [June 7, 2022, 2:02pm UTC](https://forums.losant.com/t/custom-html-tutorial-errors/4579/2 "2022-06-07T14:02:33Z")

</div>

> [@Paolo\_Proxy](#):
>
> ```auto
> if (DashboardBlock.input.queries.max-last-h.value) {
> data.push(['FLOW', DashboardBlock.input.queries.max-last-h.value])
> }
> 
> ```

This is not valid JavaScript; [dot notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#dot_notation) does not work when the property names have characters such as hyphens in them. You need to use [bracket notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#bracket_notation) on these:

```auto
DashboardBlock.input.queries['max-last-h'].value

```

---

<div class="post-metadata">

**Author:** ![Paolo\_Proxy](https://avatars.discourse-cdn.com/v4/letter/p/b5ac83/32.png) [@Paolo\_Proxy](https://forums.losant.com/u/Paolo_Proxy)\
**Post date:** [June 7, 2022, 2:36pm UTC](https://forums.losant.com/t/custom-html-tutorial-errors/4579/3 "2022-06-07T14:36:50Z")

</div>

Good point I forgot that, corrected:

```auto
<script
  type="text/javascript"
  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.x.value) {
      data.push(['PSI', DashboardBlock.input.queries.x.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>

```

Changed the query block to x:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/a/ae048e3fee22ecfadc00da4d2eb896dd82d4f21f.png)

But still blank block.

---

<div class="post-metadata">

**Author:** ![Paolo\_Proxy](https://avatars.discourse-cdn.com/v4/letter/p/b5ac83/32.png) [@Paolo\_Proxy](https://forums.losant.com/u/Paolo_Proxy)\
**Post date:** [June 10, 2022, 11:16am UTC](https://forums.losant.com/t/custom-html-tutorial-errors/4579/4 "2022-06-10T11:16:26Z")

</div>

Any working example I can try to make this work?

---

<div class="post-metadata">

**Author:** ![Dylan\_Schuster](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.losant.com/dylan_schuster/32/2850_2.png) [@Dylan\_Schuster](https://forums.losant.com/u/Dylan_Schuster)\
**Post date:** [June 10, 2022, 11:52am UTC](https://forums.losant.com/t/custom-html-tutorial-errors/4579/5 "2022-06-10T11:52:17Z")

</div>

![Screen Shot 2022-06-10 at 7.44.45 AM](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/8/89f248041d54a765c658d47f95a94e9c6832cf82.png)

When developing a Custom HTML Block, it’s important to keep an eye on your browser console. It provides helpful information about any errors in your syntax or uncaught exceptions in your code.

In this case, you’re missing a closing `]`. However, fixing that that brings in another error.

As for a working example, yes, we do have [one for Google Charts in our documentation](https://docs.losant.com/dashboards/custom-html/#using-google-charts) and based on how closely your code resembles what’s in the example, it appears you started from there. I took that example, pasted it into your block, and changed the two references of `psi` to your query name of `x` and the chart appeared. So I recommend you start from there and make whatever changes you were trying to apply to the example after that.

 ![Screen Shot 2022-06-10 at 7.50.58 AM](https://us1.discourse-cdn.com/flex015/uploads/getstructure/original/2X/0/03e2e37e85c3cd182f391683acbef118ba48cbd9.png)

---

<div class="post-metadata">

**Author:** ![Paolo\_Proxy](https://avatars.discourse-cdn.com/v4/letter/p/b5ac83/32.png) [@Paolo\_Proxy](https://forums.losant.com/u/Paolo_Proxy)\
**Post date:** [June 11, 2022, 10:34am UTC](https://forums.losant.com/t/custom-html-tutorial-errors/4579/6 "2022-06-11T10:34:49Z")

</div>

Yes would be helpful to have a debug window just to isolate the error from that code?