How to Bind the radchart with two series

[Satish]

Hello, 

            I have a code below, How could I bind the chart for multiple series?
            Example Please observ attached dataset and chart images(Lets assume, three data tables as dtDev, dtProd, dtQA).
            FYI, chart has x-Axis(-Ve, +Ve Values),  Y-Axis(-Ve, +Ve Values)

Thank You In advance,
Satish.

ASPX File Code

<

 

 

telerik:RadChart AutoLayout="True" Height="450px" ID="rcChamberUtilization" runat="server"

 

Skin="WebBlue" DefaultType="Line" Width="855px">

 

<ClientSettings EnableZoom="True" ScrollMode="Both" />

 

<Appearance>

 

<FillStyle MainColor="249, 250, 251">

 

</FillStyle>

 

<Border Color="160, 170, 182" />

 

</Appearance>

 

<Series>

 

<telerik:ChartSeries Name="DevSeries">

 

<Appearance>

 

<FillStyle FillType="ComplexGradient" MainColor="94, 117, 142">

 

<FillSettings>

 

<ComplexGradient>

 

<telerik:GradientElement Color="94, 117, 142" />

 

<telerik:GradientElement Color="116, 138, 162" Position="0.5" />

 

<telerik:GradientElement Color="139, 160, 183" Position="1" />

 

</ComplexGradient>

 

</FillSettings>

 

</FillStyle>

 

<TextAppearance TextProperties-Color="140, 140, 140">

 

</TextAppearance>

 

<Border Color="73, 86, 101" />

 

</Appearance>

 

</telerik:ChartSeries>

 

<telerik:ChartSeries Name="ProdSeries">

 

<Appearance>

 

<FillStyle FillType="ComplexGradient" MainColor="164, 175, 187">

 

<FillSettings>

 

<ComplexGradient>

 

<telerik:GradientElement Color="164, 175, 187" />

 

<telerik:GradientElement Color="196, 203, 212" Position="0.5" />

 

<telerik:GradientElement Color="221, 226, 233" Position="1" />

 

</ComplexGradient>

 

</FillSettings>

 

</FillStyle>

 

<TextAppearance TextProperties-Color="140, 140, 140">

 

</TextAppearance>

 

<Border Color="144, 150, 159" />

 

</Appearance>

 

</telerik:ChartSeries>

 

</Series>

 

<Legend Visible="False">

 

<Appearance Dimensions-Margins="1%, 1%, 1px, 1px" Dimensions-Paddings="1px, 1px, 1px, 1px"

 

Position-AlignedPosition="bottom" Visible="False">

 

<ItemTextAppearance TextProperties-Color="102, 102, 102">

 

</ItemTextAppearance>

 

<FillStyle MainColor="216, 222, 227">

 

</FillStyle>

 

<Border Color="160, 170, 182" />

 

</Appearance>

 

</Legend>

 

<PlotArea>

 

<YAxis AutoScale="True" AxisMode="Extended">

 

<Appearance>

 

<MajorGridLines Color="227, 227, 227" />

 

<MinorGridLines Color="227, 227, 227" />

 

<TextAppearance AutoTextWrap="False" />

 

</Appearance>

 

<AxisLabel>

 

<TextBlock>

 

<Appearance TextProperties-Color="140, 140, 140" Position-AlignedPosition="TopLeft">

 

</Appearance>

 

</TextBlock>

 

</AxisLabel>

 

</YAxis>

 

<XAxis AutoScale="True" DataLabelsColumn="RIID's" MaxValue="0" Step="0">

 

<Appearance>

 

<MajorGridLines Color="227, 227, 227" Width="0" />

 

<TextAppearance AutoTextWrap="True" />

 

</Appearance>

 

<AxisLabel>

 

<TextBlock>

 

<Appearance TextProperties-Color="140, 140, 140" Position-AlignedPosition="BottomRight">

 

</Appearance>

 

</TextBlock>

 

</AxisLabel>

 

</XAxis>

 

<Appearance>

 

<FillStyle FillType="Solid" MainColor="">

 

</FillStyle>

 

</Appearance>

 

</PlotArea>

 

<ChartTitle>

 

<Appearance>

 

<FillStyle MainColor="">

 

</FillStyle>

 

</Appearance>

 

<TextBlock Text="Chamber Utilization">

 

<Appearance TextProperties-Color="102, 102, 102" TextProperties-Font="Arial, 7pt"

 

Position-AlignedPosition="Bottom">

 

</Appearance>

 

</TextBlock>

 

</ChartTitle>

 

</telerik:RadChart>

ASPX.VB Code

monthlyradchartcontrole

.Clear()

monthlyradchartcontrole

.DataSource = dtDev

monthlyradchartcontrole

.DataBind()

monthlyradchartcontrole

.Series(0).DataXColumn = "ScheduledStartDate"

monthlyradchartcontrole

.Series(0).DataYColumn = "ChamberUtilization"

monthlyradchartcontrole

.PlotArea.XAxis.AxisLabel.TextBlock.Text = monthlyXaxislableName

monthlyradchartcontrole

.PlotArea.XAxis.AxisLabel.Visible = True

monthlyradchartcontrole

.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red

monthlyradchartcontrole

.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True

monthlyradchartcontrole

.PlotArea.YAxis.AxisLabel.Visible = True

monthlyradchartcontrole

.PlotArea.YAxis.AxisLabel.TextBlock.Text = monthlyYaxislableName

monthlyradchartcontrole

.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red

monthlyradchartcontrole

.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.Position.Auto = True

monthlyradchartcontrole

.Legend.Visible = False

'monthlyradchartcontrole.Clear()

'

 

monthlyradchartcontrole.DataSource = dtProd

'monthlyradchartcontrole.DataBind()

'

 

monthlyradchartcontrole.Series(1).DataXColumn = "ScheduledStartDate"

'monthlyradchartcontrole.Series(1).DataYColumn = "AvgOfSlotsForTheEquipment"

[Petar Kirov]

Hello Satish,

Thanks for contacting Telerik Support.

From the attached image (MultiSeriesChart-DataTable.png) I understand that initially you have one table which contains 3 columns - DepartmentCode, ScheduledStartDate and ChamberUtilization, from which you get three tables - one for each department. From there the binding should be quite straight-forward if you could bind each series to its corresponding table (like you would if you were using the SL/WPF Chart or ChartView). 

However the RadChart has one "global" DataSource, and you cant set each series to have different data sources. The approach that the ASP RadChart provides is the following:

• Bind the RadChart to the full table and by telling the Chart to group the data source by DepartmentCode, it will automatically create one series for each of the unique DepartmentCode-s you have

Here is how is done in code-behind:

monthlyradchartcontrole.DefaultType = Telerik.Charting.ChartSeriesType.Line
monthlyradchartcontrole.DataGroupColumn = "DepartmentCode"

monthlyradchartcontrole.DataManager.ValuesYColumns = New String() {"ChamberUtilization"}

monthlyradchartcontrole.PlotArea.XAxis.DataLabelsColumn = "ScheduledStartDate"
monthlyradchartcontrole.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate

monthlyradchartcontrole.DataSource = table
monthlyradchartcontrole.DataBind()

Also note that you will have to remove the ChartSeries you have previously created in ASPX / code-behind. 

I hope this is the solution you are looking for, if not please elaborate your exact case and data source. 

If you have any further question feel free to ask.

Regards,
Petar Kirov
the Telerik team