Add Event Click on Kendo Pie Chart & Radar Chart

Untuk Pie Chart tambakan code berikut pada saat init kendo chart :

seriesClick: function (e) {
      //TO DO: trigger function for detail
      gotoDetailPieChart(e.category);
}
chartBusinessProcess = $("#chartBu").kendoChart({
                dataSource: dataSource,
                theme: "metro",
                legend: {
                    visible: true,
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "pie",
                    labels: {
                        visible: true,
                        background: "transparent",
                        template: "#= category #: #= kendo.format(\"{0:p2}\",value)#"
                    }
                },
                series: [{
                    field: "@nameof(FieldModel.Percent)",
                    categoryField: "@nameof(FieldModel.Category)",
                    overlay: {
                        gradient: "sharpBevel"
                    },
                }],
                tooltip: {
                    visible: true,
                    template: "#= category #: \n #=dataItem.Value# - #= kendo.format(\"{0:p2}\",value)#"
                },
                seriesClick: function (e) {
                    //TO DO: trigger function for detail
                    gotoDetailPieChart(e.category);
                }
            }).data("kendoChart");

Sedangkan untuk radar chart :

axisLabelClick: function (e) {
      //TO DO: trigger function for detail
      gotoDetailRadarChart(e.text);
}
chartIso = $("#chartIso").kendoChart({
                dataSource: dataSource,
                theme: "metro",
                legend: {
                    visible: true,
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "radarLine",
                    labels: {
                        visible: false,
                    }
                },
                series: [{
                    field: "@nameof(FieldModel.Value)",
                    categoryField: "@nameof(FieldModel.Category)",
                }],
                tooltip: {
                    visible: true,
                    template: "#= category #: \n #= kendo.format(\"{0:N0}\",value)#"
                },
                axisLabelClick: function (e) {
                    //TO DO: trigger function for detail
                    gotoDetailRadarChart(e.text);
                }
            }).data("kendoChart");

Randy Kurnia has written 11 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>