Drill Down report pragmatically in VB

2 Answers 217 Views

Chart (HTML5)

2 Answers, 1 is accepted

answered on 06 Jul 2021, 09:52 AM

Hello Revanthkumar,

You can implement a drill-down functionality by handling the OnSeriesClick client-side event of the chart, initiating a manual AJAX request in it, where to update the chart with its new data. Detailed steps on how to achieve this are available here:

https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/how-to/implementing-drill-down-functionality

You can also see it in action in this live demo:

https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/how-to/implementing-drill-down-functionality

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Revanthkumar

commented on 07 Jul 2021, 10:03 AM

Thanks for your response,
our charts are completly dynamic and created programatically. can you help me how i can genarate an OnSeriesClick event programatically please

all the examples were just explaning about the static chart

Vessy

commented on 07 Jul 2021, 03:39 PM

Hi Revanthkumar,

The programmatic creation of the chart series follows the same structure as the static ones, you just need to access the public members from the class with dots. For example, you ca attach the OnSeriesClick event like follows:

protected void Page_Load(object sender, EventArgs e)
{
RadHtmlChart scatterChart = new RadHtmlChart();
scatterChart.ID = "ScatterChart";
scatterChart.Width = Unit.Pixel(680);
scatterChart.Height = Unit.Pixel(400);
scatterChart.ClientEvents.OnSeriesClick = "onChartSeriesClick";

Where the onChartSeriesClick function is defined on the client-side:

Revanthkumar

commented on 08 Jul 2021, 04:23 AM

Thanks much for your response again.

all the drill down login in the examples were built on the RadAjaxManager1_AjaxRequest. is it really mandatory to add the AjaxManager or we can directly use an ajax call to call a method in server side method. it will be very helpfull for me if you give me an end to end solution for a dynamic chart drill down.

thanksyou so much

Revanthkumar

commented on 08 Jul 2021, 11:56 AM

i tried ,
was able to genarate the event and event also triggerring the server side function
but in that function i tried to bind the new sourse to chart
not sure the chart was not genarating with the new data sourse its still showing me old data only.

please help me i took the screen shots to attach here but am unable to do that.

Vessy

commented on 12 Jul 2021, 07:38 AM

Hi Revanthkumar, yes - the AjaxManager is mandatory in order to update the data of the chart on the server-side without making a full PostBack. Can you confirm that you have Ajaxmanager on the page? Can you share the setup that you have when the data is not bound properly?

Revanthkumar

commented on 12 Jul 2021, 02:44 PM

i cant post any screen shot here i will try to post the code here

the problem i was facing now was the second pie chart genarating when i click on the pie series second time.
but first time also the the clow touching the RadButton1_Click event but not sure why its not genarating my drill down chart in the first click
please help

Code used in server side:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
RadAjaxManager.GetCurrent(Me).EnableAJAX = True
if Not IsPostBack then
Call piechart()
End If
End Sub

Private Sub piechart()
Dim Piechart As New RadHtmlChart()
Piechart.ID = "Piechart1"
Piechart.ChartTitle.Text = "Piechart1"
Piechart.DataSource = GetData()
Piechart.DataBind()
Dim kpi As PieSeries = New PieSeries()
kpi.DataFieldY = "EMPLOYEECOUNT"
kpi.NameField = "IDENTITYTYPEDESC"
kpi.LabelsAppearance.Visible = True
kpi.StartAngle = 90
kpi.ExplodeField = True
kpi.TooltipsAppearance.Color = Drawing.Color.White
kpi.LabelsAppearance.ClientTemplate = "#=dataItem.IDENTITYTYPEDESC#: #= dataItem.EMPLOYEECOUNT#"
kpi.LabelsAppearance.Position = HtmlChart.PieAndDonutLabelsPosition.OutsideEnd
Piechart.ClientEvents.OnSeriesClick = "OnClientSeriesClicked_1"
Piechart.PlotArea.Series.Add(kpi)
HtmlChartHolder1.Controls.Add(Piechart)
End Sub

Private Sub piechartdrill()
Dim Piechart2 As New RadHtmlChart()
Piechart2.ID = "Piechart2"
Piechart2.ChartTitle.Text = "Piechart2"
Piechart2.DataSource = GetData2()
Piechart2.DataBind()
Dim kpi1 As PieSeries = New PieSeries()
kpi1.DataFieldY = "EMPLOYEECOUNT"
kpi1.NameField = "GENDER"
kpi1.LabelsAppearance.ClientTemplate = "#=dataItem.GENDER#: #= dataItem.EMPLOYEECOUNT#"
kpi1.LabelsAppearance.Position = HtmlChart.PieAndDonutLabelsPosition.OutsideEnd
'Piechart.ClientEvents.OnSeriesClick = "onChartSeriesClick2"
For Each item As RadHtmlChart In HtmlChartHolder1.Controls.OfType(Of RadHtmlChart)()
HtmlChartHolder1.Controls.Remove(item)
Next
Piechart2.PlotArea.Series.Add(kpi1)
HtmlChartHolder1.Controls.Add(Piechart2)
End Sub

Protected Sub RadButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
piechartdrill()
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "repaintCharts();", True)
End Sub

