Programmatically adding multiple LineSeries with custom categories

[John Blomberg]

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.

Thanks

[Danail Vasilev]

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:
ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400" Height="250">
    <PlotArea>
        <XAxis>
            <Items>
                <telerik:AxisItem LabelText="Jan" />
                <telerik:AxisItem LabelText="Feb" />
                <telerik:AxisItem LabelText="Mar" />
            </Items>
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>

C#:

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;
    ls1.SeriesItems.Add(cs1);
    ls1.SeriesItems.Add(cs2);
    ls1.SeriesItems.Add(cs3);


    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;
    ls2.SeriesItems.Add(cs4);
    ls2.SeriesItems.Add(cs5);
    ls2.SeriesItems.Add(cs6);

    RadHtmlChart1.PlotArea.Series.Add(ls1);
    RadHtmlChart1.PlotArea.Series.Add(ls2);
}

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.


Regards,
Danail Vasilev
Telerik

[shaohua]

Thanks for the reply.

Is it possible to do this in Javascript?

I mean on client side.

 

Thanks.