Bar chart drill down with additional arguments

8 posts, 0 answers
  1. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 15 Nov 2013 Link to this post

    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();
                   }

  2. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 18 Nov 2013 Link to this post

    Telerik experts, Could you please help?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maxson Junior
    Maxson Junior avatar
    12 posts
    Member since:
    Oct 2013

    Posted 18 Nov 2013 Link to this post

    Hello, nav100


    For your datasource, it only contains col_name,total and tempid.
    Only these three names can be used in datafieldy
    <telerik:BarSeries Name="Total" DataFieldY="Total">
     <TooltipsAppearance Color="White" DataFormatString="{0}"></TooltipsAppearance>
     <LabelsAppearance Visible="true">
     </LabelsAppearance>
      </telerik:BarSeries>
  5. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 19 Nov 2013 Link to this post

    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();
                   }
  6. Maxson Junior
    Maxson Junior avatar
    12 posts
    Member since:
    Oct 2013

    Posted 19 Nov 2013 Link to this post

    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!
  7. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 20 Nov 2013 Link to this post

    Thanks Maxson. Telerik experts, Could you please suggest any solution?
  8. Luigi Gaeta
    Luigi Gaeta avatar
    16 posts
    Member since:
    Jul 2005

    Posted 06 Nov 2015 Link to this post

    I'm in a very similar situation. Is there a solution provided?
  9. Luigi Gaeta
    Luigi Gaeta avatar
    16 posts
    Member since:
    Jul 2005

    Posted 06 Nov 2015 Link to this post

    In older RadChart we can use "YValue2", "YValue3" and "YValue4" fields.

    What's the improvement in this "responsive" vision of HtmlChart?

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017