How to Bind the radchart with two series

Thread is closed for posting
2 posts, 0 answers
  1. Satish
    Satish avatar
    10 posts
    Member since:
    Apr 2012

    Posted 07 Sep 2012 Link to this post

    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"

  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 12 Sep 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top