Can't Seem To Figure Out RadChart!

Thread is closed for posting
2 posts, 0 answers
  1. Cartoon Head
    Cartoon Head avatar
    21 posts
    Member since:
    Apr 2010

    Posted 05 Mar 2012 Link to this post

    I am having a hard time figuring out how to turn SQL results into a RadChart.  I've tried numerous examples and code snippets in the "Getting Started" sections and others, but I still can't get it to do something simple.

    Attached is a visual of what I am trying to accomplish.  All evidence is that RadChart should be able to handle this easily!  But I can't make sense of HOW.

    On the left are the results from SQL. 

    On the right is the simple chart as rendered in Excel.

    Can someone point me to some good step-by-step instructions on how to make this happen?  (I know how to set up the SQL data source and bind the chart to the SQL Data Source, but once I get into the RadChart wizard or attempting to setup the series and items is where there's a mental disconnect.)

    Suggestions are greatly appreciated!
  2. Cartoon Head
    Cartoon Head avatar
    21 posts
    Member since:
    Apr 2010

    Posted 07 Mar 2012 Link to this post

    I happened upon someone else's sample code and it was enlightenment.

    Here is the way I created the chart I needed:

    <telerik:RadChart ID="RadChart1" runat="server" DefaultType="Line" 
        DataSourceID="sqlChart1" Height="440px" Width="500px">
        <Appearance TextQuality="AntiAlias" FillStyle-MainColor="#EEECE1" Border-Visible="false">  
            <FillStyle MainColor="238, 236, 225"></FillStyle>
        </Appearance>  
        <ChartTitle Visible="False" >  
        </ChartTitle>  
        <Series>  
            <telerik:ChartSeries Name="Aim Line" Type="Line" DataYColumn="Aim Line">  
                <Appearance ShowLabels="False" FillStyle-MainColor="#00B050">  
                    <FillStyle MainColor="0, 176, 80"></FillStyle>
                    <LabelAppearance Visible="false"></LabelAppearance>  
                    <PointMark Figure="Rectangle">
                    </PointMark>
                </Appearance>  
            </telerik:ChartSeries>  
            <telerik:ChartSeries Name="Results" Type="Point" DataYColumn="Results">  
                <Appearance ShowLabels="False" Border-Color="#FFA000" FillStyle-MainColor="#FFC000" FillStyle-SecondColor="#FF0000">  
                </Appearance>  
            </telerik:ChartSeries>  
            <telerik:ChartSeries Name="Trend" Type="Line" DataYColumn="Trend">  
                <Appearance ShowLabels="False" FillStyle-MainColor="#7030A0">  
                    <FillStyle MainColor="112, 48, 160"></FillStyle>
                </Appearance>  
            </telerik:ChartSeries>  
        </Series>  
        <PlotArea>  
            <Appearance Dimensions-Margins="10px, 10px, 100px, 40px">  
                <FillStyle MainColor="White" FillType="Solid"></FillStyle>  
                <Border Color="134, 134, 134"></Border>  
            </Appearance>  
            <XAxis LayoutMode="Inside" AutoScale="false" DataLabelsColumn="MeasureDate">  
                <Appearance MajorGridLines-Visible="true"  MinorTick-Visible="false" MajorTick-Visible="false">
                    <MajorGridLines PenStyle="Solid" Color="209, 222, 227" Visible="True" Width="0"></MajorGridLines>  
                    <LabelAppearance RotationAngle="270" Position-AlignedPosition="Top">  
                    </LabelAppearance>  
                    <TextAppearance TextProperties-Color="51, 51, 51"></TextAppearance>  
                </Appearance>  
            </XAxis>  
            <YAxis AutoScale="true" IsZeroBased="false" AxisMode="Normal" >  
                <Appearance Color="134, 134, 134" MajorGridLines-Visible="true" MinorTick-Color="134, 134, 134" MinorTick-Width="0" MajorTick-Color="134, 134, 134">  
                    <MajorGridLines Color="209, 222, 227"></MajorGridLines>  
                    <MinorGridLines Color="233, 239, 241"></MinorGridLines>  
                    <TextAppearance TextProperties-Color="51, 51, 51"></TextAppearance>  
                </Appearance>  
              </YAxis>  
        </PlotArea>  
        <Legend Visible="True" >   
            <Appearance Overflow="Row" Position-AlignedPosition="Bottom">
                <FillStyle MainColor="238, 236, 225"></FillStyle>
                <Border Visible="false"></Border>
            </Appearance>
        </Legend
    </telerik:RadChart>

    With some additional code-behind:
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Font = New System.Drawing.Font("Arial", 8)
            RadChart1.PlotArea.YAxis.Appearance.TextAppearance.TextProperties.Font = New System.Drawing.Font("Arial", 8)
        End If
    End Sub
    Private Sub RadChart1_BeforeLayout(sender As Object, e As System.EventArgs) Handles RadChart1.BeforeLayout
        For Each item In RadChart1.PlotArea.XAxis.Items
            If Not IsDate(item.TextBlock.Text) Then
                item.TextBlock.Text = " "
            End If
        Next
        Dim MarkedZone1 As ChartMarkedZone = New ChartMarkedZone
        MarkedZone1.ValueStartX = 155
        MarkedZone1.ValueEndX = RadChart1.PlotArea.XAxis.MaxValue
        MarkedZone1.Appearance.FillStyle.MainColor = Drawing.Color.Cornsilk
        MarkedZone1.Appearance.Border.Visible = True
        RadChart1.PlotArea.MarkedZones.Add(MarkedZone1)
    End Sub
    Private Sub RadChart1_ItemDataBound(sender As Object, e As Telerik.Charting.ChartItemDataBoundEventArgs) Handles RadChart1.ItemDataBound
        If (IsDBNull(e.SeriesItem.YValue)) Then
            e.SeriesItem.Label.Appearance.Visible = False
        End If
    End Sub

    And as the attached image shows, it nicely does the trick!

    (The MarkedZone code will be replaced with logic that locates the appropriate final date value and matches that X axis value accordingly.)

    SWEET!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top