<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<div style="width: 100%;">
<table style="width: 100%;">
<tr>
<td style="width: 50%;">
<asp:Panel ID="HtmlChartHolder1" runat="server" Style="width: 100%; height: 450px;">
</asp:Panel>
<asp:DropDownList ID="ddldrill" runat="server">
<asp:ListItem Text=" " Value=" " Selected="True"></asp:ListItem>
<asp:ListItem Text="Gender" Value="SEX"></asp:ListItem>
<asp:ListItem Text="Identity Type" Value="IDT"></asp:ListItem>
<asp:ListItem Text="Job Title" Value="DES"></asp:ListItem>
<asp:ListItem Text="Employee Type" Value="EMT"></asp:ListItem>
<asp:ListItem Text="Job Grade" Value="SSC"></asp:ListItem>
<asp:ListItem Text="Pay Category" Value="CAT"></asp:ListItem>
</asp:DropDownList>
</td>
<td style="width: 50%;">
<asp:Panel ID="HtmlChartHolder2" runat="server" Style="width: 100%; height: 450px;">
</asp:Panel>

</td>
</tr>
<%--First panel Block--%>
</table>

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel7">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadButton1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Piechart1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function OnClientSeriesClicked_1(args) {
var btn1 = $find("<%=RadButton1.ClientID%>");
btn1.set_commandName(args.category);
$find('<%= RadAjaxManager2.ClientID %>').ajaxRequestWithTarget("RadButton1", "");
}
</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel7" runat="server" Skin="Vista" Height="300" Width="500">
</telerik:RadAjaxLoadingPanel>
<div style="display: none;">
<telerik:RadButton ID="RadButton1" runat="server" Text="Button1" OnClick="RadButton1_Click" />
</div>
</div>
</form>

Vessy

commented on 14 Jul 2021, 05:32 PM

Hi Revanthkumar,

The second chart is created with different ID thus it is not updated when the series of the first one are clicked. Adding the charts wrapper to the controls updated by RadButton1 allowed me to render the second chart successfully:

               <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel7">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadButton1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="HtmlChartHolder1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

Revanthkumar

commented on 28 Jul 2021, 06:15 AM

Hi vessy,

the above change works for me exactly.

but as all my controls were dynamic. i need to update my ajax settings from back end.
i was trying to do something like below but it was again drilling down to second chant on my second click.

below is the code line i was using for the same above ajax tools.

RadAjaxManager2.AjaxSettings.AddAjaxSetting(RadButton1, HtmlChartHolder1, nothing)

Vessy

commented on 29 Jul 2021, 12:12 PM

Hi Revanthkumar,

The provided setting looks proper, can you confirm that it is not applied in Page_Init as this would be too early? you can find more details on how to add properly ajax settings on the server-side here:

https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/how-to/add-ajaxsettings-programmatically

Revanthkumar

commented on 02 Aug 2021, 05:38 AM

hi vessy,

we are not doing it in page_init.
we are doing it in page load after we load the chart.
below is the method

Private Sub piechart()
Dim Piechart As New RadHtmlChart()
Piechart.ID = "Piechart1"
Piechart.Width = Unit.Percentage(92%)
Piechart.Height = Unit.Pixel(450)
Piechart.ChartTitle.Text = "Piechart1"
Piechart.ChartTitle.Appearance.Align = HtmlChart.ChartTitleAlign.Left
Piechart.ChartTitle.Appearance.Position = HtmlChart.ChartTitlePosition.Top
Piechart.ChartTitle.Appearance.TextStyle.Bold = "True"
Piechart.ChartTitle.Appearance.TextStyle.FontSize = 12
Piechart.DataSource = GetData()
Piechart.DataBind()
Dim kpi As PieSeries = New PieSeries()
kpi.DataFieldY = "EMPLOYEECOUNT"
kpi.NameField = "IDENTITYTYPEDESC"
kpi.ExplodeField = "IDENTITYTYPEDESC"
kpi.LabelsAppearance.Visible = True

