Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadHTMLChart ordering of Line series over Column Series

8 Answers 259 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
V
Top achievements
Rank 1
V asked on 18 Mar 2016, 07:17 AM
I have a radhtmlchart with dynamic line series and column series and server side binding of series.My chart is not showing values of line charts if line chart is on column  chart.

8 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 22 Mar 2016, 02:13 PM
Hi Baljeet,

Can you send me an example that reproduces the issue, so I can investigate it?

As you are using server-side data binding, I suggest you to replace your actual data with some hard-coded values, so that the sample page is fully runnable on my end.

Regards,
Stamo Gochev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
V
Top achievements
Rank 1
answered on 23 Mar 2016, 06:17 AM

Hi Stamo Gochev,

I am giving source code of my demo application of my chart. Can u suggest me the solution with tooltip of line series over column series.

Aspx Page Source Code:

<telerik:RadHtmlChart runat="server" ID="ucBPViewProfile" Legend-Appearance-Position="Top"
                          PlotArea-XAxis-Step="1" PlotArea-XAxis-TitleAppearance-TextStyle-Bold="true"
                          ChartTitle-Appearance-TextStyle-Bold="true" ChartTitle-Appearance-Align="Center"
                          PlotArea-YAxis-TitleAppearance-TextStyle-Bold="true"
                          ChartTitle-Appearance-TextStyle-FontSize="8.5pt" BackColor="Transparent" Legend-Appearance-BackgroundColor="Transparent"
                          Legend-Appearance-TextStyle-FontFamily="Arial" Legend-Appearance-TextStyle-FontSize="8.5pt"
                          Legend-Appearance-TextStyle-Bold="true" ChartTitle-Appearance-TextStyle-FontFamily="Arial"
                          PlotArea-XAxis-TitleAppearance-TextStyle-FontFamily="Arial" PlotArea-XAxis-TitleAppearance-TextStyle-FontSize="8.5pt"
                          PlotArea-YAxis-TitleAppearance-TextStyle-FontFamily="Arial" PlotArea-YAxis-TitleAppearance-TextStyle-FontSize="8.5pt"
                          PlotArea-XAxis-LabelsAppearance-TextStyle-FontSize="8.5pt" PlotArea-YAxis-LabelsAppearance-TextStyle-FontSize="8.5pt"
                          PlotArea-XAxis-LabelsAppearance-TextStyle-FontFamily="Arial" PlotArea-YAxis-LabelsAppearance-TextStyle-FontFamily="Arial">
                          <ChartTitle Text="Bid Price View (O&D)">
                          </ChartTitle>
                          <PlotArea>
                              <XAxis AxisCrossingValue="0" Reversed="false" StartAngle="1" MinorTickType="None"
                                  BaseUnit="Auto" MajorTickType="None">
                                  <LabelsAppearance RotationAngle="0" Skip="0" Step="1">
                                  </LabelsAppearance>
                                  <TitleAppearance Text="">
                                  </TitleAppearance>
                                  <Items>
                                  </Items>
                                  <MajorGridLines Visible="false" />
                                  <MinorGridLines Visible="false" />
                              </XAxis>
                              <YAxis AxisCrossingValue="0" Reversed="false">
                                  <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" Step="1">
                                  </LabelsAppearance>
                                  <TitleAppearance Text="" Position="Center" RotationAngle="-90">
                                  </TitleAppearance>
                                  <MinorGridLines Visible="false" />
                              </YAxis>
                          </PlotArea>
                      </telerik:RadHtmlChart>

 

.cs Code

private void BindChart()
       {
           try
           {
 
               ucBPViewProfile.Visible = true;
                   ucBPViewProfile.PlotArea.Series.Clear();
                   ucBPViewProfile.PlotArea.XAxis.Items.Clear();
                   ucBPViewProfile.ChartTitle.Text = "Chart";
                    
                       // UserSession OUser = (UserSession)HttpContext.Current.Session["User"];
                       DataTable dt = new DataTable();
                        
                       string[] chartHeaderNames = { "A", "D" };
                       string[] selectedValues = { "A", "D" };
                       int len = selectedValues.Length;
                       Array.Resize(ref selectedValues, len + 1);
                       selectedValues[len] = "A";
                        
                        
                       foreach (var names_Head in chartHeaderNames)
                       {
                           if (selectedValues.Contains(names_Head))
                           {
                               LineSeries theoreticalData = new LineSeries();
                               ColumnSeries theoreticalCol = new ColumnSeries();
 
                               if (names_Head == "D")
                               {
                                   ucBPViewProfile.PlotArea.Series.Add(theoreticalCol);
                                   theoreticalCol.LabelsAppearance.Visible = false;
                                   theoreticalCol.Spacing = 0;
                                   theoreticalCol.Name = names_Head;
                               }
                               else
                               {
                                   ucBPViewProfile.PlotArea.Series.Add(theoreticalData);
                                   theoreticalData.LabelsAppearance.Visible = false;
                                   theoreticalData.Name = names_Head;
                               }
 
                               int i = 1;
                               int ii = 2;
                               int dataEnd = 3;
                               for (int Times = 0; Times < 5;Times++ )
                               {
                                   AxisItem axisitem = new AxisItem();
 
                                   for (int dataTimes=ii; dataTimes < dataEnd; dataTimes = dataTimes + 2)
                                   {
                                        
                                           switch (names_Head)
                                           {
                                               case "A": theoreticalData.Items.Add(Convert.ToDecimal(dataTimes));
                                                   break;
                                               case "D": theoreticalCol.Items.Add(Convert.ToDecimal(dataTimes+2));
                                                   break;
                                               default:
                                                   break;
                                           }
 
                                   }
                                   ii=ii+1;
                                   dataEnd = dataEnd + 1;
                                   if (ucBPViewProfile.PlotArea.XAxis.MaxValue <= 0 || ucBPViewProfile.PlotArea.XAxis.MaxValue == null)
                                   {
                                       if (ucBPViewProfile.PlotArea.XAxis.Items.Count < 5)
                                       {
                                           axisitem.LabelText = Convert.ToString(i);
                                           ucBPViewProfile.PlotArea.XAxis.Items.Add(axisitem);
                                       }
                                   }
                                   if (i == 5)
                                       break;
                                   i = i + 1;
                               }
 
                           }
                       }
 
                   ucBPViewProfile.Visible = true;
                
           }
           catch (Exception ex)
           {
               ucBPViewProfile.Visible = true;
           }
       }

