RadHtmlChart LineSeries can't et more than one line

[SSirica]

I have the following simple chart set up

    <telerik:RadHtmlChart ID="chtLine" runat="server" Width="100%" Height="95%" Skin="Windows7" RenderMode="Lightweight">
        <ChartTitle Text="">
            <Appearance>
                <TextStyle FontSize="16px"></TextStyle>
            </Appearance>
        </ChartTitle>
        <Legend>
            <Appearance Position="Top"></Appearance>
        </Legend>
        <PlotArea>
            <XAxis DataLabelsField="InvDate"></XAxis>
            <YAxis Name="Total"></YAxis>
            <Series>
                <telerik:LineSeries Name="Code" MissingValues="Zero" DataFieldY="Total"></telerik:LineSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

code behind I'm filling it with linq data.

            Dim res = (From x In db.INVOICE_SUMMARies
                       Where x.SITE.COMPANY.COMPANY_CODE.Equals(Session("Market").ToString)
                       Group x By x.PROVIDER.PROVIDER_CODE, x.INVOICE_SUMMARY_INVOICE_DATE Into g = Group
                       Select Code = PROVIDER_CODE,
                              InvDate = INVOICE_SUMMARY_INVOICE_DATE,
                              Total = CType(g.Sum(Function(p) p.INVOICE_SUMMARY_TOTAL_AMOUNT), Decimal?)).ToList
            chtLine.DataSource = res.ToList
            chtLine.DataBind()

data looks kind of like this

CODE          InvDate                      Total
------------- ---------------------------- ---------------------------------------
COM           2022-02-13                   2532.04
EARTH         2022-02-13                   1721.40
EARTL         2022-02-13                   1321.20
FRONT         2022-02-13                   11184.08
GC            2022-02-13                   46120.10
LCI           2022-02-13                   21782.98
LIGHT         2022-02-13                   11687.82
MCI           2022-02-13                   18318.97
NIT           2022-02-13                   1676.31
ONE           2022-02-13                   20685.94
OPT           2022-02-13                   4313.10
PAT           2022-02-13                   44341.33
WILL          2022-02-13                   18899.02
XOC           2022-02-13                   4571.01
COM           2022-03-13                   2526.33
EARTH         2022-03-13                   1726.12
EARTL         2022-03-13                   1323.07
FRONT         2022-03-13                   11175.07
GC            2022-03-13                   45758.30
LCI           2022-03-13                   23401.18
LIGHT         2022-03-13                   11676.30
MCI           2022-03-13                   18384.44
NIT           2022-03-13                   1674.56
ONE           2022-03-13                   20712.67
OPT           2022-03-13                   4309.22
PAT           2022-03-13                   44393.95
WILL          2022-03-13                   18716.46
XOC           2022-03-13                   4560.98
COM           2022-04-13                   2532.04
EARTH         2022-04-13                   1721.40
EARTL         2022-04-13                   1321.20
FRONT         2022-04-13                   11184.08
GC            2022-04-13                   46120.10
LCI           2022-04-13                   23518.05
LIGHT         2022-04-13                   11687.82
MCI           2022-04-13                   18318.97
NIT           2022-04-13                   1676.31
ONE           2022-04-13                   20685.94
OPT           2022-04-13                   4313.10
PAT           2022-04-13                   44341.33
WILL          2022-04-13                   18899.02
XOC           2022-04-13                   4571.01

I'm trying to get each line to represent a Code.  I figure x axis is date and y axis is Total.  all I get is one line.  what am I missing?

[Vessy]

Hello Steve,

In order to render the provide data in RadHtmlChart you will need to normalize it prior to the binding, having the values of each series in a separate column like follows:

InvDate	COM	EARTH	EARTL	FRONT	GC	LCI	LIGHT	MCI	NIT	ONE	OPT	PAT	WILL	XOC
2022-02-13	2532.04	1721.4	1321.2	11184.08	46120.1	21782.98	11687.82	18318.97	1676.31	20685.94	4313.1	44341.33	18899.02	4571.01
2022-03-13	2526.33	1726.12	1323.07	11175.07	45758.3	23401.18	11676.3	18384.44	1674.56	20712.67	4309.22	44393.95	18716.46	4560.98
2022-04-13	…

The other option you can consider is to implement the data-grouping approach from the following code-library:

https://www.telerik.com/support/code-library/group-radhtmlchart-data-source

Regards,
Vessy
Progress Telerik

[SSirica]

So what you are saying I need to make it a pivot table?  One of the funnest things to do.  Thanks.

[Vessy]

Hi Steve,

The HtmlChart is only a data visualization control and it cannot manipulate the data, but only visualize it. In order to do so, the control expects a normalized data in a standard table (not pivot), where the values for each series are placed into a separate columns.

If normalizing the data before binding it to the chart is not acceptable for your scenario, you can follow the approach from the previously linked article, showing how to normalize the data programatically (passing it in the same format like in your initial post).

[SSirica]

I would try it, but RadHtmlChartGroupDataSource keeps coming up as not declared.  Is there an Import or reference I need to add?

[SSirica]

I see it in the App_code...nevermind

[SSirica]

Is there anyway to clear a chart?  so far none of this is working

            chtLine.DataSource = Nothing
            chtLine.DataBind()
            chtLine.PlotArea.XAxis.Items.Clear()
            chtLine.PlotArea.Series(0).Items.Clear()

[SSirica]

I also tried chtLine.PlotArea.Series.Clear() but that resets everything.  Not what I'm looking for.  

[Vessy]

Using the HtmlChart.PlotArea.Series.Clear(); is the proper way to clear the series of the chart, but you have to make sure that all clearing methods are called before the DataBind() method. Otherwise, the rendered chart will be empty.

chtLine.PlotArea.Series.Clear();

chtLine.DataSource = GetNewDataSource;
chtLine.DataBind();