jQWidgets Forums

Tagged: chart, click, event, jqxChart

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

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

Author

Click events on stacked column series Posts

October 11, 2012 at 4:15 pm Click events on stacked column series #9303

sushanth009

Member

Hello Peter,

Can I use the click event in the stacked column series such that when a series is clicked a separate event is fired..

Such that when you click on Swimming handle an event , when cycling is clicked handle a separate event.

Thanks
Peter

October 12, 2012 at 7:06 am Click events on stacked column series #9328

Dimitar

Participant

Hello sushanth009,

Here is a solution:

<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <style type="text/css">
        .jqx-chart-title-text
        {
            overflow: </style>
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.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,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                        }
                    ]
            };
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
            // get the series groups of an existing chart
            var groups = $('#chartContainer').jqxChart('seriesGroups');
            // add a click event handler function to the 1st group    
            if (groups.length > 0) {
                groups[0].click = function (e) {
                    if (e.serie.dataField == "Keith") {
                        alert("Custom event for Keith");
                    } else if (e.serie.dataField == "Erica") {
                        alert("Custom event for Erica");
                    } else if (e.serie.dataField == "George") {
                        alert("Custom event for George");
                    };
                };
                // update the group
                $('#chartContainer').jqxChart({ seriesGroups: groups });
            }
        });
    </script>
</head>
<body style="background: white;">
    <div id='chartContainer' style="width: 600px; height: 400px" />
</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.