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

RadHTMLChart ordering of Line series over Column Series

8 Answers 313 Views

Chart (HTML5)

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

8 Answers, 1 is accepted

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

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.

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

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.

Accepted