kpi.StartAngle = 90
kpi.ExplodeField = True
kpi.TooltipsAppearance.Color = Drawing.Color.White
kpi.LabelsAppearance.ClientTemplate = "#=dataItem.IDENTITYTYPEDESC#: #= dataItem.EMPLOYEECOUNT#"
kpi.LabelsAppearance.Position = HtmlChart.PieAndDonutLabelsPosition.OutsideEnd
Piechart.ClientEvents.OnSeriesClick = "OnClientSeriesClicked_1"
RadAjaxManager2.AjaxSettings.AddAjaxSetting(RadButton1, HtmlChartHolder1, nothing)
Piechart.PlotArea.Series.Add(kpi)
HtmlChartHolder1.Controls.Add(Piechart)

End Sub

and this we are calling in the page load.

answered on 04 Aug 2021, 05:30 PM

Hi Revanthkumar,

Can you try to call directly the ajaxRequest() method moving the logic from the button1 click handler to the onAjaxRequest one?

Make sure as well that the dynamic AJAX settings are set outside an IsPostBack statement (if used):

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

        <div style="width: 100%;">
            <table style="width: 100%;">
                <tr>
                    <td style="width: 50%;">
                        <asp:Panel ID="HtmlChartHolder1" runat="server" Style="width: 100%; height: 450px;">
                        </asp:Panel>
                        <asp:DropDownList ID="ddldrill" runat="server">
                            <asp:ListItem Text=" " Value=" " Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Gender" Value="SEX"></asp:ListItem>
                            <asp:ListItem Text="Identity Type" Value="IDT"></asp:ListItem>
                            <asp:ListItem Text="Job Title" Value="DES"></asp:ListItem>
                            <asp:ListItem Text="Employee Type" Value="EMT"></asp:ListItem>
                            <asp:ListItem Text="Job Grade" Value="SSC"></asp:ListItem>
                            <asp:ListItem Text="Pay Category" Value="CAT"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td style="width: 50%;">
                        <asp:Panel ID="HtmlChartHolder2" runat="server" Style="width: 100%; height: 450px;">
                        </asp:Panel>

                    </td>
                </tr>
                <%--First panel Block--%>
            </table>

            <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel7" OnAjaxRequest="RadAjaxManager2_AjaxRequest">
            </telerik:RadAjaxManager>

            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    function OnClientSeriesClicked_1(args) {
                        <%--var btn1 = $find("<%=RadButton1.ClientID%>");
                        btn1.set_commandName(args.category);--%>
                        $find('<%= RadAjaxManager2.ClientID %>').ajaxRequest("RadButton1");
                    }

                    function repaintCharts() {

                    }
                </script>
            </telerik:RadCodeBlock>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel7" runat="server" Skin="Vista" Height="300" Width="500">
            </telerik:RadAjaxLoadingPanel>
            <div style="display: none;">
                <%--<telerik:RadButton ID="RadButton1" runat="server" Text="Button1" OnClick="RadButton1_Click" />--%>
            </div>
        </div>
    </form>
