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

Bar chart drill down with additional arguments

7 Answers 85 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
nav100
Top achievements
Rank 1
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

Sort by
0
nav100
Top achievements
Rank 1
answered on 18 Nov 2013, 03:51 PM
Telerik experts, Could you please help?
0
Maxson Junior
Top achievements
Rank 2
answered on 19 Nov 2013, 01:32 AM
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>
0
nav100
Top achievements
Rank 1
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();
               }
0
Maxson Junior
Top achievements
Rank 2
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!
0
nav100
Top achievements
Rank 1
answered on 21 Nov 2013, 02:57 AM
Thanks Maxson. Telerik experts, Could you please suggest any solution?
0
Luigi Gaeta
Top achievements
Rank 1
answered on 06 Nov 2015, 02:15 PM
I'm in a very similar situation. Is there a solution provided?
0
Luigi Gaeta
Top achievements
Rank 1
answered on 06 Nov 2015, 02:39 PM

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

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

Tags
Chart (HTML5)
Asked by
nav100
Top achievements
Rank 1
Answers by
nav100
Top achievements
Rank 1
Maxson Junior
Top achievements
Rank 2
Luigi Gaeta
Top achievements
Rank 1
Share this question
or