Programmatic Creation of Series and Data

[Peter]

hi

i am having an issue with the programmatic creation of series and data , i have many series to add to a line chart , but the data is based on a time series so i am struggling to get it properly into a system.

would anyone be able to provide an example of programmatic creation of multiple series data based on a time series ?

Peter.

[Danail Vasilev]

Hello Peter,

Numerical SeriesItems that consists DateTime data cannot be created programmatically in RadHtmlChart, because their x/y values are of type decimal. The exception is the categorical series, which accept strings for their X-Axis labels.

The chart, however, can be databound to DateTime objects, so that instead of creating series items programmatically you can created a sample datasource which can be bound to the chart. For example:
ASPX:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
</telerik:RadHtmlChart>

C#:

protected void Page_Load(object sender, EventArgs e)
{

    DataTable dt = new DataTable();
    dt.Columns.Add("id");
    dt.Columns.Add("xValues");
    dt.Columns.Add("yValues");
    for (int i = 0; i < 5; i++)
    {
        dt.Rows.Add(i, (10 + i).ToString() + " Apr", 20 + i);
    }

    ScatterLineSeries sls1 = new ScatterLineSeries();
    sls1.LabelsAppearance.DataFormatString = "{0:d}";
    sls1.DataFieldX = "xValues";
    sls1.DataFieldY = "yValues";

    RadHtmlChart1.PlotArea.Series.Add(sls1);
    RadHtmlChart1.DataSource = dt;
    RadHtmlChart1.DataBind();

}

Regards,
Danail Vasilev
Telerik

[Peter]

ok then

if thats the case how do i bind multiple series of data to the radhtmlchart ?

in one of your examples you are doing it by columns in a datatable so there are no true datasets in your examples.

i have 2 options , i have a 3 column table , which is basically series , datetime , value how would i bind multiple series in that instance ?

the other is i have a dataset with multiple tables each with a datetime and values where the tables represent each series , how would this be bound ?

Peter.

[Lidiya]

Hi All,

I need to display Order Date in X Axis, Total Order Quantity in Y Axis...and in each Order Date there may be 1 or more customers (Series Names)...ie, total order made by customers on that particular date. I need to implement this in RadHtmlChart stacked Column Chart.

Please see the attached image similar to my requirement.

Regards,
Seena

[Danail Vasilev]

Hello Peter,

RadHtmlChart can be bound to only one datasource which must contain all the data for its series/xaxis labels in separate fields/columns. If you have a dataset with multiple datatables, then you must merge these tables into one table, so that it can be bound to the chart.

Regarding your first question I am sorry to say that a grouping functionality of the chart is not supported, so that you cannot achieve that out of the box. Such a feature request, however, has already been logged as a PITS item here, so that you can monitor, comment or raise its priority by voting on it. For the time being you can manually do the grouping manipulations of the datasource. An example illustrating that can be found in this forum thread.

Regarding the Seena's question it has already been asked in this forum thread, so we can continue our discussion there.

Regards,
Danail Vasilev
Telerik

[Mike]

But can be mixed: databinded series with those created programmatically, for example to show dotted cut line?

If possible, if we know that x-avis is datetime & we know the amount of rows in DataTable - we can create & add to serie the same amount of LineSeriesItems and after add theseria after DataBind() method.

[Danail Vasilev]

Hi Mike,

I have already replied to the other forum post that was opened by you on the matter here (http://www.telerik.com/forums/is-it-possible-plot-two-different-series-in-one-chart), so that we can continue our discussion there.

Could I also ask you when you have technical questions to use the corresponding channels for that - either open a support ticket which requires a subscription or ask the community in the forum? I refer here the code library which was opened on this regard too.

Thank you for your cooperation.

Regards,
Danail Vasilev
Telerik

[Hans]

I try to learn how to add series and data programmatically.  It seems to me this example cannot work properly with current version of Telerik Assemblies.  Can you provide an correct example?  I am using 2018.2.710.45.  Thank you.

[Vessy]

Hi Hans,

The following help article explains (and demonstrates) the different ways in which RadHtmlChart can be created ( declaratively, using data binding, or programmatically):
https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/data-binding/setting-explicit-items

You can find more samples showing programmatically created chart series in this help article:
https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/how-to/programmatic-creation-of-seriesitems-with-datetime
and this live demo:
https://demos.telerik.com/aspnet-ajax/htmlchart/examples/serversideapi/programmaticcreation/defaultcs.aspx

Regards,
Vessy
Progress Telerik