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

Programmatically adding multiple LineSeries with custom categories

2 Answers 420 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
John Blomberg
Top achievements
Rank 1
John Blomberg asked on 11 Feb 2014, 06:36 PM
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

2 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 13 Feb 2014, 03:31 PM
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
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.
0
shaohua
Top achievements
Rank 1
answered on 05 Jun 2017, 09:18 PM

Thanks for the reply.

Is it possible to do this in Javascript?

I mean on client side.

 

Thanks.

 

Tags
Chart (HTML5)
Asked by
John Blomberg
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
shaohua
Top achievements
Rank 1
Share this question
or