Regards,
V

0
Stamo Gochev
Telerik team
answered on 25 Mar 2016, 12:17 PM
Column-and-Line-Series.zip
Hello,

I tried to reproduce the issue using the provided code by modifying some configurations to make it runnable, but to no avail. I cannot be sure when the BindChart() method should be called and if there are other dependencies that might be connected with the scenario in some way.

This is the reason why I created a sample page with Column and Line series that you can find as an attached file. As both their tooltips are shown as expected, can you modify this page, so that the issue can be demonstrated?

It will be very helpful if you can try to isolate the case without adding the custom logic that is currently available in the BindChart() method as this will not result in a simpler example.

I want to also point out that I checked your account subscriptions and as there are no purchases there, you should know that you can try our free trial by downloading it on the following address:

https://www.telerik.com/download-trial-file/v2/ui-for-asp.net-ajax

Our support policy states that this will give you the right to send us support tickets regarding technical questions about our products and get a response withing a fixed time limit.

Regards,
Stamo Gochev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
V
Top achievements
Rank 1
answered on 28 Mar 2016, 01:22 PM
chartimg.jpg

Hello,

Can you please provide me the solution for these type of values.

<telerik:RadHtmlChart runat="server" ID="ChartWithColumnAndLineSeries" Width="500px" Height="400px">
               <ChartTitle Text="Chart with Line and Column series">
               </ChartTitle>
               <PlotArea>
                   <Series>
                       <telerik:ColumnSeries>
                           <SeriesItems>
                               <telerik:CategorySeriesItem Y="12" />
                               <telerik:CategorySeriesItem Y="34" />
                               <telerik:CategorySeriesItem Y="20" />
                               <telerik:CategorySeriesItem Y="40" />
                               <telerik:CategorySeriesItem Y="5" />
                           </SeriesItems>
                           <TooltipsAppearance Color="White" />
                       </telerik:ColumnSeries>
                       <telerik:LineSeries>
                           <SeriesItems>
                               <telerik:CategorySeriesItem Y="45" />
                               <telerik:CategorySeriesItem Y="23" />
                               <telerik:CategorySeriesItem Y="12" />
                               <telerik:CategorySeriesItem Y="54" />
                               <telerik:CategorySeriesItem Y="71" />
                           </SeriesItems>
                           <TooltipsAppearance Color="White" />
                       </telerik:LineSeries>
                   </Series>
               </PlotArea>
               <Legend>
                   <Appearance Visible="false" />
               </Legend>
           </telerik:RadHtmlChart>
Regards,
V

0
Stamo Gochev
Telerik team
answered on 31 Mar 2016, 05:04 AM
Hello,

I have tested the provided code snippet and both the tooltips and the values of the series are shown as expected.

Can you elaborate more on the exact problem that you are facing as I suppose that it is no longer connected with the tooltips?

Regards,
Stamo Gochev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
V
Top achievements
Rank 1
answered on 01 Apr 2016, 07:46 AM

Hello,

The problem is that whenever I hovered on circle connected with yellow line which has the value marked as 12 in third column (as marked in image attached earlier), I get the value in tooltip as 20 which is of column chart and not of line chart. Can I get value 12 on hover of line series also in middle of that column.

Regards,
V

0
Stamo Gochev
Telerik team
answered on 06 Apr 2016, 05:15 AM
line-series-tooltip.png
Hello,

As I have already mentioned, the example that I provided works as expected. The tooltip of the line series is shown when you hover the exact marker of its series item (the circle) and this can be seen in the attached screenshot.

I want to mention that I am testing with the latest version of our product (2016.1.225). Since I see that you have downloaded a free trial, you should be able to test the scenario as well.

Regards,
Stamo Gochev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Accepted
Stamo Gochev
Telerik team
answered on 06 Apr 2016, 05:16 AM
Hello,

As I have already mentioned, the example that I provided works as expected. The tooltip of the line series is shown when you hover the exact marker of its series item (the circle) and this can be seen in the attached screenshot.

I want to mention that I am testing with the latest version of our product (2016.1.225). Since I see that you have downloaded a free trial, you should be able to test the scenario as well.

Regards,
Stamo Gochev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Chart (HTML5)
Asked by
V
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
V
Top achievements
Rank 1
Share this question
or