Custom String Range on Y Axis

10 posts, 0 answers
  1. Nemanja
    Nemanja avatar
    27 posts
    Member since:
    Mar 2011

    Posted 10 Oct 2011 Link to this post

    hello,

    i am trying to set up a custom range on my y axis as our 'date' values are custom generated and do not work in the same way as normal dates or numeric values.

    we have a situation where the chart would run along variable time levels, ie sometimes weeks, sometimes months, quarters, etc. the chart needs to plot these time members across the Y axis of a horizontal 2D Bar chart and display the values as such:

    M201010       M201011       M201012     M201101 etc..

    what we did to overcome the fact that we need a numeric value for the axis was to use only the numeric section of the chart and then set a min and max value (since we know the start and end date for the chart) but this works only as long as the values are for the same year, in this example 2010.

    if the periods span over 2 years, ie from 2010 to 2011, the series stretches from M201012 all the way to M201099 before getting on to 2011, because it increments by one of course.

    the chart is set up in the xaml as follows:

    <telerik:RadChart Grid.Row="0" Grid.Column="0" x:Name="TimeRangeChart" ItemsSource="{Binding PhasingOptionList}" UseDefaultLayout="False" DataBound="TimeRangeChart_Loaded">
                <telerik:RadChart.Resources>
                    <Style x:Key="CustomAxisTitleStyle" TargetType="telerik:AxisTitle">
                        <Setter Property="FontWeight" Value="Normal" />
                        <Setter Property="Margin" Value="0,0,10,0" />
                    </Style>
                    <Style x:Key="SeriesItemLabelStyle" TargetType="telerik:SeriesItemLabel">
                        <Setter Property="VerticalAlignment" Value="Center" />
                    </Style>
                    <Style x:Key="ItemLabelStyle" TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Left"/>
                        <Setter Property="Visibility" Value="Collapsed"/>                   
                    </Style>
                </telerik:RadChart.Resources>
                <telerik:RadChart.SeriesMappings>
                    <telerik:SeriesMapping ChartAreaName="ChartArea" >
                        <telerik:SeriesMapping.SeriesDefinition>
                            <telerik:HorizontalRangeBarSeriesDefinition ShowItemLabels="True" ItemLabelFormat="#OptionName - #ColourDescr"
                                                                        ShowItemToolTips="True" SeriesItemLabelStyle="{StaticResource SeriesItemLabelStyle}">                          
                                <telerik:HorizontalRangeBarSeriesDefinition.InteractivitySettings>
                                    <telerik:InteractivitySettings SelectionMode="Single" SelectionScope="Item" HoverScope="Item"  />
                                </telerik:HorizontalRangeBarSeriesDefinition.InteractivitySettings>
                            </telerik:HorizontalRangeBarSeriesDefinition>
                        </telerik:SeriesMapping.SeriesDefinition>
                        <telerik:ItemMapping FieldName="ProposedSellTimeFromCodeNumeric" DataPointMember="Low" />
                        <telerik:ItemMapping FieldName="ProposedSellTimeToCodeNumeric" DataPointMember="High" />
                        <telerik:ItemMapping FieldName="OptionNo" DataPointMember="XCategory" />
                    </telerik:SeriesMapping>
                </telerik:RadChart.SeriesMappings>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <telerik:ChartArea Grid.Row="0" x:Name="ChartArea" NoDataString="" LabelFormatBehavior="None"
                                       ItemClick="ChartArea_ItemClick" ItemToolTipOpening="ChartArea_ItemToolTipOpening"
                                        PaletteBrushesRepeat="False" EnableAnimations="False" >
                        <telerik:ChartArea.ZoomScrollSettingsX>
                            <telerik:ZoomScrollSettings ScrollMode="ScrollAndZoom" MinZoomRange="0.005"/>
                        </telerik:ChartArea.ZoomScrollSettingsX>
                        <telerik:ChartArea.PaletteBrushes>
                            <SolidColorBrush Color="#FF74A6E2"/>
                        </telerik:ChartArea.PaletteBrushes>
                        <telerik:ChartArea.AxisY>
                            <telerik:AxisY Title="{Binding BottomTimePeriodDescription}" ExtendDirection="Up" DefaultLabelFormat="{Binding TimeValueLabelFormat}"
                                            MinValue="{Binding FromWeekNumeric}" MaxValue="{Binding ToWeekNumeric}" AutoRange="False"
                                            LabelRotationAngle="-45" MinorTicksVisibility="Hidden">
                                <telerik:AxisY.AxisStyles>
                                    <telerik:AxisStyles TitleStyle="{StaticResource CustomAxisTitleStyle}" ItemLabelStyle="{StaticResource ChartAxisTextStyle}" />
                                </telerik:AxisY.AxisStyles>
                            </telerik:AxisY>
                        </telerik:ChartArea.AxisY>
                        <telerik:ChartArea.AxisX>
                            <telerik:AxisX LayoutMode="Inside" MinorTicksVisibility="Collapsed" MajorTicksVisibility="Collapsed"  >
                                <telerik:AxisX.AxisStyles>
                                    <telerik:AxisStyles ItemLabelStyle="{StaticResource ItemLabelStyle}" />
                                </telerik:AxisX.AxisStyles>
                            </telerik:AxisX>
                        </telerik:ChartArea.AxisX>
                    </telerik:ChartArea>               
                </Grid>
            </telerik:RadChart>


    is there a way to get around this?

    thanks,
    Nemanja
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 13 Oct 2011 Link to this post

    Hello Nemanja,

    Basically, the chart uses the same interval along the x axis, for all the points. Thus, if you have data like the one you mentioned, an ordinary may not be sufficient - you can assign X values for the items from 1 to n, where n is the last item to show, and use these numbers for the axis. Other than this, the axis cannot be customized to equally space the heterogeneous data.
    I hope that this is a feasible solution for you.

    Best wishes,
    Yavor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Nemanja
    Nemanja avatar
    27 posts
    Member since:
    Mar 2011

    Posted 18 Oct 2011 Link to this post

    so your suggestion is to assign a number from 1 to n to each of the items along the x axis and plot using that value, and then change the label so that it displays the string instead?

    so we'd have:

    M201010       M201011       M201012     M201101
    1                      2                      3                 4                              etc?

    this could work for us, it would just need a minor stored proc change to provide this data, but how would the defaultitemlabel be specified? this is what we currrently have, and it just formats the #VAL attribute, but now we'd need to point to the string itself, call it "TimeLabel" perhaps. would it just be a case of setting the value to #TimeLabel? that doesn't seem to work.

    this is what we have at the moment:
    <telerik:ChartArea.AxisY>
    <telerik:AxisY Title="{Binding BottomTimePeriodDescription}" ExtendDirection="Up" DefaultLabelFormat="{Binding TimeValueLabelFormat}"
                                            MinValue="{Binding FromWeekNumeric}" MaxValue="{Binding ToWeekNumeric}" AutoRange="False"
                                            LabelRotationAngle="-45" MinorTicksVisibility="Hidden">
    <telerik:AxisY.AxisStyles>
    <telerik:AxisStyles TitleStyle="{StaticResource CustomAxisTitleStyle}" ItemLabelStyle="{StaticResource ChartAxisTextStyle}" />
                </telerik:AxisY.AxisStyles>
      </telerik:AxisY>
    </
    telerik:ChartArea.AxisY>


    The 'TimeValueLabelFormat' property just takes the #VAL property that contains the numeric value that we currently plot and adds string values to make it look the way it needs to. in the item mappings section we do the following:

    <telerik:ItemMapping FieldName="ProposedSellTimeFromCodeNumeric" DataPointMember="Low" />
    <telerik:ItemMapping FieldName="ProposedSellTimeToCodeNumeric" DataPointMember="High" />
    <telerik:ItemMapping FieldName="OptionNo" DataPointMember="XCategory" />


    Am I doing somethign wrong?
  5. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 20 Oct 2011 Link to this post

    Hello Nemanja,

    There are two possible options to handle this.
    The first would be to retemplate the x axis, and bind the label text to a field in the data context.
    Another option is to set the text directly:

    void RadChart1_DataBound(object sender, ChartDataBoundEventArgs e)
          {
              if (shouldApplySettings)
              {
                  shouldApplySettings = false;
                  RadChart1.DefaultView.ChartArea.AxisX.TickPoints[0].Label = "custom string";
              }
          }

    Let me know how these meet your requirements.

    All the best,
    Yavor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Mayra
    Mayra avatar
    18 posts
    Member since:
    Oct 2011

    Posted 15 Nov 2011 Link to this post

    Would you please tell me if the ExtendDirection property works when the autoRange property is set to false and I am calculating the max and minimum?

    Thanks you in advance for the help and I look forward to hear from you

    Regards
  7. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 18 Nov 2011 Link to this post

    Hello Mayra,

    Thank you for writing back.

    The AxisY ExtendDirection property does not work when the AxisY AutoRange is set to false and the Min and Max values are manually set. You can use only one of both features in order to control the AxisY range.

    Please, do let me know if you have any more questions.

    Best wishes,
    Peshito
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  8. Nemanja
    Nemanja avatar
    27 posts
    Member since:
    Mar 2011

    Posted 26 Nov 2012 Link to this post

    Hi,

    We resolved this issue with the custom strings on the label charts but we're finding that every time a label is changed on the chart - it seems to re-draw the chart for each label change.

    We have a situation where there are usually about 40 points on the axis, so looping through and changing each one causes the chart to be re-drawn around 40 times which is very slow given what we're doing.

    is there a way to tell the chart not to re-fire until all the labels have been changed?

    thanks,
    Nemanja
  9. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 28 Nov 2012 Link to this post

    Hello,

     Altering the labels on the axis should not redraw the control, only the labels. Attached to this message, is a small application, which handles a similar funtionality.
    Take a look at it and let me know whether this is the expected functionality or perhaps I am leaving something out.

    Kind regards, Yavor
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  10. Nemanja
    Nemanja avatar
    27 posts
    Member since:
    Mar 2011

    Posted 28 Nov 2012 Link to this post

    Hi Yavor,

    Thanks for the application. We're currently doing something very similar to that, but the response seemed to be very slugging. Maybe even re-drawing the axis labels only may have caused the performance hit, I'm not sure.

    We did manage to get around it though, by copying all the tickpoints into a list, removing the entire range from the axis, editing the tickpoints and then adding them at the end again. This way it only gets fired once all the labels have been updated and the performance is much, much better.

    Hopefully that'll help anyone else running into the same scenario.

    Nemanja
  11. Nemanja
    Nemanja avatar
    27 posts
    Member since:
    Mar 2011

    Posted 28 Nov 2012 Link to this post

    Hi Yavor,

    Thanks for the application. We're currently doing something very similar to that, but the response seemed to be very sluggish. Maybe even re-drawing the axis labels only may have caused the performance hit, I'm not sure.

    We did manage to get around it though, by copying all the tickpoints into a list, removing the entire range from the axis, editing the tickpoints and then adding them at the end again. This way it only gets fired once all the labels have been updated and the performance is much, much better.

    Hopefully that'll help anyone else running into the same scenario.

    Nemanja
Back to Top
UI for WPF is Visual Studio 2017 Ready