Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo UI Chart - Click Events

Does anyone know how to create an on-click event for the Kendo-UI data viz bar graphs?

I have this graph inside a kendo window, and when you click on one of the bars, I need to swap out the content of the window.

I can't seem to find the right element to attach the click to.....

The kendo code......

 <script> // Kendo Chart
            function createChart() {
                $("#chart").kendoChart({
                    title: {
                        text: "Memberships by dddd- dddd"
                    },
                    legend: {
                        visible: true
                    },
                    seriesDefaults: {
                        type: "bar"
                    },
                    series: [{
                        name: "dddd",
                        data: [123, 42, 76, 344],
                        color: '#0A9ECC'
                    }, {
                        name: "dddd",
                        data: [76, 970, 23, 14],
                        color: '#CE1D1D'
                    },
                    {
                        name: "ddddd",
                        data: [144, 44, 264, 647],
                        color: '#d2b723'
                    }],
                    valueAxis: {
                        max: 1000,
                        line: {
                            visible: false
                        },
                        minorGridLines: {
                            visible: true
                        }
                    },
                    categoryAxis: {
                        categories: ["Membership 1", "Membership 2", "Membership 3", "Membership 4"],
                        majorGridLines: {
                            visible: false
                        }
                    },
                    tooltip: {
                        visible: true,
                        template: "#= series.name #: #= value #"
                    }
                });
            }
            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>
like image 739
Mark Avatar asked Feb 09 '14 15:02

Mark


1 Answers

I think you are looking for the seriesClick event.

$(".k-chart")
  .data("kendoChart")
  .bind("seriesClick", function (e) { console.log(e); })
like image 176
CodingWithSpike Avatar answered Oct 20 '22 07:10

CodingWithSpike