Different Series with Same value

[Felipe Saldana]

I have a chart and different series have the same value.

For example, my chart has 2 series, Total Outgoing messages and Total Incoming Messages.

If they both have the same value for the 10 PM hour (category) only of of the series is displayed and noting indicating that the series both have the same value.

Is there a way for the graph to show that different series have the same value for a category.
Maybe show both tooltips?


Thanks

[Hristo Germanov]

Hello Felipe Saldana,

Thank you for contacting us.

In your case you can try to set different label positions. Then when you hover a label a tooltip with the color of the series will appear..

.Series(series => {
    series.Line(new int[] { 1, 2, 3 }).Name("Rep. Sales").Labels(labels => labels.Visible(true).Position(ChartLineLabelsPosition.Above));
    series.Line(new int[] { 1, 2, 3 }).Name("Total Sales").Labels(labels => labels.Visible(true).Position(ChartLineLabelsPosition.Below));
})

Regards,
Hristo Germanov
the Telerik team

[Felipe Saldana]

Thanks for the update.

This is a step in the right direction but it doesn't look quite right. I have attached a screenshot.

What would be nice is to move the Marker too. Is it possible to move the maker. That way the makers wouldn't overlap.

Another problem is that when the labels are positioned like this the 0 labels are moved too. I will need to not display the labels for the 0 values. Is it possible to iterate through the chart data and toggle the visibility of the labels.?


Thanks!

[Hristo Germanov]

Hello Felipe Saldana,

1) You can't move the marker to the custom position.
2) You can change the position of the label with ChartLineLabelsPosition or you can set different padding, but you can't show/hide labels by rules.

Kind regards,
Hristo Germanov
the Telerik team

[Felipe Saldana]

Is anything planned to give developers more functionality for the labels and makers.

I think there needs to be some way to display all markers for the same value.
By default, users will never know that another marker exist (it took me at least a hour to realize that the marker was there but I couldn't see it)

Moving the labels (without adjust the visibility ) just causes more confusion for the end users, as my previously attached file displays.

Maybe have the maker be click-able and a little popup appear that list all the markers ...

Basically, I am stuck with an unacceptable graph.

[Felipe Saldana]

I have attached a screenshot that shows what I believe needs to be addressed.

At 4PM there are truly two markers (both have a value of 1). The orange marker cannot be seen.
By looking at the graph there is no way an end user would know there is a marker not displayed.

[Hristo Germanov]

Hello Felipe Saldana,

Could you please give us an example in excel file for example.

Greetings,
Hristo Germanov
the Telerik team

[Felipe Saldana]

Hristo,

I am not sure why you need my data. There is nothing special about my data.
All you need to do is create a simple line graph and plot two series to have the exact same values.

You can view the results from my screen shots.

I can create a simple example for you if need be later in the day.


Thanks,

Felipe

[Felipe Saldana]

Hristo,

Following you will find the model, view, and controller code

@model IEnumerable< AdultSmsTexts.Models.TestHourlyMessagingModel>

    @(Html.Telerik().Chart<AdultSmsTexts.Models.TestHourlyMessagingModel>(Model)
    .Name("chart").Title("Test")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )

    .Series(series =>
    {
        series.Line(s => s.Series1).Name("Series1").Labels(true);
        series.Line(s => s.Series2).Name("Series2").Labels(true);
        series.Line(s => s.Series3).Name("Series3").Labels(true);
    })

    .CategoryAxis(axis => axis
        .Categories(s => s.HourDescriptionLong).Labels(c=>c.Rotation(-45))
    )

    .ValueAxis(v => v.Numeric().MajorUnit(1))

    .Tooltip(tooltip => tooltip.Template("series name: <#= category #> value: <#= value #>").Visible(true))

    .HtmlAttributes(new { style = "width: 940px; height: 500px;" })
)

public class TestHourlyMessagingModel
{
    public int Hour
    {
        get;
        set;
    }

    public string HourDescription
    {
        get;
        set;
    }

    public string HourDescriptionLong
    {
        get;
        set;
    }

    public DateTime Date
    {
        get;
        set;
    }

    public int Series1
    {
        get;
        set;
    }

    public int Series2
    {
        get;
        set;
    }


    public int Series3
    {
        get;
        set;
    }
}

public ActionResult TestGrid()
{
    Dictionary<int, TestHourlyMessagingModel> hours = new Dictionary<int, TestHourlyMessagingModel>();
    TestHourlyMessagingModel hour = new TestHourlyMessagingModel();

    for (int i = 0; i < 24; i++)
    {
        hour = new TestHourlyMessagingModel();
        hour.Date = DateTime.Now;
        hour.Hour = i;

        if (i < 12)
        {
            if (i == 0)
            {
                hour.HourDescription = "12 AM";
            }
            else
            {
                hour.HourDescription = i.ToString() + " AM";
            }
        }
        else
        {
            if (i == 12)
            {
                hour.HourDescription = "12 PM ";
            }
            else
            {
                hour.HourDescription = (i - 12).ToString() + " PM ";
            }

        }

        hour.HourDescriptionLong = hour.HourDescription;

        hour.Series1= 2;
        hour.Series2 = 2;
        hour.Series3 = 2;

        hours.Add(i, hour);
    }

    return View(hours.Values.ToList());
}

[Hristo Germanov]

Hi Felipe Saldana,

Thank you for the code sample.

You can't move the marker in some direction, because the marker has his own position which depends on value. If you have some markers with same value it is expected that the markers should have the same position in the chart. We will try do find a solution for the problem.

Kind regards,
Hristo Germanov
the Telerik team