RadHtmlChart LineSeries can't et more than one line

1 Answer 12 Views
Chart (HTML5)
SSirica
Top achievements
Rank 2
Iron
Iron
Veteran
SSirica asked on 05 May 2022, 05:34 PM

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?

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 05 May 2022, 06:46 PM

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:

InvDateCOM EARTHEARTLFRONTGCLCILIGHTMCI NITONEOPTPATWILLXOC
2022-02-132532.041721.41321.211184.0846120.121782.9811687.8218318.971676.3120685.944313.144341.3318899.024571.01
2022-03-132526.331726.121323.0711175.0745758.323401.1811676.318384.441674.5620712.674309.2244393.9518716.464560.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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

SSirica
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 06 May 2022, 11:35 AM

So what you are saying I need to make it a pivot table?  One of the funnest things to do.  Thanks.
Vessy
Telerik team
commented on 06 May 2022, 11:45 AM

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
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 06 May 2022, 11:53 AM

I would try it, but RadHtmlChartGroupDataSource keeps coming up as not declared.  Is there an Import or reference I need to add?
SSirica
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 06 May 2022, 11:55 AM

I see it in the App_code...nevermind
SSirica
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 06 May 2022, 01:57 PM

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
Top achievements
Rank 2
Iron
Iron
Veteran
commented on 06 May 2022, 01:59 PM

I also tried chtLine.PlotArea.Series.Clear() but that resets everything.  Not what I'm looking for.  
Vessy
Telerik team
commented on 09 May 2022, 06:20 PM

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();

 

Tags
Chart (HTML5)
Asked by
SSirica
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Vessy
Telerik team
Share this question
or