jQuery UI Widgets › Forums › Chart › Mouse over chart when values are shown on chart
Tagged: chart, IE8, Internet Explorer 8, jqxChart, labels, seriesGroups, showLabels, visible
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.
-
Author
-
Hello,
I have a problem in IE8.
I used this solution to put a cursor pointer on the mouse over event of the chart.
http://www.jqwidgets.com/community/topic/show-cursor-on-mouse-over-of-chart-image/It works well, but in IE8, when seriesGroups.showLabels is true, the mouse event doesn’t work anymore.
Any solutions?
Thank you.
Hello Nicolas,
In the current version (3.7.1) showLabels is deprecated. Use
labels: { visible: true }
instead. To see the latest additions and changes to the API, please visit the following page: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-api.htm. Having said that, the following example works fine even in Internet Explorer 8:<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.core.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 source = { datatype: "csv", datafields: [ { name: 'Country' }, { name: 'GDP' }, { name: 'DebtPercent' }, { name: 'Debt' } ], url: '../sampledata/gdp_dept_2010.txt' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "Economic comparison", description: "GDP and Debt in 2010", showLegend: true, enableAnimations: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'Country', gridLines: { visible: true }, valuesOnTicks: false }, colorScheme: 'scheme01', columnSeriesOverlap: false, seriesGroups: [ { type: 'column', valueAxis: { visible: true, unitInterval: 5000, title: { text: 'GDP & Debt per Capita($)<br>' } }, labels: { visible: true }, series: [ { dataField: 'GDP', displayText: 'GDP per Capita' }, { dataField: 'Debt', displayText: 'Debt per Capita' } ] }, { type: 'line', valueAxis: { visible: true, position: 'right', unitInterval: 10, title: { text: 'Debt (% of GDP)' }, gridLines: { visible: false }, labels: { horizontalAlignment: 'left' } }, series: [ { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); // get the series groups of an existing chart var groups = $('#chartContainer').jqxChart('seriesGroups'); // add a mouseover event handler function to the 1st group if (groups.length > 0) { groups[0].mouseover = function (e) { $('#chartContainer').css('cursor', 'pointer'); }; groups[0].mouseout = function (e) { $('#chartContainer').css('cursor', 'default'); }; // update the group $('#chartContainer').jqxChart({ seriesGroups: groups }); }; }); </script> </head> <body class='default'> <div id='chartContainer' style="width:850px; height:500px;"> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
Thanks for the answer and sorry for reviving this thread. The solution works in your example, but in my case, I don’t use jqxDataAdapter for my data source. I use a sample data like in the following page (on the bottom):
I replaced your jqxDataAdapter info by a simple sample and it doesn’t work still in IE8.
In that case, it doesn’t work. Is there a workaround that I can do?
Hi Nicolas,
We confirm this issue. It does not seem to be related to the lack of data adapter, but to the lack of a second series group of type ‘line’. Unfortunately, we cannot offer you a solution on the matter.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.