How to Generate Chart by a radio button call

See more:

Javascript

HTML5

Hi,

I have a web page with a sales chart generated by clicking on radio buttons.

$(function() {
        $("[id*=rbtnZone]").click(function() {
            var row = $(this).closest('tr');
            var branchId = $(row).find('[id*=hfBranchId]').val();
            var rbtlSales = $("#<%= rbtlSales.ClientID%>");
            var selectedValue = rbtlSales.find("input:checked").val();
            

            $.ajax({
                url: '<%=ResolveUrl("~/Corporate/Sales.aspx/GetZoneData") %>',
                data: "{'rbtlSales':'" + selectedValue + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    var labels = [];
                    var datas = [];
                    $.each(data.d, function(i, item) {
                        var l = item.split('-')[0];
                        var d = item.split('-')[1];
                        var dd = d | 0;
                        labels.push(l);
                        datas.push(dd);
                    });

                    var barChartLocData =
            {
                labels: labels,
                datasets:
                [
                    {
                        fillColor: "indianred",
                        highlightFill: "red",
                        data: datas
                    }
                ]
            };
                    var ctx = document.getElementById("canvas").getContext("2d");
                    new Chart(ctx).HorizontalBar(barChartLocData, {
                        responsive: true,
                        scaleFontColor: "#000",
                        showTooltips: false,
                        onAnimationComplete: function() {
                            var ctx = this.chart.ctx;
                            ctx.font = this.scale.font;
                            ctx.fillStyle = this.scale.textColor
                            ctx.textAlign = "right";
                            ctx.textBaseline = "center";
                            this.datasets.forEach(function(dataset) {
                                dataset.bars.forEach(function(bar) {
                                    ctx.fillText(bar.value, bar.x + 20, bar.y);
                                });
                            });
                        }
                    });
                },
                error: function(response) {
                },
                failure: function(response) {
                }
            });
        });
    });

The HTML is given below

<asp:RadioButtonList ID="rbtlSales" runat="server" Font-Bold="True" CellPadding="1" RepeatLayout="Flow">
    <asp:ListItem Value="today" Selected="True">Today's Sales</asp:ListItem>
    <asp:ListItem Value="yesterday">Yesterday's Sales</asp:ListItem>
    <asp:ListItem Value="mtd">MTD</asp:ListItem>
    <asp:ListItem Value="prevmonth">Previous Month Sales</asp:ListItem>
    <asp:ListItem Value="ytd">YTD</asp:ListItem>
</asp:RadioButtonList>

<asp:RadioButton ID="rbtnZone" runat="server" Text="Zone Wise" GroupName="rb1" />

Using this Second Radio button click I am generating the chart... Now I want to generate the chart on clicking the Radio button list also... How to do that... The chart gets generated when I click on the rbtnZone... Then I have to change the Radio button list value and again click on the radio button to generate the next chart... I want to avoid that and generate the chart on clicking the List also...

Regards,
Sajin