Code page with highcharts graph displaying blank

  • 0
  • 1
  • Question
  • Updated 1 year ago
  • Answered
  • (Edited)
I am dipping my toe into using Highcharts graphs and have hit a wall. I should first say that I am a novice, so don't assume much of anything regarding my skill level!

I created a code page (test.html) with a basic sample bar chart that doesn't pull from QuickBase - the data is in the code. I got something similar working using charts.js but when I tried Highcharts it just displays a blank page. I would be grateful if someone could A) explain what I am doing wrong and/or B) point me to a tutorial on using highcharts in QuickBase.

Thanks!

The code is: 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width:100%; height:400px;"></div>

<script type='text/javascript'>
Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
})
</script>
Photo of kpmcdona

kpmcdona

  • 112 Points 100 badge 2x thumb

Posted 1 year ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 28,144 Points 20k badge 2x thumb
You have several problems some of which may have been introduced by pasting code into the forum.

Here is the cleaned up code in a jsfiddle which does produce a chart:

https://jsfiddle.net/nb4kbv7w/

Note using jsfiddle was just a quick way for me to check and repair your code. Placing the code into jsfiddle does require you to reorganize it - you will  have to rebuild it into a code page properly,

FWIW, you can better format code in the forum by using the pre toolbar item.
(Edited)
Photo of kpmcdona

kpmcdona

  • 112 Points 100 badge 2x thumb
Yep, that works. Maybe my spellchecker converted ', into ; in a couple of places? I don't see any other issues when I eyeball compare the two versions.

I need to start using a code editor instead of doing this in the browser. :)


Thanks!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 28,144 Points 20k badge 2x thumb
notepad++ works adequately for QuickBase. It will help you find unbalanced parentheses and brackets as indicated below in your code:

Photo of kpmcdona

kpmcdona

  • 112 Points 100 badge 2x thumb
Ah! Embarrassing. I need to get my eyes checked. :) 

Yea, Notepad++ is my go-to editor. It was such a small script that I thought I could get away with just using the page editor.

Thanks again for your help! You are an invaluable asset to this community.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 28,144 Points 20k badge 2x thumb
Another tip that will save you a lot of headache debugging your code is to consistently use 2 spaces to indent your JavaScript and to run your code through a linter such as http://jsbeautifier.org/ with indention set to two spaces.

Also set notepad++ to replace tabs with two spaces:

Settings > Preferences > Language > Tab Settings > Tab size = 2

If people can't rapidly read your code it creates an additional reason to not reply to a question if they are short time.