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

Visible labels

8 Answers 171 Views

Chart

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

This question is locked. New answers and comments are not allowed.

8 Answers, 1 is accepted

answered on 20 Jan 2017, 10:23 AM

Hello Tsvyatko,

of course! I'm using telerik:RadHtmlChart with ScatterLines.

And for the old one I'm using System.Web.UI.DataVisualizartion.Charting.Chart

In the old one it's easy to create these labels that'

workingSerie.Label = FieldHelper.OutputString(FieldType.SoundPower, ventData.Data.WorkingPoint.SoundPower);
workingSerie.LabelBackColor = Color.FromArgb(18, 112, 184);
workingSerie.LabelForeColor = Color.White;

workingSerie.Points.Add(new DataPoint(Math.Round(ventData.Data.WorkingPoint.AirVolume),Math.Round(ventData.Data.WorkingPoint.PressureLoss))); workingSerie.Points.Last()["LabelStyle"] = "Top";

Which is what I would like to do in your diagram.

answered on 20 Jan 2017, 05:44 PM

Hi Jens,

Thank you for the additional information, it appears you're using UI for ASP.NET AJAX and not UI for Windows Universal (you accidentally posted to the UI for Windows Universal forums). I have gone ahead and changed the topic of this thread for you to RadHtmlChart for UI for ASP.NET AJAX .

So that someone can help you further, can you please reply back with the code you're currently using to create the RadHtmlChart you have in this screenshot?

Thank you.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

Leverage your XAML skill to create beautiful Windows 10 apps for phone, tablet and desktop. Try UI for Universal Windows Platform today!

answered on 25 Jan 2017, 07:24 AM

Here it is

<telerik:RadHtmlChart runat="server" ID="radChartLS" Visible="false">

<PlotArea>

<XAxis Type="Log">

<LabelsAppearance DataFormatString="{0}" />

<TitleAppearance Text="Air volume [l/s]"></TitleAppearance>

</XAxis>

<YAxis Type="Log">

<LabelsAppearance DataFormatString="{0}"></LabelsAppearance>

<TitleAppearance Text="Pressure loss [Pa]"></TitleAppearance>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

then we create the rest in code behind

radChartLS.PlotArea.Series.Clear();

radChartLS.PlotArea.XAxis.TitleAppearance.Text = ventData.XAxisTitle;

string dataFormat = ventData.TooltipDataFormat;

// plot sound curves

int index = 0;

foreach (var curve in ventData.Data.Curves)

{

ScatterLineSeries ls = new ScatterLineSeries();

ls.LabelsAppearance.Visible = false;

ls.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.LineAndScatterLabelsPosition.Below;

ls.TooltipsAppearance.DataFormatString = dataFormat;

ls.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.FromArgb(18, 112, 184);

ls.MarkersAppearance.Visible = false;

ls.Name = curve.Position.ToString();

if (index == 0)

{

ls.LabelsAppearance.Visible = false;

ls.LabelsAppearance.ClientTemplate = "#=value.x# l/s, #=value.y# Pa, #=series.name#";

}

foreach (var point in curve.Points)

{

if (double.IsInfinity(point.PressureLoss) ||

double.IsNaN(point.PressureLoss) ||

point.PressureLoss < 1)

{

continue;

}

decimal x = (decimal)point.AirVolume;

decimal y = (decimal)point.PressureLoss;

var item = new ScatterSeriesItem(x, y);

ls.SeriesItems.Add(item);

}

radChartLS.PlotArea.Series.Add(ls);

index++;

}

// plot damper curves

var firstCurve = ventData.Data.Curves.First();

foreach (var point in firstCurve.Points)

