jQWidgets Forums

jQuery UI Widgets Forums Chart IE8 and Chart

This topic contains 2 replies, has 2 voices, and was last updated by  Michael76 12 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • IE8 and Chart #14156

    Michael76
    Member

    Hi,
    I’d like to dynamically toggle between two or many charts after user press some buttons. So, I wrote the following test code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <title id='Description'>jqxChart Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    // prepare chart data as an array
    var theme = "default"
    var sampleData1 = [
    { Day:'Monday', Keith:30, Erica:15, George: 25},
    { Day:'Tuesday', Keith:25, Erica:25, George: 30},
    { Day:'Wednesday', Keith:30, Erica:20, George: 25},
    { Day:'Thursday', Keith:35, Erica:25, George: 45},
    { Day:'Friday', Keith:20, Erica:20, George: 25},
    { Day:'Saturday', Keith:30, Erica:20, George: 30},
    { Day:'Sunday', Keith:60, Erica:45, George: 90}
    ];
    // prepare jqxChart settings
    var settings1 = {
    title: "Fitness & exercise weekly scorecard",
    description: "Time spent in vigorous exercise",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData1,
    categoryAxis:
    {
    dataField: 'Day',
    showGridLines: true
    },
    colorScheme: 'scheme01',
    seriesGroups:
    [
    {
    type: 'column',
    columnsGapPercent: 50,
    seriesGapPercent: 0,
    valueAxis:
    {
    unitInterval: 10,
    minValue: 0,
    maxValue: 100,
    displayValueAxis: true,
    description: 'Time in minutes',
    axisSize: 'auto',
    tickMarksColor: '#888888'
    },
    series: [
    { dataField: 'Keith', displayText: 'Keith'},
    { dataField: 'Erica', displayText: 'Erica'},
    { dataField: 'George', displayText: 'George'}
    ]
    }
    ]
    };
    var sampleData2 = [
    { Hour: 1, Sales: 135 },
    { Hour: 3, Sales: 145 },
    { Hour: 5, Sales: 90 },
    { Hour: 15, Sales: 66 },
    { Hour: 17, Sales: 43 },
    { Hour: 18, Sales: 122 },
    { Hour: 22, Sales: 59 },
    { Hour: 23, Sales: 70 }
    ];
    // prepare jqxChart settings
    var settings2 = {
    title: "Sales per hour",
    description: "",
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 10, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: sampleData2,
    horizontalOffsetIntervals: 0,
    categoryAxis:
    {
    text: 'Category Axis',
    textRotationAngle: 0,
    dataField: 'Hour',
    formatFunction: function (value) {
    return value.toString();
    },
    showTickMarks: true,
    tickMarksStartInterval: 0,
    tickMarksInterval: 1,
    tickMarksColor: '#888888',
    unitInterval: 1,
    showGridLines: true,
    gridLinesStartInterval: 0,
    gridLinesInterval: 3,
    gridLinesColor: '#888888',
    axisSize: 'auto',
    minValue: 0,
    maxValue: 23,
    valuesOnTicks: false
    },
    colorScheme: 'scheme02',
    seriesGroups:
    [
    {
    type: 'column',
    valueAxis:
    {
    unitInterval: 50,
    minValue: 0,
    maxValue: 200,
    displayValueAxis: true,
    description: 'Sales ($)',
    axisSize: 'auto',
    tickMarksColor: '#888888'
    },
    series: [
    { dataField: 'Sales', displayText: 'Sales', showLabels: true }
    ]
    }
    ]
    };
    // setup the chart
    $('#jqxChart').jqxChart(settings1);
    $("#jqxButton1").jqxButton({ width: '150', theme: theme });
    $("#jqxButton2").jqxButton({ width: '150', theme: theme });
    $("#jqxButton1").bind('click', function () {
    $('#jqxChart').jqxChart(settings1);
    });
    $("#jqxButton2").bind('click', function () {
    $('#jqxChart').jqxChart(settings2);
    });
    });
    </script>
    </head>
    <body class='default'>
    <div style='height: 450px; width: 682px;'>
    <div id='host' style="margin: 0 auto; width:680px; height:400px;">
    <div id='jqxChart' style="width:680px; height:400px; position: relative; left: 0px; top: 0px;">
    </div>
    </div>
    </div>
    <div style='margin-top: 10px;'>
    <div style='float: left;'>
    <div id='jqxButton1'>Chart1</div>
    <div style='margin-top: 5px;' id='jqxButton2'>Chart2</div>
    </div>
    </div>
    </body>
    </html>

    It works under Chrome, Firefox, IE9, but doesn’t work under IE8. (I get an error after I press button Chart2). What could be the problem here? Thank you.

    IE8 and Chart #14157

    Dimitar
    Participant

    Hello Michael76,

    We tried your code but were not able to reproduce the reported issue, it works as expeced at our side. Please make sure you use the latest version of jQWidgets (as of now, it is 2.6.1).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    IE8 and Chart #14166

    Michael76
    Member

    Hi Dimitar,

    I use the latest Version 2.6.1. Possibly the reason is that I started it from Internet (with Apache TomCat Server). If I start it locally, I get also no error.
    The error I get is: Invalid argument, jqxChart.js, Line:7, Char:71766 (e.style.top=g)

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

You must be logged in to reply to this topic.