Skip to main content
Question

Code page with highcharts graph displaying blank

  • August 17, 2017
  • 0 replies
  • 69 views

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>
This topic has been closed for replies.

  • Registered
  • August 17, 2017
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!

  • Registered
  • August 17, 2017
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.

  • Registered
  • August 17, 2017
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.