Visible labels

Thread is closed for posting
9 posts, 0 answers
  1. Yenza
    Yenza avatar
    15 posts
    Member since:
    Mar 2015

    Posted 16 Jan Link to this post

    Hello!

    I'm trying to re-create old static chart objects from Windows chart system to your interactive one!

    How it looks today with Windows chart:

    http://imgur.com/EXfeihU

    How far I've gotten with Telerik:

    http://imgur.com/LlQ0AlZ

    So what's really important is that I get these 20, 25, 30, 40 etc points with their labels to always be visible in the chart. Also the lines to the workingpoint would be great to know if there is an easy way to create them!

    And suggestions?

    Thank you!

    (PS: Sorry about the different scaling)

  2. Tsvyatko
    Admin
    Tsvyatko avatar
    858 posts

    Posted 18 Jan Link to this post

    Hi Jens,

    Would it be possible to clarify which you our products do you use and the technology related - WinForms, WPF, Asp.Net Ajax or UWP?

    Regards,
    Tsvyatko
    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!
  3. Yenza
    Yenza avatar
    15 posts
    Member since:
    Mar 2015

    Posted 20 Jan Link to this post

    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.

  4. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    460 posts

    Posted 20 Jan Link to this post

    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!
  5. Yenza
    Yenza avatar
    15 posts
    Member since:
    Mar 2015

    Posted 25 Jan Link to this post

    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);
                    }
  6. Vessy
    Admin
    Vessy avatar
    1663 posts

    Posted 30 Jan Link to this post

    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.
  7. Yenza
    Yenza avatar
    15 posts
    Member since:
    Mar 2015

    Posted 30 Jan in reply to Vessy Link to this post

    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);
        }
    }
  8. Yenza
    Yenza avatar
    15 posts
    Member since:
    Mar 2015

    Posted 30 Jan in reply to Vessy Link to this post

    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.

  9. Vessy
    Admin
    Vessy avatar
    1663 posts

    Posted 02 Feb Link to this post

    Hi Jens,

    The target behavior can be achieved client-side, by implementing your own logic for showing only the label for a specific series in a Visual template for the chart series labels:
    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.labels.visual

    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.
Back to Top