{

ScatterLineSeries ls = new ScatterLineSeries();

ls.LabelsAppearance.Visible = false;

ls.LabelsAppearance.ClientTemplate = "#=series.name#";

ls.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.LineAndScatterLabelsPosition.Below;

ls.TooltipsAppearance.Visible = false;

ls.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.FromArgb(18, 112, 184);

ls.MarkersAppearance.Visible = false;

ls.Name = string.Format("{0} dB(A)", point.SoundValue);

// find the point on the next curve with same Id

foreach (var soundCurve in ventData.Data.Curves)

{

var p = soundCurve.Points.FirstOrDefault(f => f.Id == point.Id);

if (p != null)

{

if (double.IsInfinity(p.PressureLoss) ||

double.IsNaN(p.PressureLoss) ||

p.PressureLoss < 1)

{

continue;

}

decimal x = (decimal)p.AirVolume;

decimal y = (decimal)p.PressureLoss;

ls.SeriesItems.Add(x, y);

}

radChartLS.PlotArea.Series.Add(ls);

}

// plot working point

if (ventData.Data.WorkingPoint != null &&

ventData.Data.WorkingPoint.AirVolume > 1 &&

ventData.Data.WorkingPoint.PressureLoss > 1)

{

var wpSeries = new ScatterSeries();

wpSeries.TooltipsAppearance.DataFormatString = dataFormat;

wpSeries.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.FromArgb(18, 112, 184);

wpSeries.MarkersAppearance.MarkersType = Telerik.Web.UI.HtmlChart.MarkersType.Cross;

wpSeries.LabelsAppearance.TextStyle.Bold = true;

wpSeries.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.LineAndScatterLabelsPosition.Below;

wpSeries.LabelsAppearance.DataFormatString = dataFormat;

wpSeries.LabelsAppearance.Visible = false;

wpSeries.SeriesItems.Add(

(decimal)ventData.Data.WorkingPoint.AirVolume,

(decimal)ventData.Data.WorkingPoint.PressureLoss);

radChartLS.PlotArea.Series.Add(wpSeries);

}

answered on 30 Jan 2017, 08:59 AM

Hi Jens,

You can control the visibility of the labels in RadHtmlChart by configuring the series LabelsAppearance.Visible property to true:

foreach (var curve in ventData.Data.Curves)

{

ScatterLineSeries ls = new ScatterLineSeries();

ls.LabelsAppearance.Visible = true;

...

You can find useful information on how to configure the labels and titles of the chart in the following help article:
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/labels-and-titles-font-settings

Regards,
Vessy
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 30 Jan 2017, 09:31 AM

Uhm... yes that enables the label but it doesn't answer my question.

To clarify:
I want to set a specific label for each point in one serie.

I've formatted the code from top a little bit so you see what I want to achieve.

int index = 0;

foreach (var curve in ventData.Data.Curves)

{

ScatterLineSeries ls = new ScatterLineSeries();

ls.LabelsAppearance.Visible = false;

foreach (var point in curve.Points)

{

if (index == 0)

{

ls.LabelsAppearance.Visible = true;

// ls.Points.Last().Label = point.SoundValue.ToString(); // OLD WAY USING CHART FROM WIN

// ls.Points.Last()["LabelStyle"] = "BottomRight";

}

decimal x = (decimal)point.AirVolume;

decimal y = (decimal)point.PressureLoss;

var item = new ScatterSeriesItem(x, y);

ls.SeriesItems.Add(item);

}

answered on 30 Jan 2017, 09:37 AM

int index = 0;

foreach (var curve in ventData.Data.Curves)

{

ScatterLineSeries ls = new ScatterLineSeries();

ls.LabelsAppearance.Visible = false;

foreach (var point in curve.Points)

{

decimal x = (decimal)point.AirVolume;

decimal y = (decimal)point.PressureLoss;

var item = new ScatterSeriesItem(x, y);

ls.SeriesItems.Add(item);

if (index == 0)

{

ls.LabelsAppearance.Visible = true;

// ls.Points.Last().Label = point.SoundValue.ToString(); // WIN CHART

// ls.Points.Last()["LabelStyle"] = "BottomRight";

}

radChartLS.PlotArea.Series.Add(ls);

index++;

}

Corrected.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Visible labels

8 Answers, 1 is accepted