CODEWITHSUNDEEP
javascriptjqueryhighcharts
Anna Jeanine
Anna Jeanine

Reputation: 4125

stockChart is not defined(…)

I would like to use highstock but I can't seem to get it to work... my code: 

$(function () {
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) {

        // create the chart
        var options = {
            chart: {
                alignTicks: false,
                renderTo: 'container'
            },

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'AAPL Stock Volume'
            },

            series: [{
                type: 'column',
                name: 'AAPL Stock Volume',
                data: data,
                dataGrouping: {
                    units: [[
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]]
                }
            }]
        };

    });
    var chart = new stockChart(options);
});

The browser doesn't display anything and if I go to look at the error;

stockChart is not defined(…)

I have also tried the code from this JSFiddle, but it didn't work either. So i tried to use the options, but this doesn't work as well.. Could someone help me out?

Upvotes: 1

Views: 1173

Answers (3)

morganfree
morganfree

Reputation: 12472

Use Highcharts.stockChart or new Highcharts.StockChart.

Also, you create a new chart before the data is received (get.json works asynchronously) and you try to access options which is defined in a different scope.

$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) {

    // create the chart
    var options = {
        chart: {
            alignTicks: false,
            renderTo: 'container'
        },

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Volume'
        },

        series: [{
            type: 'column',
            name: 'AAPL Stock Volume',
            data: data,
            dataGrouping: {
                units: [[
                    'week', // unit name
                    [1] // allowed multiples
                ], [
                    'month',
                    [1, 2, 3, 4, 6]
                ]]
            }
        }]
    };
    var chart = Highcharts.stockChart(options); // alternatively new Highcharts.StockChart(options);
});

});

Upvotes: 0

Bruce Wong
Bruce Wong

Reputation: 25

You are calling the function stockChart as a constructor function using the keyword "new". The reason you get a "is not defined error" is because in your code, that stockChart function is nowhere to be found!

To create one write

    var stockChart = function(opt){
      this.someproperty = "hello there im a stockchart"
    };

With this function, you can then "new" the stockChart

    var my_stockchart = new stockChart();

Now you can use your newly formed my_stockchart object and call its methods. Try it in your console.

   my_stockchart.someproperty 

   returns => "hello there im a stockchart"

Now if you want the quick and dirty answer, I guess other people got you covered. So basically what it comes down to is that you're calling a function that is not yet defined in your code. Hope this helps.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You need to add the HighStock JavaScript library before your initialisation script:

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

Alternatively, as given in the fiddle, you can use this to initialise:

chart = Highcharts.stockChart('container', options);

Upvotes: 1

Related Questions