Results 1 to 2 of 2

Thread: Highcharts in PANEL

  1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    27
    Answers
    1

    Default Highcharts in PANEL

    Hello everybody,

    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://joekuan.org/demos/Highcharts_...ghcharts.Serie

    Can someone help me to put my chart in extjs ? or send me a litle piece of code which work with extjs ...

    Thanks a lot !

    This is my chart

    Code:
             SkyMapGraph = new Highcharts.Chart({
                            chart: {
                                renderTo:'containSkyMap',
                                //renderTo:tabSky.body.dom,
                                plotBackgroundImage:"imag.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 === 'Zoable'){
                                             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
                                            }
                                }
                          ]
                 });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    You would most likely need to contact the author of the UX.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •