This is a migrated thread and some comments may be shown as answers.

Passing multiple parameters to kendoChart seriesClick

2 Answers 337 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 28 Dec 2012, 09:11 PM
I'd like to pass multiple parameters to the seriesClick event handler, but unsure how to handle the default parameters
The following works
...
seriesClick: onSeriesClick
function onSeriesClick(e) {
    var currentDate = new Date(2012, 0, 1);
    currentDate.setMonth(currentDate.getMonth() + e.category - 1);
however, when I need to pass in the additional parameter fails as it doesn't recognize e
 ...
seriesClick: onSeriesClick(e, contentItem),
function onSeriesClick(e, contentItem) {
    var currentDate = new Date(2012, 0, 1);
    currentDate.setMonth(currentDate.getMonth() + e.category - 1);

2 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 31 Dec 2012, 09:41 AM
Hi,

 onSeriesClick(e, contentItem) will actually execute the onSeriesClick function and the result would be used as event handler.

Basically the event handler can only have a single argument - the one which the widget provides when the event is raised.

Could you clarify what is currentItem in this case? How is it obtained? Can't you get it in the onSeriesClick function?

Kind regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 1
answered on 03 Jan 2013, 11:22 PM
Hi Atanas,
This is a LightSwitch HTML Client demo I've been working on.
Turned out it was a javascript scoping issue I wasn't familiar with. I didn't realize I could add the onSeriesClick in the same function body the KendoUI control was created.
By defining onSeriesClick within the myapp.Location_View.LocationReportContent_render function, I then had access to contentItem within the onSeriesClick function
myapp.Location_View.LocationReportContent_render = function (element, contentItem) {
    // A <div> to hold our report
    var locationSeatingChartContainer = $('<div/>');
 
    var customersPerWeekContainer = $('<div/>');
    customersPerWeekContainer.appendTo(locationSeatingChartContainer);
 
    var customersPerMonthContainer = $('<div/>');
    customersPerMonthContainer.appendTo(locationSeatingChartContainer);
 
    locationSeatingChartContainer.appendTo($(element));
 
    DisplayMonthlyChart();
 
    // show the monthly chart based on the current dates
    DisplayMonthlyChart();
 
    function DisplayMonthlyChart() {
        //setup the URI to the report, with the Location Parameter
        var reportsAPI = "../api/Reports/?report=GetSeatedGuestsPerTableTypePerLocationByMonth&Id=" + contentItem.screen.Location.Location_Id +
            "&beginDate=" + contentItem.screen.beginDateRange.toJSON() +
            "&endDate=" + contentItem.screen.endDateRange.toJSON();
 
 
        // Add a Kendo UI BarChart
        customersPerMonthContainer.kendoChart({
            theme: $(document).data("kendoSkin") || "black",
            dataSource: {
                transport: {
                    read: {
                        url: reportsAPI,
                        dataType: "json"
                    }
                },
                group: {
                    field: "TableType_Id"
                }
            },
            title: {
                text: "Customers Per Month, By Table Type"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",
                labels: {
                    visible: true,
                    format: "{0:n0}"
                }
            },
            // hook up the Click event to drill into weekly reports
            seriesClick: onSeriesClick,
            series: [{
                field: "Seats",
                name: "",
                colorField: "userColor"
            }],
            valueAxis: {
                labels: {
                    format: "{0}"
                }
            },
            //TODO: change format to include month/year Jan/08 and rotated vertically for space
            categoryAxis: {
                field: "Month",
                labels: {
                    format: "{0:n0}"
                }
            }
 
        });
        function onSeriesClick(e) {
            var currentDate = new Date(2012, 0, 1);
            currentDate.setMonth(currentDate.getMonth() + e.category - 1);
            var endDate = new Date(currentDate.getFullYear(),
                                    currentDate.getMonth() + 1,
                                    currentDate.getDate(),
                                    currentDate.getHours());
 
            showWeeklyChart(contentItem.screen.Location.Location_Id,
                currentDate,
                endDate,
                contentItem);
        }
    }
};
Tags
Charts
Asked by
Steve
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Steve
Top achievements
Rank 1
Share this question
or