Welcome Guest Search | Active Topics |

Bar Chart problem in jquery ui tab - Firefox
Options
Previous Topic Next Topic
dan
#1 Posted : Wednesday, November 27, 2013 12:35:09 PM(UTC)
Rank: Member

Groups: Registered
Joined: 10/22/2012(UTC)
Posts: 12

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
We recently upgraded to 3.8.2.0 from 3.6.1.0 because we discovered that the presence of some jqChart Bar Charts in our website cause Firefox on Windows to crash. The good news is the upgrade solved the crashing problem. The bad news is the bar chart is not rendered at all; rather, the following message appears in the developer console:

jquery.jqChart.min.js:9 TypeError: this._createElements is not a function

However, the Bar Chart displays properly in Chrome and there is no such error message.
Line and Pie charts both display properly in Firefox. We are not sure which version of Firefox this problem began, but it can be reproduced on the current version (25.0.1)

I've narrowed down problem a little: the bar chart must be in an iframe, the iframes must be part of a jquery-ui tab, and the chart iframe must not be the first one. I've tried a number of versions of jquery and jquery-ui and regardless, the Bar Chart has this weird problem.

Here is some simplified code that reproduces the problem:

index.html
Code:

<!DOCTYPE HTML>
<html>
  <head>
<link rel="stylesheet" type="text/css" media="screen" href="/static/jquery/ui/1.8.20/css/custom-theme/jquery-ui-1.8.20.custom.css" />
<script src="/static/jquery/1.10/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/static/jquery/ui/1.10.3/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<style type="text/css">
html, body {
    margin: 0px;
    padding: 0px;
    font-size: 75%;
    background-color:black;
    height: 100%;
    width: 100%;
}
#icp-tabs-container {height: 94%;}
#icp-tabs {height: 94%;}
#icp-tabs-One {height: 100%;}
#icp-tabs-Test {height: 100%;}
#icp-tabs-iframe {width: 100%; height: 93%; border: 0px;}
.ui-tabs-anchor {outline: 0;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#icp-tabs").tabs();
    });
</script>
</head>
<body>
<div id="icp-tabs-container" class="container">
  <div id="icp-tabs">
    <ul>
        <li><a href="#icp-tabs-One">1st Tab</a></li>
        <li><a href="#icp-tabs-Test">Chart Tab</a></li>
    </ul>
    <div id="icp-tabs-One" height="100%">
           <iframe id="icp-tabs-iframe" src="/frame1.html" frameborder="1"></iframe>
    </div>
    <div id="icp-tabs-Test" height="100%">
           <iframe id="icp-tabs-iframe" src="/frame2.html]" frameborder="1"></iframe>
    </div>
  </div>
</div>
</body>
</html>


frame1.html
Code:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>


frame2.html
Code:

<html>
  <head>
  <title>Chart</title>
<script src="/static/jquery/1.10/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/static/jquery/jqchart/3.8.2.0/js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="/static/jquery/ui/1.10.3/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<style>html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
    background-color:inherit;
    color:white;
    height: 100%;
    width: 1190px;
}

</style>
<script type="text/javascript">

var jsonstring = '{"dataset": [{"type": "column", "data": [["Sample 1", 1072], ["Sample 2", 351], ["Sample 3", 241], ["Sample 4", 147], ["Sample 5", 121]], "title": "Item"}]}';
var bar_data = jQuery.parseJSON(jsonstring).dataset;

$(document).ready(function(){
    $('#chart').jqChart({
        title: {
            text: "Bar Chart",
            strokeStyle: undefined,
            font: '15px Segoe UI, Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif',
            fillStyle: 'white',
            lineWidth: 1
        },
        animation: { delayTime: 0, duration: 0.1 },
        height: 600,
        width: 1000,
        axes: [{location: 'bottom',
                strokeStyle: '#AAAAAA',
                labels: {fillStyle: '#AAAAAA', angle: -45, font: '12px Segoe UI, Arial, sans-serif'},
                majorTickMarks: {strokeStyle: '#AAAAAA'}
             },
             {location: 'left',
                strokeStyle: '#AAAAAA',
                lineWidth: 0,
                title: {text: 'Number', fillStyle: '#AAAAAA'},
                labels: {fillStyle: '#AAAAAA', font: 'Segoe UI, Arial, sans-serif'},
                majorTickMarks: {visible: false}
             }],
        background: {type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{offset: 0, color: '#606060'}, {offset: 1, color: '#101010'}]
        },
        legend: {visible: false},
        paletteColors: { type: 'customColors', customColors: ['#AEBB36', '#FBB816', '#9F4276', '#D35400', '#A34242', '#FF9568', '#FE83C4', '#E5C512', '#8A2948', '#A4A7BC', '#6B7221', '#DD364B', '#960B59', '#FF7644', '#F067A6', '#63A0CC', '#C4488C', '#FFD83F', '#5C8C2B', '#F49CC4', '#E70379', '#FFE260', '#9BE1FF', '#F067A6', '#A71D67', '#FF56AA', '#800244', '#FEAFD7', '#FE83C4', '#FF2BAD', '#FF72E7', '#FF60A0', '#FF91DC', '#FF7595']
        },
        border: {strokeStyle: '#404040'},
        series: bar_data,
        tooltips: {background: 'white'}
    });
});
</script>
<meta name="referrer" content="origin">
</head>
<body>
    <div id="chart"></div>
</body>
</html>


Do you have any insight into this problem?
Back to top
Dragan
#2 Posted : Wednesday, November 27, 2013 12:58:20 PM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
We'll investigate this one and I'll let you know.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
dan
#3 Posted : Wednesday, November 27, 2013 1:10:01 PM(UTC)
Rank: Member

Groups: Registered
Joined: 10/22/2012(UTC)
Posts: 12

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Please note the typo in index.html introduced when I deleted some formatting which doesn't work inside code tags:

"/frame2.html]"

should be

"/frame2.html"
Back to top
Dragan
#4 Posted : Thursday, November 28, 2013 8:27:46 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
This is a quite strange issue. It's is reproducible only in FF. We figured out that if you create the tabs in body onload event, the chart is rendered properly:

Code:
<script type="text/javascript">
        //$(document).ready(function () {
        //    $("#icp-tabs").tabs();
        //});

        function onload() {
            $("#icp-tabs").tabs();
        }

    </script>
</head>
<body onload="onload();">
    <div id="icp-tabs-container" class="container">
        <div id="icp-tabs">
            <ul>
                <li><a href="#icp-tabs-One">1st Tab</a></li>
                <li><a href="#icp-tabs-Test">Chart Tab</a></li>
            </ul>
            <div id="icp-tabs-One" height="100%">
                <iframe id="icp-tabs-iframe" src="frame1.html" frameborder="1"></iframe>
            </div>
            <div id="icp-tabs-Test" height="100%">
                <iframe id="Iframe1" src="frame2.html" frameborder="1"></iframe>
            </div>
        </div>
    </div>
</body>
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
dan
#5 Posted : Thursday, November 28, 2013 12:36:02 PM(UTC)
Rank: Member

Groups: Registered
Joined: 10/22/2012(UTC)
Posts: 12

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Thanks for that workaround. I guess Firefox users will have to put up with a no tabs for a few seconds while the site loads.
That is,until such a time that mozilla addresses the crash reports that were submitted when we were using jqChart v3.6.1.0
Back to top
Users browsing this topic
Guest (2)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.110 seconds.