</body>
</html>

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        RadAjaxManager.GetCurrent(Me).EnableAJAX = True
        If Not IsPostBack Then
            Call piechart()
        End If

        RadAjaxManager2.AjaxSettings.AddAjaxSetting(RadAjaxManager2, HtmlChartHolder1)

    End Sub

    Private Sub piechart()
        Dim Piechart As New RadHtmlChart()
        Piechart.ID = "Piechart1"
        Piechart.Width = Unit.Percentage(92%)
        Piechart.Height = Unit.Pixel(450)
        Piechart.ChartTitle.Text = "Piechart1"
        Piechart.ChartTitle.Appearance.Align = HtmlChart.ChartTitleAlign.Left
        Piechart.ChartTitle.Appearance.Position = HtmlChart.ChartTitlePosition.Top
        Piechart.ChartTitle.Appearance.TextStyle.Bold = "True"
        Piechart.ChartTitle.Appearance.TextStyle.FontSize = 12
        Piechart.DataSource = GetData()
        Piechart.DataBind()
        Dim kpi As PieSeries = New PieSeries()
        kpi.DataFieldY = "EMPLOYEECOUNT"
        kpi.NameField = "IDENTITYTYPEDESC"
        kpi.ExplodeField = "IDENTITYTYPEDESC"
        kpi.LabelsAppearance.Visible = True

        kpi.StartAngle = 90
        kpi.ExplodeField = True
        kpi.TooltipsAppearance.Color = Drawing.Color.White
        kpi.LabelsAppearance.ClientTemplate = "#=dataItem.IDENTITYTYPEDESC#: #= dataItem.EMPLOYEECOUNT#"
        kpi.LabelsAppearance.Position = HtmlChart.PieAndDonutLabelsPosition.OutsideEnd
        Piechart.ClientEvents.OnSeriesClick = "OnClientSeriesClicked_1"

        Piechart.PlotArea.Series.Add(kpi)
        HtmlChartHolder1.Controls.Add(Piechart)



    End Sub
    Private Sub piechartdrill()
        Dim Piechart2 As New RadHtmlChart()
        Piechart2.ID = "Piechart2"
        Piechart2.ChartTitle.Text = "Piechart2"
        Piechart2.DataSource = GetData2()
        Piechart2.DataBind()
        Dim kpi1 As PieSeries = New PieSeries()
        kpi1.DataFieldY = "EMPLOYEECOUNT"
        kpi1.NameField = "GENDER"
        kpi1.LabelsAppearance.ClientTemplate = "#=dataItem.GENDER#: #= dataItem.EMPLOYEECOUNT#"
        kpi1.LabelsAppearance.Position = HtmlChart.PieAndDonutLabelsPosition.OutsideEnd
        'Piechart.ClientEvents.OnSeriesClick = "onChartSeriesClick2"
        For Each item As RadHtmlChart In HtmlChartHolder1.Controls.OfType(Of RadHtmlChart)()
            HtmlChartHolder1.Controls.Remove(item)
        Next
        Piechart2.PlotArea.Series.Add(kpi1)
        HtmlChartHolder1.Controls.Add(Piechart2)
    End Sub

    Private Function GetData() As Object
        Dim dt As DataTable = New DataTable()
        dt.Columns.Add("EMPLOYEECOUNT")
        dt.Columns.Add("IDENTITYTYPEDESC")
        dt.Rows.Add(51, "type 1")
        dt.Rows.Add(43, "type 2")
        dt.Rows.Add(32, "type 3")
        dt.Rows.Add(24, "type 4")
        Return dt
    End Function

    Private Function GetData2() As Object
        Dim dt As DataTable = New DataTable()
        dt.Columns.Add("EMPLOYEECOUNT")
        dt.Columns.Add("GENDER")
        dt.Rows.Add(15, "male")
        dt.Rows.Add(14, "female")
        dt.Rows.Add(13, "female")
        dt.Rows.Add(12, "male")
        Return dt
    End Function

    Protected Sub RadAjaxManager2_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)
        piechartdrill()
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "repaintCharts();", True)

    End Sub

Regards,
Vessy
Progress Telerik

Revanthkumar

commented on 05 Aug 2021, 02:06 PM

hi Vessy,

I did exactly as you explained but it's not loading the drill-down report.

earlier when I added the button I can load the drill-down report at least on the second click.

please help.

Vessy

commented on 10 Aug 2021, 06:33 AM

DrillDownChart.zip

Hi Revanthkumar,

For convenience, I am attaching a runnable project containing the setup from my previous reply that functions properly at my end. Can you test it and see if it is working on your side as well?

Revanthkumar

commented on 16 Aug 2021, 05:34 AM

hi Vessy,

Thanks for your sample application. that works for me but I have a doubt here.

the button was already commented but why we are mentioning inside the

Can you please explain to me what exactly we are trying to do here?

Revanthkumar

commented on 18 Aug 2021, 05:48 AM | edited

2.png

hi,
and also I was trying for the drill-down report in a sample application our page design won't look so simple we have a grid that contains a max of 8 charts. so in this case how we can distinguish between chart to chart. please advice ..

Vessy

commented on 18 Aug 2021, 03:39 PM

Hello Revanthkumar,

The string passed to the ajaxRequest() is just an argument, I passed the Id of the button for the testing purposes, but you can freelly remove it. You can use this argument, though, in order to pass something specific for the clicked chart (like the title) and to distinguish the charts depending on that on the server.

For example:

                    function OnClientSeriesClicked_1(args) {
                        var chart = args.sender;
                        var title = chart.options.title;

                        $find('<%= RadAjaxManager2.ClientID %>').ajaxRequest(title);
                    }

    Protected Sub RadAjaxManager2_AjaxRequest(sender As Object, e As AjaxRequestEventArgs)
        Dim titleOfClickedChart As String = e.Argument
        If titleOfClickedChart = "Trainings per month" Then
            piechartdrill()
        End If
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "repaintCharts();", True)
    End Sub