This is a migrated thread and some comments may be shown as answers.
Can't Seem To Figure Out RadChart!
1 Answer 36 Views
This is a migrated thread and some comments may be shown as answers.
Cartoon Head
Top achievements
Rank 1
Cartoon Head asked on 05 Mar 2012, 11:21 PM
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!

1 Answer, 1 is accepted

Sort by
0
Cartoon Head
Top achievements
Rank 1
answered on 07 Mar 2012, 11:00 PM

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!
Asked by
Cartoon Head
Top achievements
Rank 1
Answers by
Cartoon Head
Top achievements
Rank 1
Share this question
or