jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

multiple charts work in IE9, issue with IE8, works on all other browsers Posts

September 25, 2012 at 4:54 pm multiple charts work in IE9, issue with IE8, works on all other browsers #8447

Member

I have recreated a test case that illustrates the problem at http://geenius.com/jqxchart/

This page displays three charts. Using Firefox, Chrome, Safari and IE9 you see all three charts. Using IE8, only the 1st and 3rd chart is displayed. Trying to display the second chart (where chart 1 and 2 are both type: ‘stackedcolumn’, and the 3rd is type: ‘pie’. It appears that I cannot have two charts of the same type on the same page. Please advise if there is a work around.

Thanks

September 26, 2012 at 4:45 am multiple charts work in IE9, issue with IE8, works on all other browsers #8486

Peter Stoev

Keymaster

Thank you for the feedback! As a workaround, you can use Iframes as containers for multiple charts in IE8.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 26, 2012 at 2:28 pm multiple charts work in IE9, issue with IE8, works on all other browsers #8528

Peter Stoev

Keymaster

Hi arudmik,

I copied your code, formatted it and tested it locally. I found out that the problem was not related to jqxChart. There’s an issue in your data definition and especially the keySettings. You have syntax error – additional ‘,’ after the last item.

Here’s a working code which I tested with IE7, IE8, IE9 and IE10.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel='stylesheet' type='text/css' href='../../jqwidgets/styles/jqx.base.css' />
   <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
  
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        /*
         * Habits Chart
         */
        // prepare chart data as an array
        var habitData = [
                { habit: 'Character', Introduce: 90, Develop: 80, Extend: 60 },
                { habit: 'Leader', Introduce: 85, Develop: 75, Extend: 65 },
                { habit: 'Learner', Introduce: 60, Develop: 40, Extend: 15 },
                { habit: 'Quality', Introduce: 70, Develop: 65, Extend: 45 },
                { habit: 'Independent', Introduce: 50, Develop: 20, Extend: 20 },
                { habit: 'Collaborates', Introduce: 30, Develop: 20, Extend: 10 },
                { habit: 'Thinker', Introduce: 60, Develop: 45, Extend: 0 }
        ];
        // prepare jqxChart settings
        var habitSettings = {
            title: "7 Habits",
            //description: "The Habits of a Master Learner",
            enableAnimations: false,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: habitData,
            categoryAxis:
                {
                    text: 'Category Axis',
                    textRotationAngle: 0,
                    dataField: 'habit',
                    showTickMarks: true,
                    tickMarksInterval: 1,
                    tickMarksColor: '#888888',
                    unitInterval: 1,
                    showGridLines: false,
                    gridLinesInterval: 1,
                    gridLinesColor: '#888888',
                    axisSize: 'auto'
                },
            colorScheme: 'scheme05',
            seriesGroups:
                [
                    {
                        type: 'stackedcolumn',
                        columnsGapPercent: 100,
                        seriesGapPercent: 5,
                        valueAxis:
                        {
                            unitInterval: 20,
                            minValue: 0,
                            maxValue: 300,
                            displayValueAxis: true,
                            description: 'Time in minutes',
                            axisSize: 'auto',
                            tickMarksColor: '#888888'
                        },
                        series: [
                                { dataField: 'Introduce', displayText: 'Introduce' },
                                { dataField: 'Develop', displayText: 'Develop' },
                                { dataField: 'Extend', displayText: 'Extend' }
                        ]
                    }
                ]
        };
        /*
         * Keys Chart
         */
        // prepare chart data as an array
        var keyData = [
                { key: 'Identity', Understand: 70, Apply: 60, Master: 50 },
                { key: 'Drive', Understand: 95, Apply: 85, Master: 60 },
                { key: 'Sight', Understand: 60, Apply: 50, Master: 40 },
                { key: 'Design', Understand: 30, Apply: 10, Master: 5 },
                { key: 'Build', Understand: 80, Apply: 60, Master: 40 }
        ];
        // prepare jqxChart settings
        var keySettings = {
            title: "5 Keys",
            //description: "Becoming a Master Designer/Visionary",
            enableAnimations: false,
            showLegend: true,
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
            source: keyData,
            categoryAxis:
                {
                    text: 'Category Axis',
                    textRotationAngle: 0,
                    dataField: 'key',
                    showTickMarks: true,
                    tickMarksInterval: 1,
                    tickMarksColor: '#888888',
                    unitInterval: 1,
                    showGridLines: false,
                    gridLinesInterval: 1,
                    gridLinesColor: '#888888',
                    axisSize: 'auto'
                },
            colorScheme: 'scheme04',
            seriesGroups:
                [
                    {
                        type: 'stackedcolumn',
                        columnsGapPercent: 100,
                        seriesGapPercent: 5,
                        valueAxis:
                        {
                            unitInterval: 20,
                            minValue: 0,
                            maxValue: 300,
                            displayValueAxis: true,
                            description: 'Time in minutes',
                            axisSize: 'auto',
                            tickMarksColor: '#888888'
                        },
                        series: [
                                { dataField: 'Understand', displayText: 'Understand' },
                                { dataField: 'Apply', displayText: 'Apply' },
                                { dataField: 'Master', displayText: 'Master' }
                        ]
                    }
                ]
        };
        // prepare identity chart
        var myIdentityData =
        {
            datatype: "csv",
            datafields: [
                { name: 'identity' },
                { name: 'Share' }
            ],
            url: 'myIdentityData.txt'
        };
        //var identityData = new $.jqx.dataAdapter(myIdentityData, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + myIdentityData.url + '" : ' + error); } });
        var identityData = [{ Identity: 'Researcher - Manager', Share: 40.0 },
                            { Identity: 'Engineer - Technician', Share: 30.0 },
                            { Identity: 'Designer - Inventor', Share: 20.0 },
                            { Identity: 'Visionary - Entrepreneur', Share: 10.0 }];
        // prepare jqxChart settings
        var identitySettings = {
            title: "My Identities",
            //description: "Identities I Have Been Using",
            enableAnimations: false,
            showLegend: true,
            legendLayout: { left: 10, top: 15, width: 300, height: 200, flow: 'vertical' },
            padding: { left: 5, top: 5, right: 5, bottom: 5 },
            titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
            source: identityData,
            colorScheme: 'scheme03',
            seriesGroups:
                [
                    {
                        type: 'pie',
                        showLabels: true,
                        series:
                            [
                                {
                                    dataField: 'Share',
                                    displayText: 'Identity',
                                    labelRadius: 90,
                                    initialAngle: 15,
                                    radius: 115,
                                    centerOffset: 0,
                                    formatSettings: { sufix: '%', decimalPlaces: 1 }
                                }
                            ]
                    }
                ]
        };
        $("#myHabits").jqxChart(habitSettings);
        $("#myKeys").jqxChart(keySettings);
        $("#myIdentities").jqxChart(identitySettings);
    });
</script>
</head>
<body>
 <div id="myGrowth">
    <table>
        <tr>
            <td>
                <h1 class="becomingHeader">Becoming a Master Learner/Teacher</h1>
                <div id="myHabits" style="width:520px; height:400px;"></div>
            </td>
            <td>
                <h1 class="becomingHeader">Becoming a Master Designer/Visionary</h1>
                <div id="myKeys" style="width:500px; height:400px;"></div>
            </td>
            <td>
                <h1 class="becomingHeader">iCubed Identities</h1>
                <div id="myIdentities" style="width:400px; height:400px;"></div>
            </td>
        </tr>
    </table>
  </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.