jQuery UI Widgets Forums Chart Mouse over chart when values are shown on chart

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 9 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • Nicolas
    Participant

    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.


    Dimitar
    Participant

    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,
    Dimitar

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


    Nicolas
    Participant

    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):

    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-getting-started.htm

    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?


    Dimitar
    Participant

    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,
    Dimitar

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

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

You must be logged in to reply to this topic.