enableEvents for seriesGroups - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, enable, enableEvents, event, event handler, jqxChart, series, seriesGroups

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 5 months ago.

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

Author

enableEvents for seriesGroups Posts

July 13, 2014 at 7:26 am enableEvents for seriesGroups #57119

adron

Participant

Hello. There is already a global enableEvents property that if == false block all mouse events for Chart but i need enableEvents property for optional seriesGroup.
Something like this code:


seriesGroups: [                      
                      {
                        type: 'area',
                        enableEvents: false, 
                        showLegend: false,

Can you provide it in next release of jqxChart?
It’s just a couple lines of code.

I need this opportunity to do some series insensitive to hover the mouse them. such a combination of area and line series:

seriesGroups: [                      
                      {
                        type: 'area',
                        enableEvents: false, //Ignore all mouse events. This serie is something like a background  for line serie!
                        showLegend: false, //No legend !
                        valueAxis: { 
                                     dataField: 'Date',                                     
                                     displayValueAxis: false,
                                   },                        
                        series: [                                                                                                      
                                  { dataField: 'tx_s', opacity: 0.8, lineWidth: 0, fillColor: '#3597be' },                                  
                                ]
                      },
                      {
                        type: 'line',
                        valueAxis: {                                                                          
                                     description: 'Speed in Kbit/sec',
                                     dataField: 'Date',                                                                                                               
                                   },                                                                                                                                                                       
                        series: [                                                                                                      
                                  { dataField: 'tx_s', displayText: 'Tx Speed', opacity: 1.0, lineWidth: 1, lineColor: 'Black', fillColor: '#3597be', toolTipLineColor: '#3597be'},
                                  { dataField: 'rx_s', displayText: 'Rx Speed', opacity: 1.0, lineWidth: 2, lineColor: 'Red', fillColor: 'Red'},
                                ]
                      }
                    ]

2 line + 1 area with enableEvents == false
Thanks!

July 14, 2014 at 6:31 am enableEvents for seriesGroups #57142

Dimitar

Participant

Hello adron,

Some series can be excluded from the event functionality with a simple check, as shown:

<!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.10.2.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',
                        showGridLines: false,
                        type: 'basic'
                    },
                colorScheme: 'scheme04',
                showToolTips: false,
                enableAnimations: true,
                seriesGroups:
                    [
                        {
                            type: 'column',
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            mouseover: myEventHandler,
                            mouseout: myEventHandler,
                            click: myEventHandler,

                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                        }
                    ]
            };

            function myEventHandler(e) {
                if (e.serie.dataField != "Erica") {
                    var eventData = '<div><b>Last Event: </b>' + e.event + '<b>, DataField: </b>' + e.serie.dataField + '<b>, Value: </b>' + e.elementValue + "</div>";
                    $('#eventText').html(eventData);
                }
            };

            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body style="background: white;">
    <table>
        <tr>
            <td>
                <div id='chartContainer' style="width: 850px; height: 500px" />
            </td>
        </tr>
        <tr>
            <td>
                <div id='eventText' style="width: 600px; height: 30px" />
            </td>
        </tr>
    </table>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.