jQWidgets Forums
jQuery UI Widgets › Forums › Chart › IE8 and Chart
Tagged: chart, IE8, Internet Explorer 8, jqxChart
This topic contains 2 replies, has 2 voices, and was last updated by Michael76 12 years, 5 months ago.
-
AuthorIE8 and Chart Posts
-
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.
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,
DimitarjQWidgets team
http://www.jqwidgets.com/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) -
AuthorPosts
You must be logged in to reply to this topic.