Programmatically adding multiple LineSeries with custom categories

3 posts, 1 answers
  1. John Blomberg
    John Blomberg avatar
    5 posts
    Member since:
    Aug 2012

    Posted 11 Feb 2014 Link to this post

    I am having trouble upgrading some existing charts from ChartDirector into RadHTMLCharts. The existing charts have month names as categories on the x-axis and contain two series. I am adding these programmatically without the use of a databind, but the two series do not share the same x-values - there is a gap between the two and there can potentially be gaps in months within each series. It seems I cannot have months as the x-axis labels and have two series that do not have matching x-values. Is there a chart type that I can use to achieve the desired result, or is there a workaround?

    I can have months as the x-axis labels if I use a line chart, but it has to have values for every category for both series. Or, I can have two series that have different x-values if I use a ScatterLine chart, but the x-axis labels are numeric and I cant seem to replace them with months.

  2. Answer
    Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 13 Feb 2014 Link to this post

    Hi John,

    Since you want to display discrete data you can use category series like line, area, bar, column, etc. Note that each item from the series is associates to the corresponding item from the x-axis. For example the second item from the first and second series corresponds to the second item from the x-axis. If you want to display gap between particular items you can added a null-able item. For example:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400" Height="250">
                    <telerik:AxisItem LabelText="Jan" />
                    <telerik:AxisItem LabelText="Feb" />
                    <telerik:AxisItem LabelText="Mar" />
    protected void Page_Load(object sender, EventArgs e)
        LineSeries ls1 = new LineSeries();
        CategorySeriesItem cs1 = new CategorySeriesItem();
        cs1.Y = 30;
        CategorySeriesItem cs2 = new CategorySeriesItem();
        cs2.Y = null;
        CategorySeriesItem cs3 = new CategorySeriesItem();
        cs3.Y = 20;
        LineSeries ls2 = new LineSeries();
        CategorySeriesItem cs4 = new CategorySeriesItem();
        cs4.Y = 40;
        CategorySeriesItem cs5 = new CategorySeriesItem();
        cs5.Y = 10;
        CategorySeriesItem cs6 = new CategorySeriesItem();
        cs6.Y = 50;

    You can also control the behavior of the series when there is such null/missing value in the items through the MissingValues property of the series that takes Interpolate, Gap and Zero values. For example:
    ls1.MissingValues = Telerik.Web.UI.HtmlChart.MissingValuesBehavior.Interpolate;

    There is, however, an issue with the "Gap" value for line and area series which will be fixed in Q1 2014. More information on the matter is available in this feedback item.

    Danail Vasilev
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. shaohua
    shaohua avatar
    11 posts
    Member since:
    May 2017

    Posted 05 Jun in reply to Danail Vasilev Link to this post

    Thanks for the reply.

    Is it possible to do this in Javascript?

    I mean on client side.




Back to Top