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

How to Bind the radchart with two series

1 Answer 206 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Satish
Top achievements
Rank 1
Satish asked on 07 Sep 2012, 12:37 PM
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"

1 Answer, 1 is accepted

Sort by
0
Petar Kirov
Telerik team
answered on 12 Sep 2012, 12:34 PM
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
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Chart (Obsolete)
Asked by
Satish
Top achievements
Rank 1
Answers by
Petar Kirov
Telerik team
Share this question
or