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

Bar chart drill down with additional arguments

7 Answers 176 Views

Chart (HTML5)

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

nav100 asked on 15 Nov 2013, 09:39 PM

I bound the Datasource with 3 columns to Bar chart.
Data Source
----------------
tempID      col_Name       Total
---------------------------------
10                test1        100
20               test2         200

I bound this Data Source to Bar chart. I display BarChart using 'col_Name' and 'Count'. Now I would like to pass tempID as a parameter to Drill down. How can I do this? I don't see any examples online.

Here is my code.

<telerik:RadCodeBlock ID="codeBlock" runat="server">

<script type="text/javascript">

function OnClientSeriesClicked(sender, args) {

if (args.get_seriesName() != "Months") $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(args.get_category());

}

</script>

                            <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px" Height="500px"
                                Skin="Metro" OnClientSeriesClicked="OnClientSeriesClicked">
                                <PlotArea>
                                    <Appearance>
                                        <FillStyle BackgroundColor="Transparent" />
                                    </Appearance>
                                    <Series>
                                        <telerik:BarSeries Name="Total" DataFieldY="count">
                                            <TooltipsAppearance Color="White" DataFormatString="{0}"></TooltipsAppearance>
                                            <LabelsAppearance Visible="true">
                                            </LabelsAppearance>
                                        </telerik:BarSeries>
                                    </Series>
                                    <XAxis DataLabelsField="col_name">
                                    </XAxis>
                                    <YAxis>
                                        <LabelsAppearance DataFormatString="{0}">
                                        </LabelsAppearance>
                                    </YAxis>
                                </PlotArea>
                                <Legend>
                                    <Appearance Position="Bottom">
                                    </Appearance>
                                </Legend>
                                <ChartTitle Text="Total">
                                </ChartTitle>
                            </telerik:RadHtmlChart>

Code behind
-----------------------------------

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

                    myDataTable4 = BL.GetSummaryByID(tempID);

                    RadHtmlChart1.PlotArea.XAxis.DataLabelsField = "Quarter";
                    RadHtmlChart1.PlotArea.Series[0].DataFieldY = "Rev";
                    RadHtmlChart1.PlotArea.Series[0].Name = "Quarters";
                    RadHtmlChart1.DataSource = myDataTable4;

                    RadHtmlChart1.DataBind();

}

7 Answers, 1 is accepted

answered on 19 Nov 2013, 03:05 PM

Thanks for the reply. It was typo mistake. I am using "Total" for datafield y. But I would like to get tempID to retrieve drill down datasource. This 'tempID' is not in X or DataFieldY. How can I pass tempID as a parameter?

<telerik:BarSeries Name="Total" DataFieldY="Total">

<TooltipsAppearance Color="White" DataFormatString="{0}"></TooltipsAppearance>

<LabelsAppearance Visible="true">

</LabelsAppearance>

</telerik:BarSeries>

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

myDataTable4 = BL.GetSummaryByID(tempID);


                    RadHtmlChart1.PlotArea.XAxis.DataLabelsField = "Quarter";
                    RadHtmlChart1.PlotArea.Series[0].DataFieldY = "Rev";
                    RadHtmlChart1.PlotArea.Series[0].Name = "Quarters";
                    RadHtmlChart1.DataSource = myDataTable4;

                    RadHtmlChart1.DataBind();

}

answered on 20 Nov 2013, 01:39 AM

I am not very sure clienttemplate in http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/clienttemplates/defaultcs.aspx is suitable for you or not.

I had faced the similar problem. Here, I give you two suggestions.
1.

get_value()
get_category()
get_seriesType()
get_seriesName()
get_seriesData()

In Demo, HTMLChart only provide these 5 parameters that can be transferred to js. I suggest you add the (tempid) in the category or seriesName and then play tricks in js. Here is the first suggestion.
2.
The second is that if the chart only need to be drill-down 1 time. I suggest you use OnClientSeriesClicked function to open the modal window to show the drill-down chart.

Perhaps these two suggestions are not suitable for you. Now, just wait for the expert to explain for us!