HighCharts is not defined

javascript extjs highcharts

14,869

Solution 1

Looks like you need to include jquery (or another supported js library) as well before you call the highcharts.js resource.

Solution 2

First you should include highcharts.js before your app.js. Secondly looks like you should include highstock.js prior to highcharts.js also.

14,869

Author by

salamey

Updated on June 04, 2022

Comments

salamey almost 2 years

Hi I have a simple MVC extjs application :

My app.js :

Ext.Loader.setConfig({
    enabled: true,
    paths : {
        'Chart' : './Chart'
    }
});

Ext.require('Chart.ux.Highcharts');
Ext.require('Chart.ux.Highcharts.Serie');
Ext.require('Chart.ux.Highcharts.SplineSerie');

Ext.application({
    name: 'MyAppli',
    autoCreateViewport: true,
});

My Controller :

showWindow: function () {

    var chartStore = this.getHighChartDataStore();
    var win = Ext.create('Ext.window.Window', {
        width : 800,
        height : 600,
        minHeight : 400,
        minWidth : 550,
        hidden : false,
        shadow : false,
        maximizable : true,
        collapsible: true,
        title : 'Highchart example',
        renderTo : Ext.getBody(),
        layout : 'fit',
        items : [{
            xtype : 'highchart',
            id : 'chart',
            defaultSerieType : 'spline',
            series : [{
                    dataIndex : 'yesterday',
                    name : 'Yesterday',
                    visible : true
                }, {
                    dataIndex : 'today',
                    name : 'Today',
                    visible : true
            }],
            store : chartStore,
            xField : 'time',
            chartConfig : {
                chart : {
                    type: 'spline',
                    marginRight : 130,
                    marginBottom : 120,
                    zoomType : 'x',
                    animation : {
                        duration : 1500,
                        easing : 'swing'
                    }
                },
                title : {
                    text : 'Standalone Highcharts for ExtJs 4 example',
                    x : -20 //center
                },
                subtitle : {
                    text : 'Random value',
                    x : -20
                },
                xAxis : [{
                    title : {
                        text : 'Time',
                        margin : 20
                    },
                    labels : {
                        rotation : 270,
                        y : 35
                    }
                }],
                yAxis : {
                    title : {
                        text : 'Value'
                    },
                    plotLines : [{
                        value : 0,
                        width : 1,
                        color : '#808080'
                    }]
                },
                plotOptions : {
                    series : {
                        animation : {
                            duration : 3000,
                            easing : 'swing'
                        }
                    }
                },       
                legend : {
                    layout : 'vertical',
                    align : 'right',
                    verticalAlign : 'top',
                    x : -10,
                    y : 100,
                    borderWidth : 0
                }
            }
        }]
    });
    win.show();
}

My problem is that the above function shows an empty window, while the console says : Uncaught ReferenceError: Highcharts is not defined in the file highcharts.js on the function draw.

What am I doing wrong? I'm using Extjs 4.1 with the latest HighChart (taken from github).

My index.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="app/view/combo_release.css">
        <script type="text/javascript" src="../extjs/ext-all.js"></script>
        <script type="text/javascript" src="app/app.js"></script>
        <script type="text/javascript" src="Chart/ux/highcharts.js"></script>
    </head>
    <body>
    </body>
</html>

salamey over 10 years

I'm using EXTJS, why should I add JQuery?
wergeld over 10 years

Because HC does not natively work with ExtJS. You may need to use this one: sencha.com/forum/….