Discussions

Expand all | Collapse all

Code page with highcharts graph displaying blank

  • 1.  Code page with highcharts graph displaying blank

    Posted 08-17-2017 14:07
    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>


  • 2.  RE: Code page with highcharts graph displaying blank

    Posted 08-17-2017 14:45
    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.


  • 3.  RE: Code page with highcharts graph displaying blank

    Posted 08-17-2017 15:05
    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!


  • 4.  RE: Code page with highcharts graph displaying blank

    Posted 08-17-2017 15:12
    notepad++ works adequately for QuickBase. It will help you find unbalanced parentheses and brackets as indicated below in your code:



  • 5.  RE: Code page with highcharts graph displaying blank

    Posted 08-17-2017 17:14
    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.


  • 6.  RE: Code page with highcharts graph displaying blank

    Posted 08-17-2017 17:49
    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.