I have a big problem since few days. I spent long hours searching solutions on the web and forums but nothing. I develop, in a simple web page a chart (using Highcharts). Everything worked fine so I decided to integrate in my website (wich is done with Extjs 4). But, once I inserted my chart in the div in the panel, nothing works (no more mouse events, data updates and others). I spent long and long hours but nothing to do... it doesn't work. I saw the is an adaptater but I need to use lot of configuration options (like series name,...) in my chart and I didn't see these options here : http://ift.tt/1xwjAmd
Can someone help me to put my chart in extjs ? or send me a litle piece of code which work with extjs ...
Code:
SkyMapGraph = new Highcharts.Chart({
chart: {
renderTo:'containSkyMap',
//renderTo:tabSky.body.dom,
plotBackgroundImage:"images/skymap/IRMW.jpg",
showAxes:false,
witdh:600,
height:450,
panning:true,
zoomtype:'xy',
panKey:'shift',
events: {
load:function(){
setInterval(function () {
},100000);
}
}
},
title: {
text: 'essai'
},
xAxis: {
min : 0,
max : 360,
endOnTick:true,
startOnTick:true,
tickInterval:30,
gridLineWidth: 0.5,
title: {
text: 'Longitudes in degrees'
}
},
yAxis: {
min : -90,
max : +90,
endOnTick:true,
startOnTick:true,
tickInterval:30,
gridLineWidth: 0.5,
title: {
text: 'Latitudes in degrees'
}
},
tooltip: {
hideDelay : 0,
formatter: function () {
if(this.series.name === 'Zone non observable'){
return false;
}
else{
return this.point.name;
}
}
},
plotOptions: {
areaspline: {
pointStart: 0,
pointStop: 360
}
},
series: [
{
id:'antenna',
name: 'Antenna',
type:'scatter',
zindex:5,
index:5,
marker: {
symbol: 'url(images/skymap/radioT.png)',
width:26,
height:26
}
},
{
id:'rdfv',
name: 'Zone non observable',
type:'areaspline',
threshold:-90,
pointInterval:40,
stickyTracking:false,
trackByArea : true,
zindex:6,
index:6,
marker:{
enabled:false,
states:{
hover:{
enabled:false
}
}
},
events:{
legendItemClick: function () {
return false;
},
mouseOver:
function(){
// console.log("over");
document.getElementById("x").disabled = true;
document.getElementById("x").style.backgroundColor="red";
},
mouseOut:
function(){
//console.log("out");
document.getElementById("x").disabled = false;
document.getElementById("x").style.backgroundColor="green";
}
}
},
{
id:'sourcesOH',
name: 'Sources OH',
type:'scatter',
zindex:4,
index:4
},
{
id:'soH',
name: 'SoH',
type:'scatter',
zindex:3,
index:3
},
{
id:'sun',
name: 'Sun',
type:'scatter',
zindex:2,
index:2,
marker: {
symbol: 'url(sun.png)',
width:26,
height:26
}
}
]
});
Highcharts in PANEL
