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" ".dtd">
<html xmlns="">
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="app/view/bo_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>
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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/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/bo_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>
- Can you show your HTML that is referencing your JS files? – user1277546 Commented Dec 23, 2013 at 17:10
- Please, show us the code in the files you required. – Abraham Hamidi Commented Dec 23, 2013 at 17:11
- stackoverflow./questions/11198568/… has similar issues. You are most likely missing some pieces – Kelly J Andrews Commented Dec 23, 2013 at 17:14
- I did as the link says, downloaded the library and referenced the highcharts.js file but still the same error, ` <script src="highcharts_lib/js/highcharts.js" type="text/javascript">` – salamey Commented Dec 23, 2013 at 17:38
- Is this working for you now? Can you please help me as well? :) Thanks in Advance – Jagpreet Singh Commented Feb 26, 2015 at 10:21
2 Answers
Reset to default 1Looks like you need to include jquery (or another supported js library) as well before you call the highcharts.js resource.
First you should include highcharts.js before your app.js. Secondly looks like you should include highstock.js prior to highcharts.js also.