Documentation

Chart Events

jqxChart raises events when the user moves in or out of a series element displayed, clicks on an element, changes the selection of a range selector and more. For complete list of events please check the API reference. To handle chart events you need to implement event handlers. An event handler function must accept one argument which contains information about the event. When jqxChart raises an event, it will include all related event information in an arguments object and pass with the event as a property.

Each event information contains the follow properties:

type - name of the event.
args - event arguments
- seriesGroup - the series group where the event originated. Applicable to mouse, touch and toggle events.
- serie - serie where the event originated. Applicable to mouse, touch and toggle events.
- elementIndex - zero based index of the element in the data source. Applicable to mouse, touch and toggle events.
- elementValue - value of the element. Applicable to mouse, touch and toggle events.
- instance - instance of the chart. Applicable to range selector and refresh events.
- state - toggle state (true/false) of the serie or item. Applicable to toggle events.
- state - toggle state (true/false) of the serie or item. Applicable to toggle events.
- minValue - range selector minimum value. Applicable to range selector events.
- maxValue - range selector maximum value. Applicable to range selector events.

The following example demonstrates the mouseover, mouseout and click events:

Move the mouse cursor over the columns in the chart below and click on them

Here is the example's source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Events Example</title>
    <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/jqxdata.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">
        $(document).ready(function () {
            // prepare chart data
            var sampleData = [
                    { 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 settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                    dataField: 'Day',
                    type: 'basic'
                },
                colorScheme: 'scheme04',
                showToolTips: false,
                enableAnimations: true,
                seriesGroups:
                    [
                        {
                            type: 'column',
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                title: { text: 'Time in minutes' }
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                        }
                    ]
            };
            function myEventHandler(event) {
                var eventData = '<div><b>Last Event: </b>' + event.type + '<b>, Serie DataField: </b>' + event.args.serie.dataField + '<b>, Value: </b>' + event.args.elementValue + "</div>";
                if (event.type == 'toggle')
                    eventData = '<div><b>Last Event: </b>' + event.type + '<b>, Serie DataField: </b>' + event.args.serie.dataField + '<b>, visible: </b>' + event.args.state + "</div>";
                $('#eventText').html(eventData);
            };
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
            $('#chartContainer').on('mouseleave mouseenter click toggle', function (event) {
                if (event.args)
                    myEventHandler(event); 
                
                });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body style="background:white;">
    <table>
    <tr>
    <td>
    <div id='chartContainer' style="width:600px; height: 400px"/>
    </td>
    </tr>
    <tr><td>
    <div id='eventText' style="width:600px; height: 30px"/>
    </td>
    </tr>
    </table>
</body>
</html>