Forum Discussion

kpmcdonakpmcdon's avatar
kpmcdonakpmcdon
Qrew Trainee
7 years ago

Code page with highcharts graph displaying blank

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>

5 Replies

  • 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.
  • 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!
  • notepad++ works adequately for QuickBase. It will help you find unbalanced parentheses and brackets as indicated below in your code:

  • 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.
  • 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.