Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    0
    aimad41 is on a distinguished road

      0  

    Default Problem rendering charts (linecharts, using simplel example)

    Problem rendering charts (linecharts, using simplel example)


    Hi guys ! After several search i did not understand why the flash component won't render, i copy/paste the code in the extjs 3.4 example, here my code :

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Charts v1.0</title>
            <link rel="stylesheet" type="text/css" href="css/ext-all.css" rel="stylesheet" />
            <script type="text/javascript" src="js/ext-base-debug.js"></script>
            <script type="text/javascript" src="js/ext-all-debug.js"></script>
            <style>
    
            </style>
        </head>
        <script type="text/javascript">
            
            Ext.onReady(function(){
                
                 // extra extra simple
               Ext.chart.Chart.CHART_URL = 'images/charts.swf';
    
                 var store = new Ext.data.JsonStore({
                    fields:['name', 'visits', 'views'],
                    autoLoad:true,
                    data: [
                    {name:'Jul 07', visits: 245000, views: 3000000},
                    {name:'Aug 07', visits: 240000, views: 3500000},
                    {name:'Sep 07', visits: 355000, views: 4000000},
                    {name:'Oct 07', visits: 375000, views: 4200000},
                    {name:'Nov 07', visits: 490000, views: 4500000},
                    {name:'Dec 07', visits: 495000, views: 5800000},
                    {name:'Jan 08', visits: 520000, views: 6000000},
                    {name:'Feb 08', visits: 620000, views: 7500000}
                    ]
                });
    
            // extra extra simple
            new Ext.Panel({
            title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
            renderTo: 'container',
            width:500,
            height:300, 
            items: {
                xtype: 'linechart',
                store: store,
                xField: 'name',
                yField: 'visits',
            }
            });
        });
           
        </script>
        <body style="padding: 50px;"><div id='container'></div></body>
    </html>
    the flash object is loaded locally, same problem using const charts url (yahoo cdn), could someone help ? No log, no error on firebug, i can't debug that

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Are you sure the chart isn't being rendered on the page - but you simply can't see it? Check the html tab within firebug to see if the code has been rendered.

    You can also check if it has been rendered with some simple debugging by giving the panel/chart an id then using console.log(Ext.getCmp('id')).

    Also try giving your container layout:'fit', plus remove the trailing comma you have left after your yField config...

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    0
    aimad41 is on a distinguished road

      0  

    Default problem rendering charts swf

    problem rendering charts swf


    Also tried the fix issue, comma, and the specific layout as 'fit' !

    Code:
    <html><head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
            <title>Charts v1.0</title>
            <link href="css/ext-all.css" type="text/css" rel="stylesheet">
            <script src="js/ext-base-debug.js" type="text/javascript"></script>
            <script src="js/ext-all-debug.js" type="text/javascript"></script>
            <style>
    
            </style>
        <script type="text/javascript">
            
            Ext.onReady(function(){
                
                 // extra extra simple
               Ext.chart.Chart.CHART_URL = 'images/charts.swf';
    
                 var store = new Ext.data.JsonStore({
                    fields:['name', 'visits', 'views'],
                    autoLoad:true,
                    data: [
                    {name:'Jul 07', visits: 245000, views: 3000000},
                    {name:'Aug 07', visits: 240000, views: 3500000},
                    {name:'Sep 07', visits: 355000, views: 4000000},
                    {name:'Oct 07', visits: 375000, views: 4200000},
                    {name:'Nov 07', visits: 490000, views: 4500000},
                    {name:'Dec 07', visits: 495000, views: 5800000},
                    {name:'Jan 08', visits: 520000, views: 6000000},
                    {name:'Feb 08', visits: 620000, views: 7500000}
                    ]
                });
    
            // extra extra simple
            new Ext.Panel({
            title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
            renderTo: 'container',
            width:500,
            height:300,
            layout:'fit', 
            items: {
                xtype: 'linechart',
                store: store,
                xField: 'name',
                yField: 'visits'
            }
            });
        });
           
        </script></head>
        
        <body style="padding: 50px;" class="   ext-gecko ext-gecko3"><div style="width:500px;height:300px;" id="container"><div id="ext-comp-1001" class=" x-panel" style="width: 500px;"><div class="x-panel-header x-unselectable" id="ext-gen3" style="-moz-user-select: none;"><span class="x-panel-header-text" id="ext-gen6">ExtJS.com Visits Trend, 2007/2008 (No styling)</span></div><div class="x-panel-bwrap" id="ext-gen4"><div class="x-panel-body" id="ext-gen5" style="width: 498px; height: 273px;"><object width="100%" height="100%" type="application/x-shockwave-flash" data="images/charts.swf" id="extflashcmp1002" style="visibility: visible; width: 498px; height: 273px;"><param name="allowScriptAccess" value="always"><param name="bgcolor" value="#ffffff"><param name="wmode" value="opaque"><param name="flashvars" value="allowedDomain=charts.local&amp;YUISwfId=extflashcmp1002&amp;YUIBridgeCallback=Ext.FlashEventProxy.onEvent"></object></div></div></div></div>
    </body></html>

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Ok, so the code is definitely being rendered

    Where did you get the charts.swf file from, and (I know this will be basic but...) the URL pointing to it does actually serve the SWF file right?

    There have been reports of charts not appearing with the latest version of the charts.swf file - therefore I would recommend using the one from the EXTJS download if you aren't already.

    Se here for more information on this specific issue:
    http://www.sencha.com/forum/showthre...ndering-in-3.4

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    7
    Vote Rating
    0
    aimad41 is on a distinguished road

      0  

    Default


    I search about few hours this problem on the forum, and i can't imagine how is this kind of error possible, if the url is not specified, the component will try to get the direct swf content by the yahoo server, on as production environnement, this will be really dangerous ?

    I'm really impressed by the work done here, on the extjs framework, but this kind of error...

    Anyway, working well, a big thanks Will

Thread Participants: 1

Tags for this Thread