RadChart Multiple problems - scaling, legend text

Thread is closed for posting
2 posts, 0 answers
  1. Scott Hannon
    Scott Hannon avatar
    18 posts
    Member since:
    Dec 2008

    Posted 18 Nov 2011 Link to this post

    I have a RadChart declaratively bound to a SQLDataSource. Auto-scaling is on. I cannot get the legend to display the state name instead of the series name. When the values go above 1000, they show with a non-existent bar, but have the value label.
    I did look at multiple resources before I started this thread. The only thing that is in the code is setting the title. What am I doing wrong. The dataset bound has these fields:
    YYMM - yearmonth together
    YYYY - year
    MM - month
    Category - single category only
    VOLUME - count of cases/per month/per state
    TotalPaid - sum of paid amount/per month/per state
    State - compare 2 states, grouping field

    <telerik:RadChart ID="RadChart1" runat="server" DataGroupColumn="State" DataSourceID="ChartDS"
                    IntelligentLabelsEnabled="True" SeriesPalette="Blue" Skin="DeepBlue">
                    <Appearance Corners="Rectangle, Rectangle, Round, Round, 5" Dimensions-Margins="0px, 1px, 1px, 1px"
                        Dimensions-Paddings="0px, 1px, 1px, 1px">
                        <FillStyle FillType="ComplexGradient">
                            <FillSettings>
                                <ComplexGradient>
                                    <telerik:GradientElement Color="26, 120, 179" />
                                    <telerik:GradientElement Color="35, 189, 254" Position="0.5" />
                                    <telerik:GradientElement Color="26, 120, 179" Position="1" />
                                </ComplexGradient>
                            </FillSettings>
                        </FillStyle>
                        <Border Color="0, 66, 110" Width="0" Visible="False" />
                    </Appearance>
                    <Series>
                        <telerik:ChartSeries Name="State1" DataYColumn="VOLUME">
                            <Appearance>
                                <FillStyle FillType="ComplexGradient">
                                    <FillSettings>
                                        <ComplexGradient>
                                            <telerik:GradientElement Color="213, 247, 255" />
                                            <telerik:GradientElement Color="193, 239, 252" Position="0.5" />
                                            <telerik:GradientElement Color="157, 217, 238" Position="1" />
                                        </ComplexGradient>
                                    </FillSettings>
                                </FillStyle>
                                <TextAppearance TextProperties-Color="White">
                                </TextAppearance>
                            </Appearance>
                        </telerik:ChartSeries>
                        <telerik:ChartSeries DataYColumn="VOLUME" Name="State2">
                            <Appearance>
                                <FillStyle FillType="ComplexGradient">
                                    <FillSettings>
                                        <ComplexGradient>
                                            <telerik:GradientElement Color="163, 222, 78" />
                                            <telerik:GradientElement Color="132, 207, 27" Position="0.5" />
                                            <telerik:GradientElement Color="102, 181, 3" Position="1" />
                                        </ComplexGradient>
                                    </FillSettings>
                                </FillStyle>
                                <TextAppearance TextProperties-Color="White">
                                </TextAppearance>
                                <Border Color="94, 160, 0" />
                            </Appearance>
                        </telerik:ChartSeries>
                    </Series>
                    <Legend>
                        <Appearance Dimensions-Margins="1px, 2%, 12%, 1px" GroupNameFormat="#VALUE">
                            <ItemTextAppearance TextProperties-Color="White">
                            </ItemTextAppearance>
                            <FillStyle GammaCorrection="False" MainColor="37, 255, 255, 255">
                            </FillStyle>
                            <Border Color="76, 255, 255, 255" />
                        </Appearance>
                        <TextBlock>
                            <Appearance Position-AlignedPosition="Top" TextProperties-Color="LightSkyBlue">
                            </Appearance>
                        </TextBlock>
                        <ActiveRegion Tooltip="The two states to compare" />
                    </Legend>
                    <PlotArea>
                        <XAxis DataLabelsColumn="YYMM" IsZeroBased="False" MaxValue="7" MinValue="0">
                            <Appearance Color="98, 183, 226" MajorTick-Color="98, 183, 226">
                                <MajorGridLines Color="98, 183, 226" Width="0" />
                                <LabelAppearance RotationAngle="300" Position-AlignedPosition="Bottom">
                                </LabelAppearance>
                                <TextAppearance TextProperties-Color="White">
                                </TextAppearance>
                            </Appearance>
                            <AxisLabel Visible="True">
                                <Appearance Dimensions-Paddings="1px, 1px, 10%, 1px" Visible="True">
                                </Appearance>
                                <TextBlock Text="Month/Year">
                                    <Appearance TextProperties-Color="LightSkyBlue">
                                    </Appearance>
                                </TextBlock>
                            </AxisLabel>
                            <Items>
                                <telerik:ChartAxisItem>
                                    <TextBlock Text=" 01/2011">
                                    </TextBlock>
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="1">
                                    <TextBlock Text=" 02/2011">
                                    </TextBlock>
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="2">
                                    <TextBlock Text=" 03/2011">
                                    </TextBlock>
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="3">
                                    <TextBlock Text=" 04/2011">
                                    </TextBlock>
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="4">
                                    <TextBlock Text=" 05/2011">
                                    </TextBlock>
                                </telerik:ChartAxisItem>
                                <telerik:ChartAxisItem Value="5">
                                    <TextBlock Text=" 06/2011">
                                    </TextBlock>
                                </telerik:ChartAxisItem>
                            </Items>
                        </XAxis>
                        <YAxis>
                            <Appearance Color="98, 183, 226" MajorTick-Color="98, 183, 226" MinorTick-Color="98, 183, 226">
                                <MajorGridLines Color="120, 209, 248" />
                                <MinorGridLines Color="120, 209, 248" Width="0" />
                                <TextAppearance TextProperties-Color="White">
                                </TextAppearance>
                            </Appearance>
                            <AxisLabel Visible="True">
                                <Appearance Visible="True">
                                </Appearance>
                                <TextBlock Text="Volume">
                                    <Appearance TextProperties-Color="LightSkyBlue">
                                    </Appearance>
                                </TextBlock>
                            </AxisLabel>
                        </YAxis>
                        <Appearance Dimensions-Margins="12%, 80px, 20%, 15%" SeriesPalette="Blue">
                            <FillStyle MainColor="50, 255, 255, 255" SecondColor="Transparent">
                            </FillStyle>
                            <Border Color="97, 180, 223" />
                        </Appearance>
                    </PlotArea>
                    <ChartTitle>
                        <Appearance Dimensions-Margins="8px, 10px, 8px, 6%">
                            <FillStyle MainColor="">
                            </FillStyle>
                            <Border Visible="False" />
                        </Appearance>
                        <TextBlock Text="">
                            <Appearance TextProperties-Color="White"
                                TextProperties-Font="Tahoma, 9.75pt, style=Bold">
                            </Appearance>
                        </TextBlock>
                    </ChartTitle>
  2. Scott Hannon
    Scott Hannon avatar
    18 posts
    Member since:
    Dec 2008

    Posted 21 Nov 2011 Link to this post

    Was able to find a sample/template to use to help construct what I was trying to do:
    Telerik Demos - RadChart Dynamic Data Binding
    Do not set the Chart DataSourceID to the SQLDataSource.
    Add a chart and only do styling changes for this to work best.
    Sample chart

    Sample code, call this sub instead of RadChart.Databind().
    Private Sub UpdateRadChart2()
        'multi-select listbox allows selecting multiple states
        If RadListBox1.SelectedValue.Count > 0 Then
            Dim TempStr As String = String.Empty
            For Each si As RadListBoxItem In RadListBox1.SelectedItems
                TempStr &= si.Value & ","
            Next
            TempStr = TempStr.Substring(0, Len(TempStr) - 1)
            SqlDataSource3.SelectParameters("States").DefaultValue = TempStr
        End If
        ' Remove the previous series.
        RadChart2.Series.Clear()
        RadChart2.PlotArea.XAxis.Clear()
        RadChart2.PlotArea.XAxis.AutoScale = False
        'create dataview from SQLDataSource
        Dim dv As DataView = CType(Me.SqlDataSource3.Select(DataSourceSelectArguments.Empty), System.Data.DataView)
     
        'State field is used as a series grouping
        Dim oldstate As String = "ZZ"
        Dim state As String = String.Empty
        'YYMM is year/month for xaxis
        Dim currentSeries As ChartSeries = Nothing
        RadChart2.PlotArea.XAxis.Clear()
        RadChart2.PlotArea.XAxis.AutoScale = False
        RadChart2.PlotArea.YAxis.AxisMode = ChartYAxisMode.Extended 'extend axis for more room
        Dim dbRow As DataRow
        '------------------------------
        'had to use arraylist because could not get
        'currentSeries.Items.Contains(ChartSeriesItem) to work correctly
        '------------------------------
        Dim xitems As New ArrayList' used to prevent xaxis duplication
        'add xaxis values first
        For Each dbRow In dv.Table.Rows
            If Not xitems.Contains(dbRow("YYMM").ToString) Then
                xitems.Add(dbRow("YYMM").ToString)
                RadChart2.PlotArea.XAxis.AddItem(dbRow("YYMM"))
            End If
        Next
     
        For Each dbRow In dv.Table.Rows
            state = dbRow("STATE")
            'add each state to series, or create series and add if doesn't exist
            'NOTE: dataset must be ordered by this field first, or will get odd look
            'could possibly use arraylist "trick" like above to prevent odd look
            If state <> oldstate Then
                currentSeries = RadChart2.CreateSeries(CStr(dbRow("STATE")), Color.Empty, Color.Empty, ChartSeriesType.Bar)
                'currentSeries.Appearance.Border.Color = Color.Black
                currentSeries.Appearance.TextAppearance.TextProperties.Color = Color.Black
                currentSeries.Appearance.LabelAppearance.RotationAngle = 270
                currentSeries.Appearance.LabelAppearance.LabelLocation = Styles.StyleSeriesItemLabel.ItemLabelLocation.Auto
                'currentSeries.Appearance.ShowLabels = False
                oldstate = state
            End If
     
     
            If Not (currentSeries Is Nothing) Then
                'create series item
                Dim item As New ChartSeriesItem()
          'add value
                item.YValue = FormatNumber(CDbl(dbRow("VOLUME")), 4)
                'add label
                item.Label.TextBlock.Text = dbRow("STATE").ToString & " : " & CInt(dbRow("VALUE")).ToString & " " & "$" & FormatNumber(CDbl(dbRow("Paid")), 0).ToString
                'add tooltip
                item.ActiveRegion.Tooltip = dbRow("YYMM").ToString & " " & displaytype & vbCrLf & dbRow("STATE").ToString & " : " & CInt(dbRow("VALUE")).ToString & vbCrLf & "$" & FormatNumber(CDbl(dbRow("Paid")), 0).ToString
                'add to series
                currentSeries.AddItem(item)               
            End If
        Next dbRow
    End Sub                                        
                                         
                                        
    Hope this helps someone else.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top